How to Load filtered data with Ajax, without reloading the whole page in laravel

Question

I have an application in which I have to filter data based on the item selected from the select box (See figure). Can I display data without form reload? I have included jquery.

![Select item from select box corresponding items are listed in table or div][1]

Route to initial page load.

public function listCampaign()
{        
    $list1s = List1::orderBy('id', 'desc')->get();
    $this->layout->title = "Listing Campaigns";
    $this->layout->main = View::make('dash')->nest('content', 'campaigns.list', compact('list1s'));
    $campaigns = Campaign::orderBy('id', 'desc')->where('user_id','=',Auth::user()->id)->paginate(10);
    Session::put('slist', $list1s);
    View::share('campaigns', $campaigns);

}

Here I share list1s and campaigns to the view (it is working properly).

My Blade is list.blade.php

   <h2 class="comment-listings">Campaign listings</h2><hr>
   <script data-require="jquery@2.1.1" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
    <th>Select a List:</th>

    <th>

       <form method="post">
        <select class="form-control input" name="list1s" id="list1s" onchange="postdata()" >
        <option selected disabled>Please select one option</option>
        @foreach($list1s as $list1)

            <option value="{{$list1->id}}">{{$list1->name}}</option>
        @endforeach
        </select>
         </form> 

        </th>
  </tr>
</thead>
</table>
<table>
<thead>

<tr>
    <th>Campaign title</th>        
    <th>Status</th>
    <th>Delete</th> 
 </tr>
  </thead>
 <div id="campaign">
 <tbody>
  @foreach($campaigns as $campaign)
 <tr>
    <td>{{{$campaign->template->title}}}</td>                
    <td>

        {{Form::open(['route'=>['campaign.update',$campaign->id]])}}
        {{Form::select('status',['yes'=>'Running','no'=>'Stoped'],$campaign->running,['style'=>'margin-bottom:0','onchange'=>'submit()'])}}
        {{Form::close()}}
    </td>
    <td>{{HTML::linkRoute('campaign.delete','Delete',$campaign->id)}}  </td>

</tr>
@endforeach

</tbody>
</div>
</table>


  <script>
   function postdata(data) {
       $.post("{{ URL::to('campaigns/get') }}", { input:data }, function(returned){
       $('.campaign').html(returned);
       });
    }   
   </script>
   {{$campaigns->links()}}

On select change, URL campaigns/get is invoked.

Route for the URL is given below

public function getCampaigns()
{

$list1 = Input::get('input');
$campaigns = Campaign::where('list1_id','=', $list1)->paginate(10);
return View::make('campaigns.list', compact('campaigns'));

}

Here POST ...//localhost/lemmeknw/public/campaigns/get is passed but no change comes on the view, it is showing 404 error in browser console.

Route::post('/campaigns/get', ['as' => 'campaign.get', 'uses' => 'CampaignController@getCampaigns']); 

This route is not working.

Am I completely wrong? Any solutions?

Answer 1

as what i read, you can access the collection of data directly from the method,

dd( json_decode( json_encode( Products::paginate(5) ), true) );

and access the array collection returned by the code.... here is the good example i found http://www.tagipuru.xyz/2016/05/17/displaying-data-using-laravel-pagination-in-the-html-table-without-page-reload/

Answer 2

I have Edited my code, and was successful.

Blade

<h2 class="comment-listings">Campaign listings</h2><hr>
<script data-require="jquery@2.1.1" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <thead>
    <tr>
        <th>Select a List:</th>
        
        <th>
           <select class="form-control input" name="list1s" id="list1s" onchange="displayVals(this.value)">
            <option selected disabled>Please select a list</option>
            @foreach($list1s as $list1)
                <option value="{{$list1->id}}">{{$list1->name}}</option>
            @endforeach
            </select>
           
            </th>
      </tr>
    </thead>
</table>
    <div id="campaign">
    
    </div> 
<script>
function displayVals(data)
{
    var val = data;
    $.ajax({
    type: "POST",
    url: "get",
    data: { id : val },
        success:function(campaigns)
        {
            $("#campaign").html(campaigns);
        }
    });
}
</script>

Route

Route::any('/campaigns/get', [
    'as' => '/campaigns/get', 
    'uses' => 'CampaignController@getCampaigns'
    ]);

Controller

public function getCampaigns()
{
$list1 = Input::get('id');
$campaigns = Campaign::orderBy('id', 'desc')
->where('list1_id','=', $list1)
->where('user_id','=',Auth::user()->id)
->paginate(10);
return View::make('campaigns.ajaxShow')->with('campaigns', $campaigns);
}

I have a separate blade now (ajaxShow) to load when option changed in select box.

<table>
    <thead>
    <tr>
        <th>Campaign title</th>        
        <th>Status</th>
        <th>Delete</th> 
    </tr>
    </thead>
    <tbody>
@foreach($campaigns as $campaign)
    <tr>
        <td>{{{$campaign->template->title}}}</td>                
        <td>

            {{Form::open(['route'=>['campaign.update',$campaign->id]])}}
            {{Form::select('status',['yes'=>'Running','no'=>'Stoped'],$campaign->running,['style'=>'margin-bottom:0','onchange'=>'submit()'])}}
            {{Form::close()}}
        </td>
        <td>{{HTML::linkRoute('campaign.delete','Delete',$campaign->id)}}</td>
    </tr>
    @endforeach
</tbody>
</table>
{{$campaigns->links()}}

Answer 3

You Can use view make

return View::make('Your view Path')->with('campaigns', $campaigns);