質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.99%

【CakePHP3】javascriptへの値の受け渡しが上手くいかない。

解決済

回答 2

投稿

  • 評価
  • クリップ 1
  • VIEW 4,659

cicle

score 33

現在、CakePHP3.3.5を使用しています。

モーダルビュー内でEntityの検索をして、その結果を表示させたく思っています。

しかし、モーダルを出すまでは実装、検索は出来たのですが、
Controllerから検索結果を

echo $string;


でjavascriptへテキスト(html)を渡す際にデータの後ろにエラー文がついてきています。

<table class='table'>
              <tr>
                <th>id</th>
                <th>なまえ</th>
              </tr><tr><td>2</td>
                    <td>検索で取得したデータ</td>
                    <td><button class="btn" data-dismiss="modal">選択</button><td>
                  </tr><pre class="cake-error"> //"echo $string" の中身です。以降は勝手にくっついてきます。
<pre class="cake-error">
    <a href="javascript:void(0);"onclick="document.getElementById('cakeErr57ff24f2d63fc-trace').style.display = (document.getElementById('cakeErr57ff24f2d63fc-trace').style.display == 'none' ? '' : 'none');">
        <b>Warning</b> (512)
    </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' ? '' ...&gt; &#039;Gateway Time-out&#039;,
        (int) 505 =&gt; &#039;HTTP Version not supported&#039;,
        (int) 506 =&gt; &#039;Variant Also Negotiates&#039;,
        (int) 507 =&gt; &#039;Insufficient Storage&#039;,
        (int) 508 =&gt; &#039;Loop Detected&#039;,
        (int) 511 =&gt; &#039;Network Authentication Required&#039;
    ]
    [private] reasonPhrase =&gt; &#039;OK&#039;
    [private] statusCode =&gt; (int) 200
    [private] protocol =&gt; &#039;1.1&#03
       ......


このような形でjsファイルに値を渡しています。

https://teratail.com/questions/30183
こちらの投稿などを参考に試行錯誤していたのですが、結局わからなかったでの質問いたしました。
(他の方の質問URLを載せては行けない場合は直ぐに消しますのでお教え下さい。)

どうしたらよいでしょうか?

下記はソースの概要となります。

〇〇Controller.php
~~
public function add()
    {
      if ($this->request->is('ajax')) {
        $this->autoRender = false;

        if(isset($_POST['keyword'])){
          $keyword = $_POST['keyword'];
          $customers = $this->〇〇s->find()->where(['name' => $keyword]);

          if(count($c〇〇s) > 0) {
            $string = "<table class='table'><tr><th>id</th><th>なまえ</th></tr>";

            foreach ($〇〇s as $〇〇) {
              $string .= "<tr>";
              $string .= "<td>".$〇〇->id."</td>
                    <td>".$〇〇->name."</td>
                    <td><button class=\"btn\" data-dismiss=\"modal\">選択</button><td>
                  </tr>";
             }
             $string."</table>";


             echo $string;

           }else{
             echo "ヒットしませんでした。";
           }

        }else{
            echo 'The parameter of "request" is not found.';
        }
        return;
      }
~~
//モーダルビューを表示
  $('.shwo-modal-btn').click(function(){

    //body内の最後に<div id="modal-bg"></div>を挿入
    $("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">&times;</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>');
}

  // 検索ボタンをおした時
    $("#id_serch_btn").click(function(){

      var c_url = $('#modal.js').data('url');

      var data = {"keyword" : $('#request').val()};
      $.ajax({
        url:c_url,
        type: "post",
        data: data,
        //Ajax通信が成功した場合に呼び出されるメソッド
        success: function(res, dataType){
              // //デバッグ用 アラート
               alert(res);

              //上記モーダルビューの"<table id="results">"を書き換え
              $('#results').html(res);
          },
          //Ajax通信が失敗した場合に呼び出されるメソッド
          error: function(XMLHttpRequest, textStatus, errorThrown){
              alert('#XMLHttpRequest : ' + data);
              $("#XMLHttpRequest").html("XMLHttpRequest : " + XMLHttpRequest.status);
              $("#textStatus").html("textStatus : " + textStatus);
              $("#errorThrown").html("errorThrown : " + errorThrown);
          }
        });
        return false;

    });
}

    // 閉じるボタンをおした時
    $(".btn-modal-close").click(function(){
      $("#modal").remove();
    });
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+1

# echo $string <-これをやめて
return $string; //これにしてみてください

ajaxで返答する機能はCakePHPが制御していますが、それはControllerの処理の「後」になります。
Controllerでecho等してしまうと、その為のレスポンスの準備が行われるため、「HTTP Header情報が既に送られているよ」というエラーが出るわけです。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/10/13 16:45 編集

    kunaiさん

    早速のご回答有難う御座います!
    kunaiさんの仰るように"return"にするとなくなったように思います!

    なぜ、「なくなったように」なのかと申しますと、ajaxでの通信が失敗した場合の処理に返ってきてしまっているのです。

    こちら、echoだとajax通信成功、returnだとajax通信失敗になってしまうのはなぜなのでしょうか。。。

    ー追記ー
    上記ajax通信失敗の際に出るアラートには「#XMLHttpRequest : [object Object]」、
    各項目は
    XMLHttpRequest : 500
    textStatus : error
    errorThrown : Internal Server Error
    という記載になっております。

    キャンセル

  • 2016/10/13 17:09

    textStatusとかには何が表示されてますか?
    ブラウザを開いてF12を押して「開発者ツール」を表示してから試してみてもらえますか?
    Chromeの場合、「Network」というタブの中で各種通信のログが記録されていますので、対象のURLを呼んでいる通信を探してクリックすると「Headers」「Response」等のデータが表示されるかと思います。
    今回の場合、特に「Response」がどうなってるか見てみてください。

    キャンセル

  • 2016/10/13 17:29

    textStatusには「error」とだけ表示されています。
    Chromeの「Network」を見たところ
    「app_name/〇〇s/add」が
    Status Code:500 Internal Server Error
    Remote Address:[::1]:8888

    となっておりました。

    Responseは
    htmlが返されてきており
    〜省略〜
    <title>
    Error: Controller actions can only return Cake\Network\Response or null.
    </title>
    〜〜〜〜〜〜〜〜〜
    <h1 class="header-title">
    Controller actions can only return Cake\Network\Response or null. <span class="header-type">LogicException</span>
    </h1>
    〜〜以下、めちゃくちゃ続いております...〜〜〜
    となっていました。

    キャンセル

  • 2016/10/13 17:45

    出来ました!

    おかげさまで、問題箇所を見つけることができ、調べると
    ControllerからはResponseを使用して出ないとreturn出来ないみたいでしたので、
    Cakeのリファレンス?を調べ
    "retunr $string;"の部分を
    "$this->response->body($string);"で返すとキチンと表示されました!

    kunaiさん!
    本当に有難うございました!
    もし、今後も私を見かけましたら何卒宜しくお願いいたします!

    キャンセル

+1

Controller内でHTMLを組み立てるのではなく、Templateにctpファイルを作ってそこにHTMLを書くのが普通だと思いますよ。
また、一旦Ajaxではなく、ブラウザからURLにアクセスしてモーダルが正しく表示されることを確認したほうがいいと思います。Ajaxはデバックするのが大変ですからね

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/10/13 17:54

    icchiiさん

    回答有難う御座います!

    実際、私自身もそう思うのですが独学でiPhoneアプリ開発を覚えたレベル、なおかつWeb開発自体の経験が皆無という状況でして、その状態でシステムの開発を任されましてもうパニック状態なんです...

    話はそれてしまいましたが、icchiiさんの仰る通りだと思います。
    ctpファイルにajax結果を反映した<table>~~~</table>のみを、下記kunaiさんとの回答の中でありました「$this->response->body($objects);」をして実装できれば、と思っております。

    逆に、そういうことが出来ないと思っていましたので、「出来る」事を教えて頂きまして有難う御座います!

    もし、また私を見かけましたらお助け下さいませ。
    フォローさせて頂きますので、よろしくお願い致します!

    キャンセル

  • 2016/10/13 18:10 編集

    基本的にはCakephp3では、普通のページでもAJAXでも、同じようにctpファイルを作れば同じように動きますよ。唯一違うのは、レイアウトがdefaultではなく、以下のajaxのものが使われるので、レイアウト側のHTMLが排除されるだけです。
    src/Template/Layout/ajax.ctp
    このファイルをみるとわかりますが、ctpの中身だけを出力するようになっています。
    ※試しに、すでにある普通のページにAjaxでGETしてみるとわかると思いますよ
    ※時間があるときにでもリファクタリングしてみてください!!

    > もし、また私を見かけましたらお助け下さいませ。
    よろこんで!!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.99%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる