0

I am using pagination with ajax.

When i click on any page number url not changing because of ajax call

So when i click on page 3 and then click on page 7

i hit the back button it returns to page 1 because url never changing

Here is my code:

property_paging: function() {
        var handle = true;
        $('.paging-navigation', '.property-paging-wrap').each(function () {
            $('a', $(this)).off('click').on('click', function (event) {
                event.preventDefault();
                if(handle) {
                    handle = false;
                    var $this = $(this);
                    var href = $this.attr('href'),
                        data_paged = ERE.get_page_number_from_href(href),
                        data_contain = $this.closest('.property-paging-wrap'),
                        property_content = $this.closest('.ere-property').find('.property-content');
                    $.ajax({
                        url: data_contain.data('admin-url'),
                        data: {
                            action: 'ere_property_paging_ajax',
                            layout: data_contain.data('layout'),
                            items_amount: data_contain.data('items-amount'),
                            columns: data_contain.data('columns'),
                            image_size: data_contain.data('image-size'),
                            columns_gap: data_contain.data('columns-gap'),
                            view_all_link: data_contain.data('view-all-link'),
                            paged: data_paged,
                            property_type: data_contain.data('property-type'),
                            property_status: data_contain.data('property-status'),
                            property_feature: data_contain.data('property-feature'),
                            property_city: data_contain.data('property-city'),
                            property_state: data_contain.data('property-state'),
                            property_neighborhood: data_contain.data('property-neighborhood'),
                            property_label: data_contain.data('property-label'),
                            property_featured: data_contain.data('property-featured'),
                            author_id: data_contain.data('author-id'),
                            agent_id: data_contain.data('agent-id')
                        },
                        success: function (html) {
                            var $newElems = $('.property-item', html),
                                paging = $('.property-paging-wrap', html);

                            property_content.css('opacity', 0);

                            property_content.html($newElems);
                            ERE.set_item_effect($newElems, 'hide');
                            var contentTop = property_content.offset().top - 30;
                            $('html,body').animate({scrollTop: +contentTop + 'px'}, 500);
                            property_content.css('opacity', 1);
                            property_content.imagesLoaded(function () {
                                $newElems = $('.property-item', property_content);
                                ERE.set_item_effect($newElems, 'show');
                                property_content.closest('.ere-property').find('.property-paging-wrap').html(paging.html());
                                ERE.property_paging();
                                ERE.property_paging_control();
                                ERE.favorite();
                                ERE.tooltip();
                                ERE_Compare.register_event_compare();
                            });
                            handle = true;
                        },
                        error: function () {
                            handle = true;
                        }
                    });
                }
            })
        });
    },

the subject is a bit important. and my time is short. is there anyone who can help??

devo-zara
  • 21
  • 4
  • https://developer.mozilla.org/en-US/docs/Web/API/History/pushState – Tomalak Feb 12 '21 at 14:12
  • thank you for the answer. but how can I apply this to my own code? – devo-zara Feb 12 '21 at 17:55
  • You push a new URL to the browser history every time you expect that a new URL is supposed to be pushed. This way the back button starts to work because the history has changed - exactly what you've been asking about. – Tomalak Feb 12 '21 at 18:53
  • I asked this because it is not topics I know well. So I have to learn how to integrate it into my code. thanks anyway – devo-zara Feb 12 '21 at 19:06
  • Half of programming is experimentation. There are code samples on that link,but you have to try things out yourself. Use `pushState()` on a blank page, see what it does, get comfortable with it. Once you have a grip on how it works, you'll know where it's best to put it into your pagination code above. – Tomalak Feb 13 '21 at 08:31

0 Answers0