現在、CakePHP3.3.5を使用しています。
モーダルビュー内でEntityの検索をして、その結果を表示させたく思っています。
しかし、モーダルを出すまでは実装、検索は出来たのですが、
Controllerから検索結果を
php
1echo $string;
でjavascriptへテキスト(html)を渡す際にデータの後ろにエラー文がついてきています。
html
1<table class='table'> 2 <tr> 3 <th>id</th> 4 <th>なまえ</th> 5 </tr><tr><td>2</td> 6 <td>検索で取得したデータ</td> 7 <td><button class="btn" data-dismiss="modal">選択</button><td> 8 </tr><pre class="cake-error"> //"echo $string" の中身です。以降は勝手にくっついてきます。 9<pre class="cake-error"> 10 <a href="javascript:void(0);"onclick="document.getElementById('cakeErr57ff24f2d63fc-trace').style.display = (document.getElementById('cakeErr57ff24f2d63fc-trace').style.display == 'none' ? '' : 'none');"> 11 <b>Warning</b> (512) 12 </a>: Unable to emit headers. Headers sent in file=/Applications/MAMP/htdocs/app_name/src/Controller/〇〇〇〇Controller.php line=114 [<b>CORE/src/Http/ResponseEmitter.php</b>, line <b>48</b>]<div id="cakeErr57ff24f2d63fc-trace" class="cake-stack-trace" style="display: none;"><a href="javascript:void(0);" onclick="document.getElementById('cakeErr57ff24f2d63fc-code').style.display = (document.getElementById('cakeErr57ff24f2d63fc-code').style.display == 'none' ? '' ...> 'Gateway Time-out', 13 (int) 505 => 'HTTP Version not supported', 14 (int) 506 => 'Variant Also Negotiates', 15 (int) 507 => 'Insufficient Storage', 16 (int) 508 => 'Loop Detected', 17 (int) 511 => 'Network Authentication Required' 18 ] 19 [private] reasonPhrase => 'OK' 20 [private] statusCode => (int) 200 21 [private] protocol => '1.1 22 ......
このような形でjsファイルに値を渡しています。
https://teratail.com/questions/30183
こちらの投稿などを参考に試行錯誤していたのですが、結局わからなかったでの質問いたしました。
(他の方の質問URLを載せては行けない場合は直ぐに消しますのでお教え下さい。)
どうしたらよいでしょうか?
下記はソースの概要となります。
php
1〇〇Controller.php 2~~ 3public function add() 4 { 5 if ($this->request->is('ajax')) { 6 $this->autoRender = false; 7 8 if(isset($_POST['keyword'])){ 9 $keyword = $_POST['keyword']; 10 $customers = $this->〇〇s->find()->where(['name' => $keyword]); 11 12 if(count($c〇〇s) > 0) { 13 $string = "<table class='table'><tr><th>id</th><th>なまえ</th></tr>"; 14 15 foreach ($〇〇s as $〇〇) { 16 $string .= "<tr>"; 17 $string .= "<td>".$〇〇->id."</td> 18 <td>".$〇〇->name."</td> 19 <td><button class=\"btn\" data-dismiss=\"modal\">選択</button><td> 20 </tr>"; 21 } 22 $string."</table>"; 23 24 25 echo $string; 26 27 }else{ 28 echo "ヒットしませんでした。"; 29 } 30 31 }else{ 32 echo 'The parameter of "request" is not found.'; 33 } 34 return; 35 } 36~~
javascript
1//モーダルビューを表示 2 $('.shwo-modal-btn').click(function(){ 3 4 //body内の最後に<div id="modal-bg"></div>を挿入 5 $("body").append('<div class="modal fade" id="select-〇〇-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><button type="button" class="close btn-modal-close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button><h4 class="modal-title">〇〇検索</h4><p>名前で検索できます。</p></div><div class="modal-body"><form method="post"><p><input id="request" class="form-control" size="10" maxlength="10"></p><input id="'+id_create_btn+'" class="btn bg-red" value="新規作成" type="submit"><input id="#id_serch_btn" class="btn pull-right bg-primary" value="検索" type="button"></form><table id="results" class="table"></table><div id="XMLHttpRequest"></div><div id="textStatus"></div><div id="errorThrown"></div><div id="result"></div><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script></div><div class="modal-footer"><button type="button" class="btn btn-secondary btn-modal-close" data-dismiss="modal">Close</button></div></div></div></div>'); 6} 7 8 // 検索ボタンをおした時 9 $("#id_serch_btn").click(function(){ 10 11 var c_url = $('#modal.js').data('url'); 12 13 var data = {"keyword" : $('#request').val()}; 14 $.ajax({ 15 url:c_url, 16 type: "post", 17 data: data, 18 //Ajax通信が成功した場合に呼び出されるメソッド 19 success: function(res, dataType){ 20 // //デバッグ用 アラート 21 alert(res); 22 23 //上記モーダルビューの"<table id="results">"を書き換え 24 $('#results').html(res); 25 }, 26 //Ajax通信が失敗した場合に呼び出されるメソッド 27 error: function(XMLHttpRequest, textStatus, errorThrown){ 28 alert('#XMLHttpRequest : ' + data); 29 $("#XMLHttpRequest").html("XMLHttpRequest : " + XMLHttpRequest.status); 30 $("#textStatus").html("textStatus : " + textStatus); 31 $("#errorThrown").html("errorThrown : " + errorThrown); 32 } 33 }); 34 return false; 35 36 }); 37} 38 39 // 閉じるボタンをおした時 40 $(".btn-modal-close").click(function(){ 41 $("#modal").remove(); 42 }); 43
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/10/13 08:54
2016/10/13 09:16 編集