version 1.3.0 checkboxes are not displayed when id has '[' character - selectors not escaped properly #6052

Closed
dev-blanked opened this Issue May 29, 2013 · 10 comments

Comments

Projects
None yet
5 participants
@dev-blanked

Using jQuery mobile 1.3.0 checkboxes are not displayed properly when the id of the check box contains '[' character. This worked perfectly well with 1.2.0 version.

Please take a look at http://jsfiddle.net/rZDWF/2/

Here is the JS Bin stuff http://jsbin.com/onipem/2/edit

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot May 29, 2013

Member

@dev-blanked

This is a 1.2.0 test page: http://jsbin.com/ayumal/8/edit. It doesn't throw an error but the checkbox isn't enhanced either. The reason you get an error with 1.3.0 has not to do with changes in jQuery Mobile, but the different jQuery core version you are using (the error is only with core >= 1.8.x).

I guess we would have to look for square brackets, dots and colons in ID's and escape them with double backslash to prevent this problem.

Member

jaspermdegroot commented May 29, 2013

@dev-blanked

This is a 1.2.0 test page: http://jsbin.com/ayumal/8/edit. It doesn't throw an error but the checkbox isn't enhanced either. The reason you get an error with 1.3.0 has not to do with changes in jQuery Mobile, but the different jQuery core version you are using (the error is only with core >= 1.8.x).

I guess we would have to look for square brackets, dots and colons in ID's and escape them with double backslash to prevent this problem.

@dev-blanked

This comment has been minimized.

Show comment
Hide comment
@dev-blanked

dev-blanked May 30, 2013

Is it possible to use jQuery mobile 1.3.0 with jQuery core < 1.8 ? or does this mean I simply can't use jQuery mobile 1.3.0 because of this issue ?

Is it possible to use jQuery mobile 1.3.0 with jQuery core < 1.8 ? or does this mean I simply can't use jQuery mobile 1.3.0 because of this issue ?

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot May 30, 2013

Member

@dev-blanked

In my previous comment I said "It doesn't throw an error but the checkbox isn't enhanced either". I just noticed that was only because the ID of the label and input were not the same on your test page ("Q" missing).
You can use jQuery Mobile 1.3.x with jQuery core 1.7.2: http://jsbin.com/ayumal/12/edit

Now I know that it use to work I am not sure anymore if this is a jQuery Mobile issue or a bug in core's Sizzle selectors engine.

Member

jaspermdegroot commented May 30, 2013

@dev-blanked

In my previous comment I said "It doesn't throw an error but the checkbox isn't enhanced either". I just noticed that was only because the ID of the label and input were not the same on your test page ("Q" missing).
You can use jQuery Mobile 1.3.x with jQuery core 1.7.2: http://jsbin.com/ayumal/12/edit

Now I know that it use to work I am not sure anymore if this is a jQuery Mobile issue or a bug in core's Sizzle selectors engine.

@gibson042

This comment has been minimized.

Show comment
Hide comment
@gibson042

gibson042 May 31, 2013

Member

This issue stems from the unescaped input[0].id in checkboxradio.js.

Member

gibson042 commented May 31, 2013

This issue stems from the unescaped input[0].id in checkboxradio.js.

@dev-blanked

This comment has been minimized.

Show comment
Hide comment
@dev-blanked

dev-blanked Jun 5, 2013

jQuery core thinks this is not a bug in the core. Please refer http://bugs.jquery.com/ticket/13968

Are you guys planning to fix jQuery mobile ?

jQuery core thinks this is not a bug in the core. Please refer http://bugs.jquery.com/ticket/13968

Are you guys planning to fix jQuery mobile ?

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Jun 5, 2013

Member

@dev-blanked - Yes.

@gibson042 - Thanks for the pointer!

Member

jaspermdegroot commented Jun 5, 2013

@dev-blanked - Yes.

@gibson042 - Thanks for the pointer!

@dev-blanked

This comment has been minimized.

Show comment
Hide comment
@dev-blanked

dev-blanked Jun 5, 2013

@uGoMobi great!!!.

Also please note that the issue might not specific to checkboxes and might come up in other places also

@uGoMobi great!!!.

Also please note that the issue might not specific to checkboxes and might come up in other places also

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Jun 5, 2013

Member

@dev-blanked

Yeah, was thinking about that too. So far I couldn't think of a widget where we look for an ID except navigation (changePage). Not sure if the same issue can occur there.

cc: @johnbender

Member

jaspermdegroot commented Jun 5, 2013

@dev-blanked

Yeah, was thinking about that too. So far I couldn't think of a widget where we look for an ID except navigation (changePage). Not sure if the same issue can occur there.

cc: @johnbender

@dmethvin

This comment has been minimized.

Show comment
Hide comment
@dmethvin

dmethvin Jun 5, 2013

Member

@dev-blanked the continuing discussion here is pretty clear that the bug is in Mobile so I am not sure why you just posted in the core bug tracker. @gibson042 points out the line in checkboxradio.js where the problem lies due to the unescaped id in .filter( "[for='" + input[0].id + "']" ). That string either needs to be escaped like the fiddle shows, or it could be changed to a filter function doing a similar operation (checking the label's for attribute against the element's id attribute).

Member

dmethvin commented Jun 5, 2013

@dev-blanked the continuing discussion here is pretty clear that the bug is in Mobile so I am not sure why you just posted in the core bug tracker. @gibson042 points out the line in checkboxradio.js where the problem lies due to the unescaped id in .filter( "[for='" + input[0].id + "']" ). That string either needs to be escaped like the fiddle shows, or it could be changed to a filter function doing a similar operation (checking the label's for attribute against the element's id attribute).

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Jun 5, 2013

Member

I think I caused the confusion with my second comment, sorry. I already thought we have to fix this in jQuery Mobile by escaping brackets (see my first comment). It was only because the error doesn't occur with core < 1.8 that I was in doubt for a moment.

Member

jaspermdegroot commented Jun 5, 2013

I think I caused the confusion with my second comment, sorry. I already thought we have to fix this in jQuery Mobile by escaping brackets (see my first comment). It was only because the error doesn't occur with core < 1.8 that I was in doubt for a moment.

@ghost ghost assigned gabrielschulhof Aug 13, 2013

gabrielschulhof added a commit that referenced this issue Aug 13, 2013

Unit tests: Checkboxradio: Make sure that checkboxradio widgets based…
… on checkboxes with IDs containing weird characters are enhanced correctly. Re: #6052.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment