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

Setting boolean HTML attributes does not seem to work in XHTML (Selectmenu) #7997

Closed
T18970237136 opened this Issue Mar 13, 2015 · 2 comments

Comments

Projects
None yet
2 participants
@T18970237136

Hi,

thank you for fixing the bugs when using jQuery Mobile in XHTML.

Unfortunately, I found another bug:

If you have a jQM page with a disabled Selectmenu (<select id="sel" disabled="disabled">) and want to enable it using $("#sel").selectmenu("enable"); then the Selectmenu appears to be enabled, but you cannot change the selected item.
This is not the case with an HTML page.

Please see the following Testcase: https://gist.github.com/T18970237136/9a83a9835570f81e4287

It contains a HTML and an XHTML page with the same contents. It has a disabled Selectmenu, a Button to enable the Selectmenu and a Text showing the current value of the disabled attribute of the <select> html element.

In the HTML page, it will show Attribute "disabled": disabled and after clicking the button it will show Attribute "disabled": undefined meaning the "disabled" attribute has been removed. This is OK.

In the XHTML page however, it will show Attribute "disabled": true and after clicking the button it shows Attribute "disabled": false. This means that after calling selectmenu("enable") the disabled attribute is still present, but with an strange value "false" (boolean HTML attribute should either be an empty string ("") or the same as their name, in this case, "disabled").

I found the following code in https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js at line 9983:

    _setDisabled: function( value ) {
        this.element.attr( "disabled", value );
        this.button.attr( "aria-disabled", value );
        return this._setOption( "disabled", value );
    },

Here it calls element.attr( "disabled", value ); where "value" is either true or false. I don't know why this works in HTML documents (the jQuery API documentation of attr() says that value has a type of String or Number (I have not checked what happens when setting a boolean value directly in the DOM)) but in XHTML documents it will set the string value "true" or "false" to the attribute.

Instead of calling

this.element.attr( "disabled", value );

the code should probably call something like

this.element.attr( "disabled", "disabled" );

to disable the element and

this.element.removeAttr( "disabled" );

to enable the element.

This probably applies also to other form elements, but I haven't checked it.

Thanks!

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Mar 13, 2015

Contributor

Actually, we shouldn't be setting the attribute at all, but rather the property, because the value of the attribute indicates what is to be done upon form reset.

Contributor

gabrielschulhof commented Mar 13, 2015

Actually, we shouldn't be setting the attribute at all, but rather the property, because the value of the attribute indicates what is to be done upon form reset.

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Mar 13, 2015

Contributor

Hmmm, OK, form reset does not seem to restore the enabled/disabled state of a control, so it's mostly just because it's a boolean property.

Contributor

gabrielschulhof commented Mar 13, 2015

Hmmm, OK, form reset does not seem to restore the enabled/disabled state of a control, so it's mostly just because it's a boolean property.

gabrielschulhof added a commit to gabrielschulhof/jquery-mobile that referenced this issue Mar 13, 2015

@gabrielschulhof gabrielschulhof added this to the 1.5.0 milestone Mar 13, 2015

@gabrielschulhof gabrielschulhof self-assigned this Mar 13, 2015

gabrielschulhof added a commit to gabrielschulhof/jquery-mobile that referenced this issue Mar 30, 2015

kakul added a commit to kakul/jquery-mobile that referenced this issue Apr 14, 2015

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