pagination breaks page loaded with ajax request

Question

I have a list with pagination loaded with ajax post so if I use the pagination links (to go further or back) it reloads the page to send the page number via get.

I'm looking for a way to send the same variables (from ajax post) with the pagination links but I'd like to keep the url with the get (?page=x). Is there any way to do this?

I wouldn't want to use global or session variables (not secure).

Any suggestion?

When I click search this is what triggers:

$('body').on('click', '.click, .pag_link', function() { // search button and change page

    if($(this).is('.click'))
        var url = '/search';
    else {
        if ($(this).text() == '«')
            var url = '/search?page=' + (parseInt($('.active').text()) - 1);
        else if ($(this).text() == '»')
            var url = '/search?page=' + (parseInt($('.active').text()) + 1);
        else
            var url = '/search?page=' + parseInt($(this).text());
    }

    if ($('#res_prop').is(':checked')) {
        var prop_type = $('#res_prop').val(),
            checkbox = '#res_prop';
    }
    else if ($('#com_prop').is(':checked')) {
        var prop_type = $('#com_prop').val(),
            checkbox = '#com_prop';
    }
    else {
        $('p.error').show();
        die();
    }

    $.ajax({
        method: 'POST',
        url: url,
        data: {
            'do': getUrlParameter('do'),
            'prop_type': prop_type,
            'city': $('select[name="city"]').val(),
            'zone': $('select[name="zone"]').val()
        }
    }).done(function(data) {
        var new_content = $(data).find('#search');
        $( "#search" ).html( new_content );
        alert(url);
        if ($(checkbox).length > 0)
            $(checkbox).prop('checked', true);
    });

    return false;
});

Ajax loads a list and and at the bottom the pagination, if I click next/a number then the page reloads to send the get parameter and the page starts again from the beginning (I have to click search again).

Sorry if it's "too broad", I don't know what more to say, is it not clear? I'll add some code. — Chazy Chaz, Nov 02 '15 at 17:17

DinoMyte · Accepted Answer · 2015-11-02T18:20:51.373

2

You may try something like this. This is just a pseudo code but should give you an idea on how to approach.

var page;

$("input:button, a").on("click",function()
{
   page = !$(this).is("input:button") ? "?page=" + parseInt($(this).text()) + "" : "";
   $.ajax({
        method: "POST",
        url: "/search" + page,
        data: {
            'do': getUrlParameter('do'),
            'prop_type': prop_type,
            'city': $('select[name="city"]').val(),
            'zone': $('select[name="zone"]').val()
        }
    }).done(function(data) {
        var new_content = $(data).find('#search');
        $( "#search" ).html( new_content ); // here's the list and the pagination links       
    }); 

});

Example : http://jsfiddle.net/kgxm1rrf/2/

edited Nov 02 '15 at 18:20

answered Nov 02 '15 at 17:49

DinoMyte

8,737
1
19
26

Thanks it's what I was looking for, but if It's going to be the same ajax for both buttons the url should not have parameters for the first button so I changed a few things: http://jsfiddle.net/kgxm1rrf/1/ For some reason it's not working, it does not load the data, and no error in console... – Chazy Chaz Nov 02 '15 at 18:11
Try this : http://jsfiddle.net/kgxm1rrf/2/ – DinoMyte Nov 02 '15 at 18:19
I removed the href from the `a` links because it was redirecting and the click function does not work with the class name... `$('.click, .pag_link').click(function()` the first named `.click` works, but the links are not working... `2`, they are inside an `ul`with `class="pagination"` but that's irrelevant i think. – Chazy Chaz Nov 02 '15 at 18:36
replace href="#" with href="javascript:void(0);" – DinoMyte Nov 02 '15 at 18:39
Nothing, maybe because the links are dynamics? I had a problem like this and had to change the jquery methods. I'm looking at this http://stackoverflow.com/a/24767578/4067132 – Chazy Chaz Nov 02 '15 at 18:51
It shouldn't matter as long as you're creating the links correctly. Something like this : http://jsfiddle.net/kgxm1rrf/3/ – DinoMyte Nov 02 '15 at 18:55
No, I generate the links with a php function. I tried this `$('body').on('click', '.click, .pag_link', function()` but nothing :( Ok found the problem, I'll update the question to add the code. – Chazy Chaz Nov 02 '15 at 19:00
The problem is when I print the `new_content` the checkbox is unchecked so I have to recheck it after `$( "#search" ).html( new_content );` – Chazy Chaz Nov 02 '15 at 19:07
`checkbox.prop('checked', true);` it's not working, you know why??? – Chazy Chaz Nov 02 '15 at 19:20
Check if (checkbox.length > 0) – DinoMyte Nov 02 '15 at 19:27
No luck :( Try yourself: http://inmomarco.tk/search?do=buy – Chazy Chaz Nov 02 '15 at 19:32
I don't see the underlying logic for making ajax call inside the page source. – DinoMyte Nov 02 '15 at 19:43
What do you mean? the ajax call is right here: http://static.inmomarco.tk/js/scripts.js – Chazy Chaz Nov 02 '15 at 19:45
the 'checkbox' variable is not declared globally, so it won't be visible inside the ajax. You need to declare it outside : var checkbox; $('body').on('click', '.click, .pag_link', function() { // search button and change page – DinoMyte Nov 02 '15 at 20:07
I'll try that, but I know why it wasn't working: `checkbox = $('#com_prop');` didn't work, made an alert and just saw "Object object" (or something like that). So I changed it to `checkbox = '#com_prop';` and `$(checkbox).prop('checked', true);` and now works. But when I click the page number it won't load the content... – Chazy Chaz Nov 02 '15 at 20:32
Maybe i should pass the `page` value in the ajax like the others... There's no difference at all... – Chazy Chaz Nov 02 '15 at 20:41
Gracias! I did that and at last it's working. – Chazy Chaz Nov 02 '15 at 20:58
Great. Glad to help. – DinoMyte Nov 02 '15 at 21:03

pagination breaks page loaded with ajax request

1 Answers1