Back button with an Ajax LOAD page

[Gaël Princivalle]

Hello.

I've made a product page with the Ajax LOAD system:
http://www.mompala.it/prodotti

The idea is giving the possibility to the user to browse these products without a page reload, and it works fine.

The problem is that browsing the products don't change the url.

I've made a script that changes the content depending of the url.
If the url has a category_id like http://www.mompala.it/prodotti?category_id=8 the load page will display the products of this category.
If the url has a product_id like http://www.mompala.it/prodotti?product_id=325 the load page will display this product.

The problem still the history.
The user must have the possibility to press the browser back button for displaying the last content.

Adding this script in the load page change the url in the browser url bar, new_link is a link with the category_id or product_id:
<script>
    history.pushState("", "", "{{=new_link}}");
</script>

Like that the back button change only the url bar content, not the page content.

For updating the page content I've added in the main page 'prodotti' this script:
<script type="text/javascript">
    window.addEventListener('popstate', function(event) {
      location.reload();
    });
</script>

And it works, but only for turning back to the last page.
In other words, if the user wanted to turn back in the history 2 pages in the past he can't.

Someones knows why?

Thanks!

[Val K]

Hi, I think when page is reloaded history.pushState happens too, so there is the same URL on the stack after page reloading.

If you want to manage routes by raw JS  It is simpler to use url#hash schema  and place  args (category_id=2 and so on) after #.  

In this case it's quite to listen hashchange event and perform ajax.load, no other tricks are required. 

[Gaël Princivalle]

Thanks a lot. Do you have an little example?

Il 3 mar 2018 9:01 AM, "Val K" <valq...@gmail.com> ha scritto:

Hi, I think when page is reloaded history.pushState happens too, so there are 2 identical URL on the stack after page reloading.

--
Resources:
- http://web2py.com
- http://web2py.com/book (Documentation)
- http://github.com/web2py/web2py (Source code)
- https://code.google.com/p/web2py/issues/list (Report Issues)
---
You received this message because you are subscribed to a topic in the Google Groups "web2py-users" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/web2py/yepkcmzlR1c/unsubscribe.
To unsubscribe from this group and all its topics, send an email to web2py+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Val K]

def router_example():

    

    if request.vars.category_id: # - ajax call

        return 'Category:%s content' % request.vars.category_id 

    

    js="""

    function ajax_route(){

        console.log(window.location.hash);

        var cat_id= window.location.hash.slice(1);

        if (cat_id){

            $.post('', $.param({category_id:cat_id})).then((d)=>$('#cat_content').html(d));};

    }

    $(document).ready(() => (window.addEventListener('hashchange', ajax_route),  ajax_route()));

    

    """

    ret=DIV()

    for cat_id in (1,2,3):

        ret.append(A('category_%s'%cat_id, _style='margin-right:10px;', _href='#%s' % cat_id))

    ret.append(DIV(_id='cat_content'))

    ret.append(SCRIPT(js, _type='text/javascript'))

    return dict(ret=ret)

To unsubscribe from this group and all its topics, send an email to web2py+un...@googlegroups.com.