2

I already know how to select DOM elements with IDs which contain dots, and I've read all the related answers on stackoverflow (like this: How to select html nodes by ID with jquery when the id contains a dot?), but the problem is there's lots of plugins out there that are not aware of this issue, and short of going through the code of all the plug-ins we're using and replace the selectors appropriately, I was thinking that maybe there's another plug-in/extension for jQuery which replaces the main selector mechanism to make it dot-safe. I am using plug-ins like jqGrid and I've seen many places in the code where something like this is used:

$('#' + id).somefunction()

Any ideas?

Thanks in advance

Community
  • 1
  • 1
AsGoodAsItGets
  • 2,886
  • 34
  • 49

1 Answers1

1

You can alter the $.fn.init function to change the behavior of jQuery, but there isn't a quick and easy way to make sure IDs with dots in them are safe throughout your application. A quick and dirty solution would replace all .s with \\. by altering the init function, but then all your class selectors break.

The only solid way to do it is passing in the IDs with escaped dots to all your plugins.

EDIT

If you do want a quick and dirty solution, here's one that will at least work as long as you don't have something like #id.class. It will work for #id .class (the space in between).

(function($){
 $.fn._init = $.fn.init;
 $.fn.init = function ( selector, context, rootjQuery ) {
  if (typeof selector == 'string' && selector.match('#')) {
   selector = selector.replace(/\#([^\s\.]*)\./g, '#$1\\.')
  }
  return new $.fn._init(selector,context,rootjQuery);
}
})(jQuery);
Kelly
  • 40,173
  • 4
  • 42
  • 51
  • I posted the original question after a long day at work fighting with bugs because of the stupid dots that our back-end developers insist we can't get rid of (I hate Java!). It only came to my mind later as I was walking home that this is impossible without breaking the class selectors, just like you mentioned. Thanks for your answer anyway. And by the way, thanks to the guys who came up with the dot as a class selector for CSS when the W3C standard for DOM IDs had already allowed dots! – AsGoodAsItGets Mar 30 '11 at 18:09
  • By the way, that only allows one dot per ID. If you want to allow more, or unlimited, you'll need to tweak that code to your taste. – Kelly Mar 30 '11 at 18:10
  • Yeah W3C guys, nobody likes a double dotter! – Kelly Mar 30 '11 at 18:11
  • Or I can just do `selector = selector.replace(/\./g, "\\.");`, no? Sorry, I didn't even pay attention to the regex, the whole point is that it will break the class selectors. – AsGoodAsItGets Mar 30 '11 at 18:17
  • You could do that, but that will instantly break class selectors if they're paired with an ID. Mine tries to detect if there is a space. i.e. `ul#my.menu li.home` will work with mine, whereas the simplified version would produce `ul#my\.menu li\.home`. – Kelly Mar 30 '11 at 18:21
  • Well, even if my code is not using class selectors paired with an id, I cannot guarantee the same for the plug-ins we're using, especially complex ones like jqGrid, so we're back to square one :( I think the jQuery team should raise awareness of the issue to plug-in developers. And to think that before we started using jQuery, a good old-fashioned document.getElementById() would've done the trick with no hassle... – AsGoodAsItGets Mar 30 '11 at 18:39
  • One good way to debug your app to see what tags might cause issues: throw a `console.log(selector)` in that inner `if` statement. You can use that to look at all the #id tags your plugins are using (Firebug required). Then you can tweak any plugins that won't work with the hack. – Kelly Mar 30 '11 at 18:55