Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
Slider fill disappears on pagehide #3887
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:
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: http://bradorego.com/jqmPrototype/index.html
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.
I update your test page so it loads latest code: http://jsfiddle.net/ZsKgD/
Regarding internal (multi-page template), external (single page) and the pageinit event; it all depends whether the page has been removed from the DOM.
Can you please report back if you still see an issue with the slider? Thanks!
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: http://jsbin.com/ohesof/
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.