Skip to content

FIX issue when using selectmenu on an XHTML5 page with & in text/value's... #313

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.

Sign up for GitHub

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

Jump to bottom
Open
wants to merge 4 commits into
base: selectmenu
Choose a base branch
from
Open

FIX issue when using selectmenu on an XHTML5 page with & in text/value's... #313

wants to merge 4 commits into from

Conversation

LordVeovis
Copy link

I have submited a patch to make the plugin XHTML5 more compliant.

A sample select that crash the plugin in XHTML5 page (doctype & mime-type):

<select> <option value="foo&amp;bar">foo&amp;bar</option> </select>
@fnagel
Copy link
Owner

fnagel commented Sep 4, 2013

I'm not able to reproduce this. Would you please post a demo fiddle? See #61
@LordVeovis
Copy link
Author

You right, I should have tested the given sample...
You will find the live error here: http://sargeras.kveer.fr/select.xhtml

I add the format option to wrap text in a span.
PS: I forget to add x @ line 303 (  or   but not &#a0;)
@fnagel
Copy link
Owner

fnagel commented Sep 7, 2013

Problem is not related to HTML5 but to jQuery 1.10.2 / UI 1.10.3 which is currently not supported.

Please downgrade or try using #140

I will keep this fix in min when updating the jQuery / UI version.
@LordVeovis
Copy link
Author

I downgraded to jquery 1.8.3 and jquery-ui 1.9.1 but the bug is still present.
Below is the exact error with call stack of the sample http://sargeras.kveer.fr/select.xhtml with Chrome :

Uncaught SyntaxError: An invalid or illegal string was specified. jquery.js:6325 jQuery.extend.clean jquery.js:6325 jQuery.buildFragment jquery.js:6164 jQuery.fn.extend.domManip jquery.js:5974 jQuery.fn.extend.append jquery.js:5777 (anonymous function) jquery.js:5904 jQuery.extend.access jquery.js:814 jQuery.fn.extend.html jquery.js:5868 jQuery.extend.attr jquery.js:2285 jQuery.extend.access jquery.js:821 jQuery.extend.access jquery.js:795 jQuery.fn.extend.attr jquery.js:2005 jQuery.fn.jQuery.init jquery.js:133 jQuery jquery.js:44 $.widget._init jquery.ui.selectmenu.js:315 // note: my fix step in here (anonymous function) jquery-ui.js:419 $.Widget._createWidget jquery-ui.js:586 $.(anonymous function).(anonymous function) jquery-ui.js:383 (anonymous function) jquery-ui.js:528 jQuery.extend.each jquery.js:611 jQuery.fn.jQuery.each jquery.js:241 $.fn.(anonymous function) jquery-ui.js:523 (anonymous function) select.xhtml:31 fire jquery.js:974 self.fireWith jquery.js:1084 jQuery.extend.ready jquery.js:406 DOMContentLoaded
@fnagel
Copy link
Owner

fnagel commented Sep 7, 2013

Mhhh, I'm a little confused as your HMTL and JS works when used in the repo:

`<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Test select xhtml5</title> <link type="text/css" href="../../themes/base/jquery.ui.core.css" rel="stylesheet" /> <link type="text/css" href="../../themes/base/jquery.ui.theme.css" rel="stylesheet" /> <link type="text/css" href="../../themes/base/jquery.ui.selectmenu.css" rel="stylesheet" /> <script type="text/javascript" src="../../jquery-1.8.3.js"></script> <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script> <script type="text/javascript" src="../../ui/jquery.ui.selectmenu.js"></script> <script type="text/ecmascript">/*<![CDATA[*/ $(document).ready(function () { $('select').selectmenu({ format: function (text, opt) { //return '<span>' + $('<div class="someclass"></div>').text(text).text() + '</span>'; return '<span>' + text + '</span>'; } }); }); /*]]>*/</script> </head> <body> <select> <option>tagada</option> <option value="a value with &amp; symbol">a vaule with &amp; symbol</option> <option value="a second value with &#160;">a second value with &#160;</option> </select> </body> </html>
@LordVeovis
Copy link
Author

Can you test again http://sargeras.kveer.fr/select.xhtml ?
I also made a simlink http://sargeras.kveer.fr/select.html which behave differently, only because of the mime-type send by the server.
I add a tiny js to detect and show the used parser: xml or html.
An XHTML5 page is an HTML5 with application/xhtml+xml in the Content-Type header. This is the reason why I could not use jsfiddle. In this mode, the browsers are more respectful of standard.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug

2 participants

@LordVeovis @fnagel