Q&A
PHP？フレームワークなどご利用でしょうか。Smartyなどのテンプレートエンジンもご利用でしょうか。タグに追加しておいてください。
お世話になっております。
DBから取得したデータをforeachで回し表を作成しています。
その中に、「処理」というボタンを用意し、処理ボタンがクリックされたらモーダルを表示し、
モーダル内において、選択した行のデータに紐づくデータを複数行表示し、その中に、編集や確認や削除のボタンを用意しています。
モーダル内で、最初に選択した行のデータを引き継ぎたいのですが、どの行を選択しても一番上の行のデータのみしか取得できていません。
選択行のデータを引き継ぐにはどうしたらよいのでしょうか？
よろしくお願いいたします。
以下ソースです。
html
1<table id="user" class="table table-bordered table-striped" style="clear: both"> 2 <tr> 3 <th>コード</th> 4 <th>名前</th> 5 <th>名前(カタカナ)</th> 6 <th>カテゴリコード</th> 7 <th>ポイント数</th> 8 <th>PDF作成</th> 9 <th>処理</th> 10 </tr> 11 <tbody> 12 @foreach($results as $result) 13 <tr> 14 <td>{{$result->code}}</td> 15 <td>{{$result->name}}</td> 16 <td>{{$result->name_kana}}</td> 17 <td>{{$result->cate_cd}}</td> 18 <td>{{$result->point}}</td> 19 <td>{{$result->check_pdf == '2' ? '〇' : '×' }}</td> 20 <td> 21 <input type="button" value="編集" class="btn btn-primary btn-xs editmodal" data-code="{{$result->code}}" data-code2="{{$result->code2}}"> 22 <div class="modal fade" id="sampleModal_{{$result->code}}"> 23 <div class="modal-dialog" style="display: block;"> 24 <div class="modal-content"> 25 <div class="modal-header"> 26 <button type="button" class="close" data-dismiss="modal"><span>×</span></button> 27 <h4 class="modal-title">ポイント</h4> 28 </div> 29 <div class="modal-body"> 30 <table class="table table-bordered table-striped" style="clear: both" id="sample_point"> 31 <tr> 32 <th>名前</th> 33 <th>カテゴリ名</th> 34 <th>サンプルA</th> 35 <th>サンプルB</th> 36 <th>サンプルC</th> 37 <th>処理</th> 38 </tr> 39 <tbody id="point"> 40 41 </tbody> 42 </table> 43 </div> 44 </div> 45 </div> 46 </div> 47 </div><!--モーダル--> 48 </td> 49 </tr> 50 @endforeach 51 </tbody> 52</table>
javascript
1$(function(){ 2 3 $('.editmodal').click(function(){ 4 5 var code = $(this).data('code'); 6 var code2 = $(this).data('code2'); 7 8 ajax = $.ajax( 9 { 10 type:"GET", 11 url:"sample_test", 12 async:false, 13 data: 14 { 15 "code":code, 16 "code2":code2 17 }, 18 success:function(json)//通信成功 19 { 20 console.log(json); 21 $('#sample_point td').remove(); 22 for(var i=0;i<json.length;i++){ 23 var sample = (json[i].sample_result === '1') ? 'OK' : 'NG'; 24 $('#sample_point').append('<tr><td>'+json[i].name+'</td>' 25 +'<td>'+json[i].code+'</td>' 26 +'<td>'+json[i].sampleA+'</td>' 27 +'<td>'+json[i].sampleB+'</td>' 28 +'<td>'+json[i].sampleC+'</td>' 29 +'<td>' 30 +'<form action="sample/edit" method="GET">'//編集ボタン 31 +'<input type="hidden" name="code" value="'+json[i].code+'">' 32 +'<input type="hidden" name="name" value="'+json[i].name+'">' 33 +'<input type="submit" value="編集" name="edit" class="btn btn-success btn-xs samplebtn">' 34 +'</form>' 35 +'<form action="sample/confirm" method="GET">'//確認ボタン 36 +'<input type="hidden" name="code" value="'+json[i].code+'">' 37 +'<input type="hidden" name="name" value="'+json[i].name+'">' 38 +'<input type="submit" value="確認" name="confirm" class="btn btn-primary btn-xs samplebtn">' 39 +'</form>' 40 +'<form action="sample/delete" method="GET">'//削除ボタン 41 +'<input type="hidden" name="code" value="'+json[i].code+'">' 42 +'<input type="hidden" name="name" value="'+json[i].name+'">' 43 +'<input type="submit" value="削除" name="delete" class="btn btn-danger btn-xs samplebtn">' 44 +'</form></td></tr>'); 45 } 46 } 47 }); 48 $('#sampleModal_'+code).modal(); 49 50 }); 51 52});
回答1件
0
ベストアンサー
id=sampleModal
がループの数だけ生成されているからでは。
一意の名前をつけなおしてください。
また
js
1$('#sampleModal').modal();
も書き直さなければならないので、例えば連番や識別可能なコードを受け取るようにすると良いです。
例えば；
html
1<input type='hidden' name='code' value='{{$result->code}}'> 2<input type="button" value="編集" class="btn btn-primary btn-xs editmodal" data-code="{{$result->code}}"> 3<div class="modal fade" id="sampleModal_{{$result->code}}">
としておいてjsで受け取る
js
1$('.editmodal').click(function(){ 2 var code = $(this).data('code'); 3 4// 中略 5 6 7 $('#sampleModal_'+code ).modal(); 8
また、hiddenでcodeを埋め込んでいますが、name=codeも大量に埋め込まれているため、
特定ができません。
私が提示したコードのようにボタンに埋め込んでしまうか、idを指定してidより取得するようにしないとcodeが1つ目のものしか渡らないのではと思います。
投稿2018/05/08 08:18
編集2018/05/08 08:26総合スコア80850
回答ありがとうございます！！
正しくデータ取得することができました。
data属性の使い方がよくわかっていなかったのでとても参考になりました。
しかし、モーダル内で紐づいたデータ(Ajaxで取得したデータ)を表示するとき
に一番上の行のときしかappendされないです。。。
今コードどうなってますか？
私の回答に後半追記した懸念点が関係してそうに思いますが
今の状態に修正いたしました。
ajaxに渡したいデータが二つあるので上記のようにしました。
よろしくお願いいたします。
$('#sample_point tbody').append～とやればappendされました！
ですが、モーダル内で3行のものが6行に、4行のものが8行分になってしまいました。
モーダルを書く場所がおかしいのでしょうか？
あまり関係ないように思いますが、successの中の方が実態に沿っているのかなと。
append前のremoveは正常に想定通りの動作をしているんですよね？
すみません。appendを$('tbody #point')とすればできました！
ありがとうございました。
解決できたようで何よりです。
あなたの回答
tips
プレビュー
