Using jquery Ajax in Laravel 4

Question

I am newbie to ajax jquery and trying to understand the code and trying to implement it. I would let you know what exactly i want to do and what i am doing.

I have a search box where i input the "sku" and i get the tables and the information of that particular sku.

I have this in my routes.php

Route::get('bestsellers', array('as'=>'bestsellers', 'uses' =>'SalesFlatOrderItemsController@index'));

In my controllers i have

class SalesFlatOrderItemsController extends \BaseController {
$sku_query = Input::get('sku');

        if($sku_query){
        $orders = SalesFlatOrder::join('sales_flat_order_item as i','sales_flat_order.entity_id','=','i.order_id')
                         ->select((array(DB::Raw('DATE(i.created_at) as days'), DB::Raw('sum(i.qty_ordered) AS qty_ordered'), DB::Raw('sum(i.row_total) AS row_total'),'i.item_id', 'i.name','i.sku')))
                         ->where('i.sku','=',$sku_query)
                         ->groupBy('i.sku')
                         ->orderBy('qty_ordered','Desc')
                         ->paginate(10);

    }

    return View::make('sales_flat_order_items.bestsellers')->with('orders', $orders);
}

And In bestsellers.blade.php , i have

<input type="text" id="sku" placeholder="Search the sku..." name="sku">
<input type="hidden" id="search_sku" name="search_sku" value="">

<button type="button" id="searchSubmit" class="btn btn-info">Search</button><div class="spin-area" id="spin-area">
 <thead>
       <tr class="odd gradeX"> 
        <th>Sku</th>
      <th>Product Name</th>
      <th>Items Ordered</th>
      <th>Total</th>

        </thead>

  @foreach ($orders as $item )

   <tr class="odd gradeX"> 
    <td><a href="{{ URL::action('SalesFlatOrderItemsController@performance', $item->sku) }}">{{ $item->sku  }}</a></td>
    <td>{{ $item->name }}</td>
    <td>{{ round( $item->qty_ordered,2) }}</td>
    <td>{{ round( $item->row_total,2) }}</td>
  </tr>
 @endforeach
</table>
</div>
</div>
</div>
</div>

This is for the input sku should be entered and ajax should help to get the information of sku on the same page. So ajax is as below

<script>
$(document).ready(function(){

    $('#searchSubmit').on('click',function(){
      var data ="sku="+$('#sku').val();

      $.ajax({
        type:"GET",
        data:data,
        url:"/bestsellers",
        dataType:"JSON",
        success:function(data){
          alert('success');
        }

      })
    });
  });

</script>

Can somebody let me know what is going wrong with my code, Before this i have used traditional way of post and get request, it works, but not ajax call.
Please help.
Thanks.

Answer 1

try this

$(document).on('click','#searchSubmit',function(){
    var data ="sku="+$('#sku').val();
    $.ajax({
        type:"GET",
        data:data,
        url:"{{URL::to('/bestsellers')}}",
        dataType:"JSON",
        success:function(data){
            alert('success');
            // data variable will have the data returned by the server. use it to show the response
        }
    })
});