0

when using special charactes like . or / in id's for a jQuery UI selectmenu I do get JS syntax errors when clicking on one of the options in the open menu. I know that in jQuery I would need to escape the special characters, but this code seems to be deep inside the lib itself. Not sure if I miss something before I report a bug so I would like to get hints!

I'm using jQueryUI version 1.11.1 with jquery 1.11.1 but tried other versions starting from 1.10 in this fiddle

<select name=".speed/" id=".speed/" class="sm">
   <option>Slower</option>
   <option>Slow</option>
   <option selected="selected">Medium</option>
   <option>Fast</option>
   <option>Faster</option>
</select>

The error message (in chrome console) is:

Uncaught Error: Syntax error, unrecognized expression: .ui-selectmenu-menu, #.speed/-button
jquery-1.10.1.js:1924

TIA

Sheogorat
  • 23
  • 1
  • 4
  • possible duplicate of [What are valid values for the id attribute in HTML?](http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html) – blgt Feb 06 '15 at 14:39
  • This is not really a duplicate: I'm aware that the problem can be avoided if these special characters are not used! But in my case the id's are generated by a framework and I cannot forgo these chars! – Sheogorat Feb 06 '15 at 15:14

1 Answers1

0

You can use the name attribute or document.getElementById() to get an Id that you can't use as a jQuery selector:

var elt = $(document.getElementById(".speed/"));
var elt = $("[name='.speed/']");

If the errors are generated by the library itself this won't really help much. However you could try replacing the invalid characters in the id with this as a workaround:

elt.attr("id", elt.attr("id").replace(".", "dot").replace("/", "slash"));
// ... possibly include other characters we don't like

The proper way of course would be to use id-s without dots and slashes. This is a rather sloppy way of working around it but it will work. Use with caution!

blgt
  • 8,135
  • 1
  • 25
  • 28
  • thanks, bglt but this is not really the issue. If I need jQuery selectors i do escape the id with `function escId(id) { return id.replace( /(:|\.|\[|\]|\/)/g, "\\\\$1" ); }` and call it like this `$( '#'+escId('.inp.begda/gs_req-begda') ).` The error message above is produced from some selector acces inside the jQuery UI lib! It seems the widget reads and uses the id internally without such an escape-logic. – Sheogorat Feb 06 '15 at 16:25
  • I figured, that's why I included the second line. It'll replace the (externally generated) id with something the `$.ui` library won't complain about – blgt Feb 06 '15 at 16:42
  • If that's not an option, then you should consider the libraries you're using incompatible and look for a solution which only uses either one or the other but not both – blgt Feb 06 '15 at 16:43
  • interesting: the error message does not seem to have any effect. the selection is working perfectly well! I will still considder your renaming option, but since the id's of input fields ar built to allow mapping to servers sided (controller) attributes by our framework, this seems risky. – Sheogorat Feb 09 '15 at 08:43
  • Ach and back to my initial question: should this be considdered to be an errer worth a bug report or does it count towards "unintended" use that i should fix on my side? – Sheogorat Feb 09 '15 at 08:45