CODEWITHSUNDEEP
ajaxlaravelpagination
ctf0
ctf0

Reputation: 7579

Ajax Search with pagination [Laravel]

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

Upvotes: 1

Views: 8634

Answers (1)

ctf0
ctf0

Reputation: 7579

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.

Upvotes: 2

Related Questions