New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

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

Comments

Projects
None yet
3 participants
@mrextreme

mrextreme commented Nov 13, 2012

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

This comment has been minimized.

Show comment
Hide comment
@mrextreme

mrextreme Nov 13, 2012

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.

mrextreme commented Nov 13, 2012

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

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Nov 13, 2012

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

Member

jaspermdegroot commented Nov 13, 2012

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

This comment has been minimized.

Show comment
Hide comment
@mrextreme

mrextreme Nov 13, 2012

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 commented Nov 13, 2012

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

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Nov 13, 2012

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.

Member

jaspermdegroot commented Nov 13, 2012

@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

This comment has been minimized.

Show comment
Hide comment
@mrextreme

mrextreme Nov 13, 2012

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.

mrextreme commented Nov 13, 2012

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

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Nov 13, 2012

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.

Member

jaspermdegroot commented Nov 13, 2012

@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

This comment has been minimized.

Show comment
Hide comment
@mrextreme

mrextreme Nov 13, 2012

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 commented Nov 13, 2012

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

This comment has been minimized.

Show comment
Hide comment
@mrextreme

mrextreme Nov 14, 2012

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 commented Nov 14, 2012

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

This comment has been minimized.

Show comment
Hide comment
@mrextreme

mrextreme Nov 14, 2012

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.

mrextreme commented Nov 14, 2012

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment