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

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

ただいまの
回答率

87.37%

LaravelでDBから取得したデータをtbodyに出力させユーザー画像をクリックしたらPOST送信させたい。

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,202

score 48

Laravelを勉強しているものです。ユーザーテーブルから取得した結果をjavascriptを使って動的なテーブルを作成して横3列ずつユーザーの画像を表示させようとしています。ユーザーの画像をクリックするとPOSTでコントローラーにユーザーIDを渡すのですがここの処理がうまくいきません。

<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
        $(document).ready(function() {
            $('html,body').animate({ scrollTop: 0 }, '1');
        
       //ユーザー情報テーブルを検索してレスポンス結果をjsonで取得する
            $.ajax({
                url: 'showuser/init',
                type:'POST',
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                dataType: 'json',
                data: {
                  "process_id" : "process01",
                },
                success: function(data) {
                    var yoso1 = Object.keys(data)[0];
                    var dataLength = Object.keys(data[yoso1]).length

                    var tbody = document.getElementById('tbodyID');

                    for (var i = 0; i < dataLength; i++) {

                        if((i + 1) % 3 == 0){

                          var tr = document.createElement('tr');
                            //左に表示するユーザー
                            var td1 = document.createElement('td');
                            var img1 = document.createElement("img");
                            img1.setAttribute("src", data[yoso1][i - 2]['pic_file']);
                            var aTag1 = document.createElement('a');
                            aTag1.onclick= function() {
                              $.ajax({
                                  url: '/showuser',
                                  type:'POST',
                                  headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                                  dataType: 'html',
                                  data: {
                                    "user_id" : data[yoso1][i - 2]['user_id'],
                                  },
                                  success: function(html) {
                                      document.open();
                                      document.write(html);
                                      document.close();
                                  },
                                  error: function () {
                                      alert("読み込み失敗");
                                  }
                              });
                            };

                            aTag1.appendChild(img1);
                            td1.appendChild(aTag1);

                            //真ん中に表示するユーザー
                            var td2 = document.createElement('td');
                            var img2 = document.createElement("img");
                            img2.setAttribute("src", data[yoso1][i - 1]['pic_file']);
                            var aTag2 = document.createElement('a');
                            aTag2.onclick= function() {
                              $.ajax({
                                  url: '/showuser',
                                  type:'POST',
                                  headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                                  dataType: 'html',
                                  data: {
                                    "user_id" : data[yoso1][i - 1]['user_id'],
                                  },
                                  success: function(html) {
                                    document.open();
                                    document.write(html);
                                    document.close();
                                  },
                                  error: function () {
                                      alert("読み込み失敗");
                                  }
                              });
                            };
                            aTag2.appendChild(img2);
                            td2.appendChild(aTag2);

                            //右に表示するユーザー
                            var td3 = document.createElement('td');
                            var img3 = document.createElement("img");
                            img3.setAttribute("src", data[yoso1][i]['pic_file']);
                            var aTag3 = document.createElement('a');
                            aTag3.onclick= function() {
                              $.ajax({
                                  url: '/showuser',
                                  type:'POST',
                                  headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                                  dataType: 'html',
                                  data: {
                                    "user_id" : data[yoso1][i]['user_id'],
                                  },
                                  success: function(html) {
                                    document.open();
                                    document.write(html);
                                    document.close();
                                  },
                                  error: function () {
                                      alert("読み込み失敗");
                                  }
                              });
                            };

                            aTag3.appendChild(img3);
                            td3.appendChild(aTag3);

                            tbody.appendChild(td1);
                            tbody.appendChild(td2);
                            tbody.appendChild(td3);

                          tbody.appendChild(tr);
                        }
                    }
                },
                error: function () {
                    alert("読み込み失敗");
                }
            });
        });
</script>
</head>
<body>
      <table>
        <tbody id="tbodyID"></tbody>
      </table>
</body>


実際に画像をクリックするとonclickが実行されないのとPOSTのデータに指定するユーザーIDが最後のインデックスに紐付くユーザーIDが設定されてしまいます。

実現させたいことは
①ユーザーの画像をクリックするとonclickでAjaxが実行されること
②AjaxのPOSTで送るユーザーIDがそれぞれのユーザーIDであること

Laravelあるいはphpとjavascriptの組み合わせが得意な方がいましたらご回答いただけないでしょうか?

  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • asahina1979

    2019/02/21 08:57

    imageボタンでどうぞ?

    キャンセル

  • m.ts10806

    2019/02/21 09:49

    「テーブルを動的に作成」は制御が煩雑になるだけですよ。
    表現の間違いかもしれませんが(データのことなら本来はテーブルではなくレコードかな?)、そのあたり、具体的に記載してください。

    キャンセル

  • nedisoh

    2019/02/22 17:55

    Viewに直接ユーザ情報を渡すのではダメなのですか?

    キャンセル

回答 1

check解決した方法

0

formでimageボタンを実装したところやりたいことが実現できました。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

同じタグがついた質問を見る

  • トップ
  • PHPに関する質問
  • LaravelでDBから取得したデータをtbodyに出力させユーザー画像をクリックしたらPOST送信させたい。