jquery-ui
jquery-ui copied to clipboard
fnagel
FIX issue when using selectmenu on an XHTML5 page with & in text/value's...
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&bar">foo&bar</option>
</select>
I'm not able to reproduce this. Would you please post a demo fiddle? See #61
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;)
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.
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
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 & symbol">a vaule with & symbol</option>
<option value="a second value with  ">a second value with  </option>
</select>
</body>
</html>
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.