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' ) );
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.
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.
.selectmenu( "refresh", true );
@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.
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. )
@mrextreme - Yes, so that's why I said that we need to add the id to the selectmenu which you could use as selector.
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.
In the JSbin example all the inner corners are corners, not rounded.
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.
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. )
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!
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.
Change line 8237 to this
listbox = $( "
this will give a proper id to the select div, and also add a line after 8251
"id": selectID + "-selectmenu-title"
that will give a proper id to the selectmenu's H1 title.
Custom select: Update placeholder during _buildList(). Fixes #5275.
Custom select unit tests: Add test for #5275 fix (placeholder is upda…
…ted during refresh( true ))