Q&A
imageボタンでどうぞ？
Laravelを勉強しているものです。ユーザーテーブルから取得した結果をjavascriptを使って動的なテーブルを作成して横3列ずつユーザーの画像を表示させようとしています。ユーザーの画像をクリックするとPOSTでコントローラーにユーザーIDを渡すのですがここの処理がうまくいきません。
php
1<html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> 2 <head> 3 <meta charset="utf-8"> 4 <meta name="csrf-token" content="{{ csrf_token() }}"> 5 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 6 <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 7<script> 8 $(document).ready(function() { 9 $('html,body').animate({ scrollTop: 0 }, '1'); 10 11 //ユーザー情報テーブルを検索してレスポンス結果をjsonで取得する 12 $.ajax({ 13 url: 'showuser/init', 14 type:'POST', 15 headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}, 16 dataType: 'json', 17 data: { 18 "process_id" : "process01", 19 }, 20 success: function(data) { 21 var yoso1 = Object.keys(data)[0]; 22 var dataLength = Object.keys(data[yoso1]).length 23 24 var tbody = document.getElementById('tbodyID'); 25 26 for (var i = 0; i < dataLength; i++) { 27 28 if((i + 1) % 3 == 0){ 29 30 var tr = document.createElement('tr'); 31 //左に表示するユーザー 32 var td1 = document.createElement('td'); 33 var img1 = document.createElement("img"); 34 img1.setAttribute("src", data[yoso1][i - 2]['pic_file']); 35 var aTag1 = document.createElement('a'); 36 aTag1.onclick= function() { 37 $.ajax({ 38 url: '/showuser', 39 type:'POST', 40 headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}, 41 dataType: 'html', 42 data: { 43 "user_id" : data[yoso1][i - 2]['user_id'], 44 }, 45 success: function(html) { 46 document.open(); 47 document.write(html); 48 document.close(); 49 }, 50 error: function () { 51 alert("読み込み失敗"); 52 } 53 }); 54 }; 55 56 aTag1.appendChild(img1); 57 td1.appendChild(aTag1); 58 59 //真ん中に表示するユーザー 60 var td2 = document.createElement('td'); 61 var img2 = document.createElement("img"); 62 img2.setAttribute("src", data[yoso1][i - 1]['pic_file']); 63 var aTag2 = document.createElement('a'); 64 aTag2.onclick= function() { 65 $.ajax({ 66 url: '/showuser', 67 type:'POST', 68 headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}, 69 dataType: 'html', 70 data: { 71 "user_id" : data[yoso1][i - 1]['user_id'], 72 }, 73 success: function(html) { 74 document.open(); 75 document.write(html); 76 document.close(); 77 }, 78 error: function () { 79 alert("読み込み失敗"); 80 } 81 }); 82 }; 83 aTag2.appendChild(img2); 84 td2.appendChild(aTag2); 85 86 //右に表示するユーザー 87 var td3 = document.createElement('td'); 88 var img3 = document.createElement("img"); 89 img3.setAttribute("src", data[yoso1][i]['pic_file']); 90 var aTag3 = document.createElement('a'); 91 aTag3.onclick= function() { 92 $.ajax({ 93 url: '/showuser', 94 type:'POST', 95 headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}, 96 dataType: 'html', 97 data: { 98 "user_id" : data[yoso1][i]['user_id'], 99 }, 100 success: function(html) { 101 document.open(); 102 document.write(html); 103 document.close(); 104 }, 105 error: function () { 106 alert("読み込み失敗"); 107 } 108 }); 109 }; 110 111 aTag3.appendChild(img3); 112 td3.appendChild(aTag3); 113 114 tbody.appendChild(td1); 115 tbody.appendChild(td2); 116 tbody.appendChild(td3); 117 118 tbody.appendChild(tr); 119 } 120 } 121 }, 122 error: function () { 123 alert("読み込み失敗"); 124 } 125 }); 126 }); 127</script> 128</head> 129<body> 130 <table> 131 <tbody id="tbodyID"></tbody> 132 </table> 133</body>
実際に画像をクリックするとonclickが実行されないのとPOSTのデータに指定するユーザーIDが最後のインデックスに紐付くユーザーIDが設定されてしまいます。
実現させたいことは
①ユーザーの画像をクリックするとonclickでAjaxが実行されること
②AjaxのPOSTで送るユーザーIDがそれぞれのユーザーIDであること
Laravelあるいはphpとjavascriptの組み合わせが得意な方がいましたらご回答いただけないでしょうか？
「テーブルを動的に作成」は制御が煩雑になるだけですよ。
表現の間違いかもしれませんが（データのことなら本来はテーブルではなくレコードかな？）、そのあたり、具体的に記載してください。
Viewに直接ユーザ情報を渡すのではダメなのですか？
自己解決
