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)
On Saturday, March 3, 2018 at 5:15:49 PM UTC+3, Gaël Princivalle wrote:
>
> Thanks a lot. Do you have an little example?
>
> Il 3 mar 2018 9:01 AM, "Val K" <[email protected] <javascript:>> 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.
>> 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.
>>
>> On Friday, March 2, 2018 at 4:36:28 PM UTC+3, Gaël Princivalle wrote:
>>>
>>> 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!
>>>
>> --
>> 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
>> [email protected] <javascript:>.
>> For more options, visit https://groups.google.com/d/optout.
>>
>
--
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 the Google Groups
"web2py-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
For more options, visit https://groups.google.com/d/optout.
