Skip to content

Slider fill disappears on pagehide #3887

bradorego opened this Issue Mar 23, 2012 · 9 comments

4 participants


If you have multiple pages in one HTML document, and you have a slider on a page opened via dialog, after you load/close the dialog, the slider bar no longer displays.

Workflow to reproduce:
Click the link to open a dialog
Close the dialog
Click the link again to reopen the dialog
Notice the lack of slider bar

Behavior can be seen here:

This is not a problem when the page is stored in an external .html file (even though it is opened via dialog still). This can be seen here:
Workflow to (not) reproduce:
Pick a category (car, truck, SUV)
Pick an item (a vehicle)
See slider bar. Close dialog (either use X or accept)
Retrace steps until you reach confirmation dialog with slider again.
Notice it's still here.

Android 2.3 (Motorola Droid RAZR), Android 4.0 (Asus EeePad Transformer), Chrome 17, Opera 11, FireFox 9, IE 9 (somewhat - you have to go through two dialogs to get it to happen. It's fine on the first dialog).


I took a snapshot of the DOM before and after the slider bar disappears and diff'd them and there's no difference whatsoever T_T


Odd. I just tested both links in Chrome 18 and the slider seems ok there. Not sure what would cause this...


Not that I see how/why it would matter, but I've noticed that the page load/show events fire different for external files versus internal. With an external file, the pageinit fires every time the page is shown, whereas otherwise it only fires the first time (I have a script running to check if a user is logged in and redirect them to the login screen if not. With the internal version, I have it listening to pageshow, but with the AJAX version, I have it listening to pageinit).

I wouldn't be concerned about this, but it seemed pretty universal, especially on mobile devices (which tend to update a lot less frequently than desktop). Admittedly, I'll only be using jQM predominantly for the first version of the app, and then I'll start hand-rolling my own solutions, so it shouldn't be a huge problem - I'll just put that one page in its own .html and prefetch/cache it.

jQuery Foundation member


I update your test page so it loads latest code:
While testing several browsers I didn't see anything odd. The slider does not disappear. Maybe you can test it again on your devices.

Regarding internal (multi-page template), external (single page) and the pageinit event; it all depends whether the page has been removed from the DOM.
This won't happen with a internal page because it is in one file together with other pages, but does happen with external pages after you leave them (exceptions are the first-loaded page and data-dom-cache set to true).
So the next time you go to that page it will be created again which means pageinit will fire again.

Can you please report back if you still see an issue with the slider? Thanks!

jQuery Foundation member

@borego - Since there is no response I suppose the issue is fixed. I am going to close it, but if the issue is still there while using latest code you can comment here and we will reopen.

jQuery Foundation member
agcolom commented Jun 17, 2012

@borego @uGoMobi actually on FF I can see the slider hightlight disappear and the dialog cannot be closed if you follow these steps: got to 2, go to 1 slide the slider, go to 2, the highlight is gone and you can't close the dialog

@agcolom agcolom reopened this Jun 17, 2012
jQuery Foundation member
agcolom commented Jun 17, 2012

The above was tested on FF13 using @uGoMobi 's jsfiddle:

jQuery Foundation member
agcolom commented Jun 17, 2012

@uGoMobi and myself have updated the code to ensure unique ids are used:
The problem is still present.

jQuery Foundation member

I copied the code into JSBin because with JSFiddle you can't put the head in your html (the elements end up in the body; you have to create the head section with the side panel). JSBin test page:

Like @agcolom already said, we have updated the ID's so each slider/label set has its own ID. Another point is the data-rel="dialog" on the link back to page 2 (which is actually page 1, the first page loaded). That page is first loaded as regular page and remains in the DOM. If you then link back to it with data-rel="dialog" it will cause issues. I removed this from the link.

Then still an issue remains with the fill of the slider. This seems to be a bug. The fill is created by adding the ui-btn-active class. The framework removes that class on pagehide. That is only supposed to be done with buttons, so we have to create an exception for the slider.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.