GET parameters break DOM access

[nisc]

I've finally managed to isolate a very simple test case which demonstrates one of the issues related to GET parameter passing. In my case, the DOM somehow gets decoupled from what is shown in the browser.

See this very simple, two html-file example app (there is no server-side scripting involved. Only two static pages!):

http://mnstr.org/foo/page1.html
If you enter the page via this link, everything works fine (you can manipulate #somediv after going back to the first page).

Now use the following link:
http://mnstr.org/foo/page1.html?a

Page 2 has a link back to page1.html?b. As the the initial pageload of page1.html had a different GET parameter than that, stuff breaks.

Tested in current Chrome, Firefox 7, and iPhone and Android browsers.

PS: Related to #450

[johnbender]

@nisc,

"stuff breaks". Can you be more specific?

Keep in mind that jquery mobile has to treat pages loaded with different query params as different pages, and will load two of them into the page where dom caching is enabled.

[nisc]

Stuff breaks = You can no longer interact with the DOM. At least the view does not update. For example, calling $('#somediv').hide() won't have any effects.

As if you were interacting with some hidden copy of the page currently shown.

[andyl]

I also have this issue.

[MauriceG]

I recognized, if using the second link above, then click the button to go to page 2,
after clicking the button to go back to page 1 , the page-id "page1" is two times in the dom.

but, @johnbender, i use a dom-inspector-tool ....

[johnbender]

@nisc and @andyl

The two pages http://mnstr.org/foo/page1.html?a and http://mnstr.org/foo/page1.html?b, are different as far as JQM is concerned. They have to be different. We can't assume that they are the same page or have similar content.

What this means for your sample is that the original document (http://mnstr.org/foo/page1.html?a) contains a div#somediv that is duplicated in the content returned form the second link click (http://mnstr.org/foo/page1.html?b). To be clear, you now have two elements in the page with the id somediv. So when you try and select on $("#somediv") the browser may return the first or all depending on the implementation.

[nisc]

@johnbender

I understand the problem. But I think you agree that we need a solution?

This is stopping us from using JQM apps with query strings. Or am I missing something?

As a workaround, could I somehow force JQM to only keep the most recent copy in the DOM?

[nisc]

Or maybe I don't understand the problem. Why are there no problems if the initial pageload is without a query string? Even if I ajax-load page1.html?c and then page1.html?d and then page1.html?e and then ... after that.

[update] fixed typo
[update2] ignore this comment, it's bullshit. The problem still occurs.

[johnbender]

@nisc

There's nothing to be done if it's the first page (always retained though we want to address this post 1.0) or you use domCache=true anywhere that might duplicate id's. Otherwise the pages are reaped by default to prevent bloat and the problem won't affect you. Without knowing more about your use case I can't really suggest a solution, but it will start with not using id's on elements that are duplicated in the DOM by ajax requests to the same url, understanding that's now always easy.

[update] clarification

[andyl]

@johnbender - I agree with @nisc that a solution to this problem is important - if you want jQM to support dynamic sites.

I have built a prototype that uses links like <a href="#asdf" data-param="value">text</a>. It works - I can build a dynamic site this way.

But the pages are not bookmarkable, which is a fatal problem for my app.

[johnbender]

@andyl

As long as you treat the content of the page as repeatable in the DOM, selectors and the like will work fine.

[nisc]

@johnbender

Does your post explain #2784 (comment) ? If yes, I dont' get it :-)

[johnbender]

@nisc

There most certainly are two #somedivs in your page when going to the original, paramless, link and then going back to the page with ?b on the second click.

http://i.imgur.com/rPSYA.png

[nisc]

@johnbender

Sorry. You are absolutely right. I confused something there.

[andyl]

@johnbender - I'm not sure what you mean by "treating the contents of the page as repeatable in the DOM".

If you suggest to render all possible pages on the server, with each page having a unique 'data-url="#hash?key=value"' - that isn't going to work for me. Is that what you are suggesting??

[gseguin]

@andyl

"treating the contents of the page as repeatable in the DOM" means don't use ids.

Use classes to select your DOM nodes. You can use ".ui-page-active" as a search base to limit your search to the active page.

[johnbender]

@andyl

I'm suggesting that if you are going to re-use the same url with different query params where any of the requests to said url are the home page or you have domCaching turned on then you need to select on something other than an id. Even better in those cases don't use id's.

I'm not at all suggesting that every page has to worry about uniqueness, although you should certainly make sure that separate pages don't have overlapping id's in any case since they are being loaded into the DOM together.

[andyl]

@johnbender - thanks for your note. Can you point me to any apps or sample code that uses this technique??

[johnbender]

@andyl

No but you can certainly take gseguin's suggestion as a start and select using something like:

$.mobile.activePage.find( "some-selector-of-your-choosing" );

[nisc]

My current hack: On first page load, the server returns a dummy.html which does a $.mobile.changePage() to the actual page the user wants. Lol :-)

[nisc]

So is this WONTFIX or NOT-BEFORE 1.1 ?

[johnbender]

@nisc

We'll be looking at reaping the first page post 1.0, but we won't be addressing these as separate pages. On some level that should solve your problem.

[andyl]

So - after lots of discussion - it seems like jQM is unwilling or unable to support this feature. Unfortunately my app requires it, so I have to find some alternative to jQM.

My app uses backbone.js. Is there an an alternative mobile framework that provides progressive styling, swipe/tap/re-orientation events like jQM, but supports backbone and handles params as @nisc requests?

[nisc]

   // select items on active page
   (function($) {
       $.ap = function(selector) {
           return $.mobile.activePage.find(selector);
       }
   })(jQuery);

[itechnology]

What i don't understand is that if data-url is the godly id attribute, whats even the use of having id= or data-id= in the framework, since they do nothing to ensure uniqueness anyways ?