Skip to content
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

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

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
Reviewers
No reviews
Assignees
No one assigned
Labels
bug
Projects
None yet
Milestone
v1.5
Development

Successfully merging this pull request may close these issues.
2 participants
@LordVeovis @fnagel