Select menu refresh() does not refresh popup title #5275

Closed
mrextreme opened this Issue Nov 13, 2012 · 9 comments

Projects

None yet

3 participants

@mrextreme

I am internationalising my app with i18next, and I just noticed this issue. I have a select menu with a list of languages, currently only having two entries. The 0th element is a data-placeholder item. When I click/tap on a language, then a tiny piece of JS code runs, initilaises i18next with the selected language and refreshes the current select menu. All the list items are properly updated, but the placeholder remains the same.

Here is a test code showing the problem: http://jsbin.com/uzaret/480/edit

If you inspect the output then you can see the JS code is correct and properly updates the options in the select menu, but .selectmenu( 'refresh' ) does not refreshes the title H1 tag. So the refresh does not process the 'data-placeholder' option. Plus the selectmenu widget does not create a unique div with a unique id, so I cannot use an easy and simple jQuery .html() command to update the text within the H1 tag to my liking.

$( 'div#page-options div.ui-popup-container div.ui-selectmenu div.ui-header h1.ui-title' ).html( $.t( 'language' ) );

@mrextreme

Note: Firefox 16.0.2 on Ubuntu 12.04 cannot run the test, execution dies with "NS_ERROR_FAILURE: Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMHistory.replaceState]". Chromium runs it properly. That might be a jsbin.com issue though.

@jaspermdegroot
Member

This is a bug, because in this case (text of the first item in the list has been changed) the framework forces a rebuild and the placeholder/header should be updated as well. Even when forcing a rebuild with .selectmenu( "refresh", true ); this doesn't work.

@mrextreme - Here is a simple workaround: http://jsbin.com/uzaret/486

I used .ui-selectmenu to select the popup selectmenu. We should look into adding the id of the select element with a prefix/suffix so you can target a specific selectmenu. See also my comment here #5254.

cc: @gabrielschulhof

@mrextreme

Won't your workaround overwrite every ".ui-selectmenu .ui-title"? ( Unless there is always only one in a whole mobile site, regardless of the number of pages and select menus. )

@jaspermdegroot
Member

@mrextreme - Yes, so that's why I said that we need to add the id to the selectmenu which you could use as selector.

@mrextreme

In I just noticed an other issue while working on this feature. Maybe it should be a new bug, I don't know.

The top corners of the ul-li list inside the list div are rounded, the bottom corners are not.

http://imageshack.us/photo/my-images/208/device20121113141020.png/

In the JSbin example all the inner corners are corners, not rounded.

@jaspermdegroot
Member

@mrextreme

I already fixed that in latest code. That's why you don't see it in the JS Bin.
Here you see the change I made: 809cd55
You can add that line to your custom CSS to solve it in 1.2.

@mrextreme

In the meanwhile I also fixed it for myself. ( Well, you removed the rounded corners, I added them to don't mix up rounded corners in the outside and pointy corners in the inside. )

#language-menu .ui-li-last
{
-moz-border-radius-bottomleft: 0.6em;
-webkit-border-bottom-left-radius: 0.6em;
border-bottom-left-radius: 0.6em;
-moz-border-radius-bottomright: 0.6em;
-webkit-border-bottom-right-radius: 0.6em;
border-bottom-right-radius: 0.6em;
}

Luckily the last li contains the ".ui-li-last" class, so it was easy to address it. But thank you very much for the quick response!

@mrextreme

The issue of the missing id comes from line 6531

myId = this.element.attr( "id" ),

which === undefined, so the if statement at line 6552 is always false, so no id attribute is added to the divs.

@mrextreme

Change line 8237 to this

javascript
listbox = $( "

", { "class": "ui-selectmenu", "id": selectID + "-container-div" } ).insertAfter( widget.select ).popup( { theme: "a" } ),


this will give a proper id to the select div, and also add a line after 8251

``` javascript
"id": selectID + "-selectmenu-title"

that will give a proper id to the selectmenu's H1 title.

@gabrielschulhof gabrielschulhof added a commit that referenced this issue Nov 28, 2012
@gabrielschulhof gabrielschulhof Custom select unit tests: Add test for #5275 fix (placeholder is upda…
…ted during refresh( true ))
a56235b
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment