Question

Please, i need assistance to this code. I have a dropdown list,showing different type of accounts. I want to be able to display transactions belonging to those accounts on change events from the dropdown. I am able to do this, using the traditional php and ajax. But i am just learning the laravel frameworks and i am stuck.Please help me look and see where i am missing it or a better way of achieving this feat.

See View:

<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");
        }
    });

 });

 });

See postForm method of the Controller

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

Route for the form:

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

Kindly help. I want to display the result in a table format.

Answer 1

您正在抓取＆＃39;＃grpid＆＃39;的父母。即＆＃39; col-md-8＆＃39;并将其存储在＆＃39; var div＆＃39;中。在你的ajax成功功能中，你试图找到＃tableview＆＃39;。但是从HTML中可以看出＃table;＆＃39;＃tableview＆＃39;不在里面＆＃39; col-md-8＆＃39;即是＆＃39;＃grpid＆＃39;的父母。所以，你要么采取＃tableview＆＃39;在里面＆＃39; col-md-8＆＃39;或者你可以简单地使用以下内容：

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

Answer 2

<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>

Retrieve records into table using Ajax in Laravel

2 个答案: