LaravelのAjaxを使用してテーブルにレコードを取得します

Question

私はこのコードを参考にしてください。私は、異なる種類のアカウントを表示するドロップダウンリストを持っています。ドロップダウンから変更イベントのアカウントに属するトランザクションを表示できるようにしたい。私はこれを行うには、伝統的なPHPとajaxを使用しています。しかし、私はちょうどlaravelのフレームワークを勉強していると私は固執しています。私は見て、私がそれを見逃すか、この偉業を達成するためのより良い方法を参照してください助けてください。

参照ビュー：フォームのためのコントローラ

public function postForm(Request $request) 
    { 
     $data = Accounttrans::where('accounts_code',$request->selectedid)->get(); 
     return response()->json($data); 
    } 

ルートの

<form role="form"> 
<div class="col-md-8"> 
<select name="grpid" class="form-control" id="grpid"> 
    @foreach($account as $account) 
    <option value="{{$account->code}}">{{$account->accountName}}</option> 
    @endforeach 
</select></div><div class="col-md-4"> 
<button type="button" name="sbt" class="sbt btn btn-block btn-success" id="sbt">Retrieve</button></div> 
</form> 
    </div> 
    <br/> 
    <br/> 
    </h2> 
    <div id="tableview"></div> 
    </div> 
</div></div> 
@endsection 
<script src="/mat/js/newJquery.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$('#grpid').on("change",function(){ 
    var sid = $(this).val(); 
    var div = $(this).parent(); 
    var op =" "; 

    $.ajax({ 
    type:'post', 
    url: '/postForm', 
    data:{ 
     '_token':$('input[name=_token]').val(), 
     'selectedid': sid; 
     }, 
     success: function(data){ 
     op+='<table>'; 
     op+='<tr><th>SN</th><th>Date</th><th>Account Type</th><th>Narration</th><th>Amount</th></tr>'; 
     for(var i=0;i<data.length;i++){ 
      op+='<tr>'; 
      op+='<td>'+i+'<td><tr>'; 
      op+='<tr><td>'+data[i].transdate+'</td></tr>'; 
      op+='<tr><td>'+data[i].acctype+'</td></tr>'; 
      op+='<tr><td>'+data[i].accounts_code+'</td></tr>'; 
      op+='<tr><td>'+data[i].narration+'</td></tr>'; 
      op+='<tr><td>'+data[i].amount+'</td></tr>'; 
      op+='</tr>'; 
     } 
     op+='</table>'; 
     div.find('#tableview').append(op); 
     }, 
     error: function(){ 
      console.log("Error Occurred"); 
     } 
    }); 

}); 

}); 

参照postForm方法：

Route::get('/openform','AccounttransController@openform'); 
Route::post('/postForm','AccounttransController@postForm'); 

親切に助け。結果を表形式で表示したい。

Answer 1

<form role="form"> 
    {{csrf_field()}} 
<div class="col-md-8"> 
<select name="grpid" class="form-control" id="grpid"> 
    @foreach($account as $account) 
    <option value="{{$account->code}}">{{$account->accountName}}</option> 
    @endforeach 
</select></div><div class="col-md-4"> 
<button type="button" name="sbt" class="sbt btn btn-block btn-success" id="sbt">Retrieve</button></div> 
</form> 
    </div> 
    <br/> 
    <br/> 
    </h2> 
    <div id="tableview"></div> 

</div> 

</div></div> 
@endsection 
<script src="/mat/js/newJquery.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$('#grpid').on("change",function(){ 
    //var sid = $('#grpid option:selected').val(); 
    var sid = $(this).val(); 
    //var div = $(this).parent(); 
    var op =""; 
    console.log(sid); 
    //var table = '<table>'; 

    $.ajax({ 
    type:'post', 
    url: '/postForm', 
    data:{ 
     '_token':$('input[name=_token]').val(), 
     //'selectedid':sid 
     'selectedid': sid//$('select[name =grpid]').val(), 
     }, 
     success: function(data2){ 
     op+='<table class="table table-striped">'; 
     op+='<tr><th>SN</th><th>Date</th><th>Account Type</th><th>Account Code</th><th>Narration</th><th>Amount</th></tr>'; 
     for(var i=0;i<data2.length;i++){ 
      op+='<tr>'; 
      op+='<td>'+(i+1)+'</td><td>'+data2[i].transdate+'</td><td>'+data2[i].acctype+'</td><td>'+data2[i].accounts_code+'</td><td>'+data2[i].narration+'</td><td>'+data2[i].amount+'</td></tr>'; 
     } 
     op+='</table>'; 
     $('#tableview').html(op); 
     //console.log("Data Correctly Processed"); 
      console.log(data2); 
     }, 
     error: function(){ 
      console.log("Error Occurred"); 
     } 
    }); 

}); 

}); 


</script> 

Answer 2

'#grpid'すなわち 'col-md-8'の親をフェッチして 'var div'に格納しています。あなたのajaxの成功関数では、#tableviewを探しています。しかし、htmlから、 '#tableview'は 'col-md-8'の内部にない、つまり '#grpid'の親であることがわかります。だから、あなたは「COL-MD-8」の内側に「#tableview」を取るか、またはあなたは、単に次のように使用することができ、次のいずれか

$('#tableview').append(op);