Ajax in Laravel

Question

I'm trying to use Ajax in Laravel to have search results populate the "search_results_div" div without having to leave the page.

Right now I'm getting this error message: "Column not found: 1054 Unknown column '' in 'where clause' (SQL: select * from orders where `` LIKE %%)".

So it looks like orders is getting sent but nothing else is. This is my first time with Ajax so while the code is not working I don't understand where I'm going wrong, so any help or pointers would be very much appreciated! Thanks!

The search_column and search_input are added to the form via JS after search_table has an input. I have hard-coded what this will look like for simplicity's sake and have also tried the code after hard-coding the inputs in and received the same error message. All the same I thought I'd point this out as well.

Here is my View:

 <div class="large-6 columns">
{{Form::open( array('route' => 'search', 'method' => 'post', 'id' => 'search_form'))}}      

    {{ Form::select('search_table',
    array(
            'select'        => 'Search...',
            'orders'        => 'Search orders',
        ), null, array('id' => 'search_table')) }}

<div class="search_box" id="search_column_div">
    <select id='search_column'>
    <option value='created_at'>by date created</option>     
</select>
</div>

<div id="search_input_div">
    <input id='search_input' class='search_input' placeholder='Enter Order Name'/>
</div>

{{ Form::submit('Search', array('id' => 'search_button','class' => 'button expand radius search_button no_display'))}}
    {{ Form::close() }}
</div>

      <div id="search_results_div">
      </div>
</div>

My JS (My guess is here is where the problem is):

 /*AJAX Search*/
$('#search_form').click(runSearch);

var runSearch = function(e){
    e.preventDefault();
        $('form#search_form').submit(function(){
            $.ajax(
                {
                url: '/search',
                type: 'post',
                cache: false,
                dataType: 'json',
                search_table: $('#search_table').val(),
                success: function(data){
                    console.log("Success!");
                    $('#search_results_div').htlm('Yes');
                },
                error: function(xhr, textStatus, thrownError){
                    alert('Somethin went wrong');
                }
            });
        });
};

And my Controller:

public function searchPost(){
$search_table   = Input::get('search_table');
$search_column  = Input::get('search_column');
$search_input   = Input::get('search_input');

$search = DB::table($search_table)->where($search_column, 'LIKE', "%{$search_input}%")->get();
return $search;

}

And my Route:

/*Search Page for Ajax*/
    Route::post('/search', array(
        'as'    => 'search',
        'uses'  => 'HomeController@searchPost'
    ));

Thanks again for any input or advice!

Answer 1

Your form's select doesn't have a search_column name attribute, which is the name that Laravel uses to identify the field when using Input::get().

Use something like this :

<select id="whatever" name="search_column">

As for the Javascript, try this code :

$('#search_form').click(runSearch);

var runSearch = function(e){
    e.preventDefault();
    $('form#search_form').submit(function(){
        $.ajax({
            url: '/search',
            type: 'post',
            cache: false,
            data: $('#search_form').serialize(),
            success: function(data){
                console.log("Success!");
                $('#search_results_div').html(data);
            },
            error: function(xhr, textStatus, thrownError){
                alert('Somethin went wrong');
            }
        });
    });
};

First you don't need to post it in JSON format, the default URL-encoded format is more than enough and works just fine with Laravel's Input::get("variable") (I'm not even sure if it actually accepts JSON at all).

Next, the actual data wasn't present in your code, so your request was empty and obviously Laravel wasn't happy because all three input variables were empty and the DB query was failing (by the way, you should use validation to check if the input is present and if not return a nice & clean error message instead of failing completely).

The data variable is set to serialize() your form, it "converts" your form into an URL-encoded query string.

Finally the success function sets the HTML content of search_results_div to the data returned by Laravel (you should return a view there, currently you just return JSON).

I suggest you also look at some of these questions, they may contain code that you can fix using the answers provided and then reuse :

• follow and unfollow using single button with jquery & ajax, by laravel controller
• Laravel 4 jquery Ajax Request
• How to use Ajax with jQuery in Laravel 4?
• Laravel 4, jQuery .ajax, No post input received
• Retrieve Values form Jquery Ajax Json in Laravel 4