I have some real time data I want to show on ever page in my site. I use the following code to update it every 5 seconds.
qdata.php just spits out a html table. The sidebar includes a div with id="qdata".
The code works almost all the time, except when I navigate to a page in a sub folder. If I visit that page directly, it works, but not if I navigate to it! I can see from the browser debugger however that no errors occur and the page is certainly called, just the div is no longer updated. Most weird. I guess it has something to do with the way jquery mobile loads pages.
I tried various .trigger, .page, etc. that I saw mentioned elsewhere, but cannot get it to work reliably. I also lose the formatting when updating.
The examples I looked at seem to indicate the above should work OK. Can anyone point me in the right direction?
Ah, sorry. I missunderstood. I tried it in lots of places! Currently as per below in the HEAD, which is where I found they appear to recommend it. I tried various versions of jquery mobile as well.
This can't possibly work, because you have duplicated an ID (qdata) on multiple pages.
HTML does not allow you to duplicate an ID within a document. You may only have one element with a given ID. jQuery Mobile loads multiple pages into the same document (at least the initial page, as well as the exiting and entering pages when you change pages) and so you must take care not to ever duplicate an ID within your entire site.
(That's more restrictive than necessary, but it would be difficult to to manage the actual requirement. You need to insure that no two pages with an element with the same ID can be in the document at the same time.)
The easiest way to achieve this is to simply forget that HTML has IDs. Don't use them.
If you do duplicate an ID, the browser doesn't know what to do with this. If you ask it to replace some element with a given ID, and there are two or three of them, which one should it change? Different browsers guess what you meant differently, and results will be inconsistent. If you ask the browser to find the element, which one should it find? (The underlying DOM function is getElementByID(). Notice that it isn't getElementsByID(). It returns a single element. Which one should it return?
It may just be changing the content on the wrong page. But this is browser-dependent.
Instead, use a class. You can then use $.mobile.activePage to distinguish which one you want.
jquery mobile loads multiple pages into one, so whilst I have not
duplicated within the document, jquery mobile is loading multiple
Not quite, but you've got the idea.
jQuery Mobile does not load multiple documents. It loads multiple pages within a single document. Yes, it loads a document externally, but then it strips-out the page portion of the document and throws the rest away. There is only one document in the browser. (And it is only possible to have one document in the browser.)
It can be very confusing, because HTML has no concept of "page". The "page" is an invention of jQuery mobile that has no meaning in HTML.