投稿2017/04/13 05:34
###前提・実現したいこと
WEBアプリで、1文字入力する毎に、絞り込んだデータ一覧を表示するような仕組みを作成したいと思っています。
試作として、ガンプラ屋さんデータベースを作成しました。
###該当のソースコード
SQL
1create table ganpura(id varchar(20),name varchar(20),price int); 2insert into ganpura values 3('MS-06','ザク',2000), 4('MS-07','グフ',2000), 5('MS-09','ドム',2500), 6('MSM-03','ゴック',1900), 7('MSM-07','ズゴック',1700), 8('MSM-04','アッガイ',2000), 9('RX-78','ガンダム',2500), 10('RX-77','ガンキャノン',2500), 11('RX-75','ガンタンク',2800) 12;
次のようなHTMLを組みました。HTMLの名称は、Question008b.htmlとします。Googleで調べ、文字を入力する度、AjaxでQuestion008b.phpに文字列を渡すようにしました。
HTML
1<!doctype html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title>jQueryを使ったテキストボックス</title> 6<link rel="stylesheet" href=""> 7<script src="../common/jquery/jquery-3.1.1.min.js"></script> 8 <style type="text/css"> 9 div.molls{ 10 cursor: pointer; 11 cursor: hand; 12 height: 25px; 13 width: 400px; 14 } 15 </style> 16</head> 17 18<body> 19<script> 20 $(document).ready(function(){ 21 22 $('#textarea2 textarea').each(function(){ 23 $(this).bind('keyup', hoge(this)); 24 }); 25 26 function hoge(elm){ 27 var v, old = elm.value; 28 return function(){ 29 if(old != (v=elm.value)){ 30 old = v; 31 str = $(this).val(); 32 $.ajax({ //ajaxによる非同期通信発生 33 type: "POST", //POST送信でデータを受け渡す 34 url: "Question008b.php", //ータを送る 35 data: {id:$(this).val()}, //id:seirekiに入力された文字列 36 success: function(hoge) //接続が成功 37 { 38 $("#textarea2 div").html(hoge); 39 }, 40 error: function(XMLHttpRequest,textStatus,errorThrown) //接続が失敗 41 { 42 alert('エラーです！'); //エラーを表示 43 } 44 }); 45 46 } 47 } 48 } 49 }); 50</script> 51 52<h4>実行例</h4> 53<div class="box2"> 54<div id="textarea2"> 55<textarea></textarea> 56<div></div> 57</div> 58</div> 59 60 <!-- ここにjQuery --> 61 62 <script> 63 $('div.molls').on('click', function(){ 64 var number = jQuery(this).attr('data-molsel'); 65 $('<form/>', {action: 'Question008b2.php', method: 'post'}) 66 .append($('<input/>', {type: 'hidden', name: 'mold_serial', value: number})) 67 .appendTo(document.body) 68 .submit(); 69 }); 70 71 </script> 72 73 74</body> 75</html>
受け取る方のPHPはこのようになっています。ajaxからユーザーが入力した文字を受け取り、データベースを検索して、名前の一覧を返します。DIVタグでできたこの部分は、Question008b.htmlの所定の場所に挿入されます。
PHP
1<?php 2 3 $id = $_POST['id']; 4 $id .= '%'; 5 6 $dsn = 'mysql:dbname=[接続文字列]'; 7 $user='[接続ユーザー]'; 8 $password='[接続パスワード]'; 9 $dbh = new PDO($dsn, $user, $password); 10 $dbh->query('SET NAMES utf8'); 11 12 $sql = 'SELECT `id`, `name` FROM `ganpura` WHERE `id` Like '; 13 $sql .= '\''; 14 $sql .= $id; 15 $sql .= '\''; 16 $sql .= ';'; 17 18 $stmt = $dbh->prepare($sql); 19 $stmt->execute(); 20 $dbh=null; 21 22 $ectx = ''; 23 24 while(true) 25 { 26 $rec=$stmt->fetch(PDO::FETCH_ASSOC); 27 if($rec == false) 28 { 29 break; 30 } 31 $ectx .= '<DIV class="molls" data-mdmame="'; 32 $ectx .= $rec['id']; 33 $ectx .= '">'; 34 35 $ectx .= $rec['name']; 36 $ectx .= '</DIV>'; 37 $ectx .PHP_EOL; 38 } 39 40echo $ectx; 41 42?>
ここまでは順調で、例えばRを入力すると、MSで始まるジオン系はすべ除かれ、連邦系のもののみが、画面に表示されます。
HTML
1<html><head> 2<meta charset="utf-8"> 3<title>jQueryを使ったテキストボックス</title> 4<link rel="stylesheet" href=""> 5<script src="../common/jquery/jquery-3.1.1.min.js"></script> 6 <style type="text/css"> 7 div.molls{ 8 cursor: pointer; 9 cursor: hand; 10 height: 25px; 11 width: 400px; 12 } 13 </style> 14</head> 15 16<body> 17<script> 18 $(document).ready(function(){ 19 20 $('#textarea2 textarea').each(function(){ 21 $(this).bind('keyup', hoge(this)); 22 }); 23 24 function hoge(elm){ 25 var v, old = elm.value; 26 return function(){ 27 if(old != (v=elm.value)){ 28 old = v; 29 str = $(this).val(); 30 $.ajax({ //ajaxによる非同期通信発生 31 type: "POST", //POST送信でデータを受け渡す 32 url: "Question008b.php", //ータを送る 33 data: {id:$(this).val()}, //id:seirekiに入力された文字列 34 success: function(hoge) //接続が成功 35 { 36 $("#textarea2 div").html(hoge); 37 }, 38 error: function(XMLHttpRequest,textStatus,errorThrown) //接続が失敗 39 { 40 alert('エラーです！'); //エラーを表示 41 } 42 }); 43 44 } 45 } 46 } 47 }); 48</script> 49 50<h4>実行例</h4> 51<div class="box2"> 52<div id="textarea2"> 53<textarea></textarea> 54<div><div class="molls" data-mdmame="RX-78">ガンダム</div><div class="molls" data-mdmame="RX-77">ガンキャノン</div><div class="molls" data-mdmame="RX-75">ガンタンク</div></div> 55</div> 56</div> 57 58 <!-- ここにjQuery --> 59 60 <script> 61 $('div.molls').on('click', function(){ 62 var number = jQuery(this).attr('data-molsel'); 63 $('<form/>', {action: 'Question008b2.php', method: 'post'}) 64 .append($('<input/>', {type: 'hidden', name: 'mold_serial', value: number})) 65 .appendTo(document.body) 66 .submit(); 67 }); 68 69 </script> 70 71 72 73 74</body></html>
希望としては、この後、表示されている名前をクリックすると、Question008b2.phpへ、data-mdmameの値を持って遷移したいです。
Question008b2.phpはこのような内容です。
HTML
1 2<?php 3 4 $id = $_POST['id']; 5 6 $dsn = 'mysql:dbname=[接続文字列]'; 7 $user='[接続ユーザー]'; 8 $password='[接続パスワード]'; 9 $dbh = new PDO($dsn, $user, $password); 10 $dbh->query('SET NAMES utf8'); 11 12 $sql = 'SELECT `id`, `name`,`price` FROM `ganpura` WHERE `id` = '; 13 $sql .= '\''; 14 $sql .= $id; 15 $sql .= '\''; 16 $sql .= ';'; 17 18 $stmt = $dbh->prepare($sql); 19 $stmt->execute(); 20 $dbh=null; 21 22 $ectx = ''; 23 24 $rec=$stmt->fetch(PDO::FETCH_ASSOC); 25 $msid = $id; 26 $msname = $rec['name']; 27 $msprice =$rec['price']; 28 29?> 30<!doctype html> 31<html> 32<head> 33<meta charset="utf-8"> 34<title>無題ドキュメント</title> 35</head> 36 37<body> 38型式：<?php print($msid); ?> 39名前：<?php print($msname); ?> 40値段：<?php print($msprice); ?> 41 42</body> 43</html> 44
ところが、実際には表示された名前をクリックしてもQuestion008b2.phpへ遷移しません。
ajaxで検索結果のDIVを取り込んだ状態のソースコードを、HTMLとして保存すると、正常にQuestion008b2.phpへ移動しますので、ajaxで読み込んだソースには、前回、こちらで質問させていただいた[要素を与えて、jQueryで別ページに遷移したい」を参考に組み込んだFOMEを作成して送信するブロックが適用されていないようです。
こちらでも、類似の質問が在る事は確認しましたが、サンプルのソースもなく、また、回答も放置されておられるようですので、作成したソースをつけたうえで質問とさせていただきます。
ajaxで読み込んだ部分のHTMLにも、JavaScriptを適用させる、なにか良い方法がありましたら、ご教授ください。
よろしくお願いいたします。
回答2件
0
ベストアンサー
動的に生成したDOM要素に対してjQueryでイベントを設定する場合
$('div.molls').on('click', function(){ var number = jQuery(this).attr('data-molsel'); $('<form/>', {action: 'Question008b2.php', method: 'post'}) .append($('<input/>', {type: 'hidden', name: 'mold_serial', value: number})) .appendTo(document.body) .submit(); });
↑これを
$(document).on("click", "div.molls", (function(){ //同様の処理 });
こうしてはどうでしょう。
または、都度作成するdivにonclick属性をつけても、クリックに反応します。
投稿2017/04/13 08:53
総合スコア726
0
nameに<a href="Question008b2.php?id=xxx">名前</a>となるよう調整し
postではなくgetでidを検索すればよいのでは？
投稿2017/04/13 06:41
総合スコア114839
あなたの回答
tips
プレビュー
Q&A
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/04/14 04:53