Skip to content
This repository

Slider fill disappears on pagehide #3887

Closed
borego opened this Issue March 23, 2012 · 9 comments

4 participants

Brad Orego Jasper de Groot Anne-Gaelle Colom Todd Parker
Brad Orego

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
Cry

Behavior can be seen here:
http://jsfiddle.net/borego/NapYM/

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
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.
Cry.

Platforms:
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).

Brad Orego

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

Todd Parker

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

Brad Orego

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.

Jasper de Groot
Owner
uGoMobi commented May 25, 2012

@borego

I update your test page so it loads latest code: http://jsfiddle.net/ZsKgD/
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!

Jasper de Groot uGoMobi closed this June 17, 2012
Jasper de Groot
Owner

@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.

Anne-Gaelle Colom
Collaborator

@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

Anne-Gaelle Colom agcolom reopened this June 17, 2012
Anne-Gaelle Colom
Collaborator

The above was tested on FF13 using @uGoMobi 's jsfiddle: http://jsfiddle.net/ZsKgD/

Anne-Gaelle Colom
Collaborator

@uGoMobi and myself have updated the code to ensure unique ids are used: http://jsfiddle.net/agcolom/ZsKgD/4/
The problem is still present.

Jasper de Groot
Owner

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.

Jasper de Groot uGoMobi closed this in 29e865c June 20, 2012
Elliot Smith townxelliot referenced this issue from a commit July 30, 2012
Commit has since been removed from the repository and is no longer available.
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.