jQuery Forum

You'll probably need to post code to get better assistance.  Your comment about putting both pages inside of the same data-role="page" div doesn't make sense, and is probably the source of your issues.  jQM looks for "pages" by looking at the id's for each data-role=page, and then handling the transition between different div's with data-role=page.  If they're both in the same div, then it can't do any transition because it only recognizes the one page.  The URL you call is mostly irrelevant, and using different URLs for the same page id is going to give you odd results.

Net result, you should have something like this in your HTML:

1. <div data-role="page" id="page1" data-title="Page 1">
   <div data-role="content">   
    <!-- your content for page 1 here -->
   </div>
   </div>
2. <div data-role="page" id="page2" data-title="Page 2">
   <div data-role="content">   
    <!-- your content for page 2 here -->
   </div>
   </div>

As you transition back and forth, jQM will show and hide each page.

Hi drmike01

Ya, that's a lot of code....  :)

Hmm, this is a tough one, and I have a hard time following the code. You may have to lace the thing with debugging stuff to try and figure out exactly what is and isn't happening, and spend some time in Firebug watching what gets called, what gets cached in the DOM, what it's doing for transitions, etc.

The one thing I think is causing it, though, is that calling the page by different URLs is asking jQM to pull in a new page with different content, but with the same ID as an existing page.  Then jQM gets confused because it can't effectively transition from one page to another in its cache because IDs are not unique. jQM doesn't look at pages the way a normal web browser does; instead it pulls in the page div from a URL, and subsequently moves to that page based on its ID.  If someplace else in the site has the same URL, it knows that that URL maps to a specific ID, and rather than going to that URL to get the page again it just switches to the ID.  With non-unique IDs, though, the behavior would not be what you expect.

My thinking is that you'd either have to have different URLs and different IDs, or the same URL and the same ID.  In the first case, your cache would fill up with similar pages, but you'd get the refresh you're looking for.  Also, you may have to do this (I can't tell if the different URLs are actually parameters with meaning, or just random strings to create a new call).  In the second situation, which I think is what you're trying to go for, it would reload the page from the server but into the same "page" in jQM. If you actually need different content based on some parameter passed from the browser, then you'd need to use GET parameters or something else to handle this.

Hope this makes sense. Someone else the other day was having a number of issues with using handlebars (like mustache I think) to template pages, too.

hm

No problem, sorry couldn't be more help.

My recommendation, thinking about this more, is to open up Firebug (or your HTML debugging doodad of choice) and see what happens to the DOM as you move around on your jQM site.  If you're seeing multiple divs with the same ID showing up in the DOM, and it showing the wrong one occasionally, then the above is exactly what's happening.  If it's not doing that, then honestly I don't think you should be seeing any problems, but we know that's not the case so I'm guessing that's what you'll see.  You could probably solve this by just making the IDs unique (like setting the ID to be that big long content string, which, since it does have meaning and is attached to a specific piece of content, makes sense).

The other thing that I suppose is possible is that there is only one div in the DOM with that unique ID, and it's just not refreshing it appropriately.  You could then at least see what's going over the wire.

Lastly, as I think about your overall desire to use the same page in order to save time/bandwidth/etc., you may want to consider using AJAX to get back data from the server and manipulating the DOM in Javascript.  This is pretty typical for jQM sites, and easy to do with jQuery.

Here is what I can see in firebug:

Okay, so the problem you're having is that on subsequent pages, various event handlers don't work?  Are you sure that you have the relevant JavaScript for all pages located in the <head> of all of your pages (every page should have the same <script> tags in the <head>).  Sorry, but I think I may have gotten confused as to what your issue was and thought it was that pages weren't transitioning correctly.

That's exactly what I meant by the AJAX comment.  Basically using $.ajax command and then updating the DOM with Javascript.

hey, drmike01:

Great, glad to hear it!