jquery mobile changepage and refresh page

Question

I am new to web-development and have built a website consisting of:

• index.html
• graph.html
• myScript.js

The graph.html is building up the content due to given parameter, specified on what you do in the main page ( index.html ). After having a look here , I came up with this changePage call in my myScript.js when a button is clicked:

$.mobile.changePage('graph.html', { dataUrl: 'graph.html?ip='+id, data: { 'ip': id }, transition: "slide", changeHash: true, reloadPage : true} );

Thereby, id is just a String (eg: load-21 ) and I make an ajax-call with the help of the id . The resulting URL looks like this: http://192.168.131.11:18069/CoDEViewTest/#graph.html?ip=load-21

Now the first call works fine, but if I hit refresh (F5) when I am on the graph.html page, I automatically get back to the main page ( index.html ), but I still have the same URL ( http://192.168.131.11:18069/CoDEViewTest/#graph.html?ip=load-21 ). The behaviour I would like to have, is that the graph.html is reloaded. I found out that it works, if I call changePage like this:

$.mobile.changePage('graph.html?ip=' + id, { transition: "slide", changeHash: true, reloadPage : true} );

In this case,the URL is a bit different (note: there is no '#' in the URL ): http://192.168.131.11:18069/CoDEViewTest/graph.html?ip=load-21
And in this case, when refreshing the page, I stay on the graph.html .

Now my question is, what is the difference between these two calls? Also, from my first impression after googling, I think that the second call is not a good practise. Therefore, I would like to work with the first call, but I need to stay on graph.html when refreshing the page..

Thanks

Answer 1

To understand this you must look at a basis of how jQuery Mobile works.

It uses AJAX to load pages into the DOM . Only first page is fully loaded, that means it HEAD and BODY content is loaded into the DOM . Every subsequent HTML page will me mostly discarded, basically only div with data-role="page" will be loaded into the DOM . Even more only one data-role="page" div will be loaded, every other page div will be discarded like rest of the page.

It is a normal state if you think about it. We already have HEAD from initial HTML page, we don't need another one.

This said, when you send parameter from one HTML page to another you are basically sending it to your initial HTML page. Remember what I have told you, subsequent pages are discarded so in your case page graph.html don't exist, its content is assimilated to index.html . Basically what was one a page inside a graph.html is now page inside a index.html .

Lets go even further. You have forced page reload with reloadPage : true but from link point of view this is still index.html . If you take a look:

http://192.168.131.11:18069/CoDEViewTest/#graph.html?ip=load-21

There's a hash # between / and graph.html . And that hash is a problem here. This is not an error, it is simply how jQuery Mobile works. If you press F5 in this case you will invoke index.html refresh.

In your other case, a situation is a little bit different. This case is working correctly mainly because you are refreshing your page and parameters set after the graph.html are preventing jQuery Mobile from attaching page hash #. This call acts as a real page reload and final link looks like this:

http://192.168.131.11:18069/CoDEViewTest/graph.html?ip=load-21

Because # don't exist thus DOM is fully empty from jQuery Mobile content there's nothing here that can hijack loading logic thus graph.html will reload again into graph.html .

EDIT :

I should also note that there's nothing wrong with your second solution, while it is not advised to use it in some situations in your case it will work just fine. Just remember one thing always have a HEAD content, this will prevent reloading problems. But there's one main difference, sides are changed now. At this point grap.html is fully loaded into the DOM and when you transit back to index.html only its data-role="page" div will be loaded into the DOM . Basically only downside of your solution is that you can have only one data-role="page" per HTML file. Where in your first case index.html could have more then one page inside.