Ajax Search with pagination [Laravel]

Question

I've read both https://gist.github.com/tobysteward/6163902 & AJAX pagination with Laravel but it seems I have a different problem so anyway.

Long story short: When I search, the right data gets fetched and the ajax works "display data, no refresh" only for the first page, but from next page on the page refreshes, so how to make an ajax call that loop through the returned data and display it according to each page?

Also how to add the search query to the URL, currently when the data gets fetched, the URL doesn't update, instead it stays on its current state (i.e. index?page=3).

search form

{{ Form::open(['route' => 'search', 'method' => 'GET', 'id' => 's-form',])}}
    {{ Form::text('search', null, ['id' => 'search', 'placeholder' => 'Search For ...']) }}
    {{ Form::submit(Go) }}
{{ Form::close() }}

search controller

public function search() {

    $input = Input::get('search');
    $posts = Post::where('title','LIKE',$input)->paginate(4);

    if (Request::ajax()) {
        return View::make('posts.search')->withPosts($posts);
    }
    return View::make('posts.index')->withPosts($posts);
}

search view

@forelse ($posts as $post)
        // do stuff
@endforeach
<nav>{{ $posts->appends(Request::except('page'))->links() }}</nav>

the js

$('#s-form').submit(function(e)
{
    e.preventDefault();
    $.ajax({
        url: $(this).attr('action'),
        data:{
            search: $('#search').val()
        },
        success: function(data){
            $('#result').html(data);
        }
    });
});

you are not passing the page parameter anywhere within JavaScript, how is this supposed to work? pagination needs the right parameter, also you do not have any click handlers to handle the pagination via javascript — pfried, Jan 16 '15 at 06:59
yeah i know ,but how exactly to do that ? thats what am actually asking for. — ctf0, Jan 16 '15 at 07:00
try adding a page parameter within the data section of the ajax request, simply hardcode a number for the moment like data : { search : $('#search').val(), page : '2' } — pfried, Jan 16 '15 at 07:03
you have to get that parameter dynamically from the page with a click handler. I cannot tell since i cant see the output html here. Attach a handler to the pagination buttons, get the number if i click on it and add it to data. This should solve it. — pfried, Jan 16 '15 at 07:14

score 2 · Accepted Answer · edited Mar 01 '17 at 22:49

2

This is all it needed:

$(document).ajaxComplete(function() {
    $('.pagination li a').click(function(e) {
        e.preventDefault();
        var url = $(this).attr('href');
        $.ajax({
            url: url,
            success: function(data) {
                $('#result').html(data);
            }
        });
    });
});

Now I just need to update the URL according to each page.

edited Mar 01 '17 at 22:49

Generic Bot

309
1
4
8

answered Jan 16 '15 at 09:10

ctf0

6,991
5
37
46

You can use the JavaScript history api for that. Please see http://stackoverflow.com/questions/824349/modify-the-url-without-reloading-the-page as an example. As you do not reload the page you have to do it with Javascript – pfried Jan 17 '15 at 08:40

Ajax Search with pagination [Laravel]

1 Answers1