JQuery Tip – 1

 

In the recent days, I am some obsessed by JQuery. Almost all problems I try to solve in JavaScript itself, yep off-course using JQuery. It is not long time back, I wanted to take every problem to the backend (java) to get it solved. I should appreciate JQuery here. It has a very easy DOM parser and solves most of the browser quirks. I will be only half way, if I didn’t mention about JQuery UI and 1000 of other JQuery plug-in(s) out in this world. Yes plug-ins reduces the cost, both in terms on time and effort. Word of caution: Be careful in selection of the plug-in, it might end up being overkill. Due to the continuous playing with JQuery, I came across lot of issues and also find solution to most of it, yes with the help of “Google” too :). The main intention of this and forth-coming JQuery tips blog is to share my experience on certain (interesting) problems with respect to JQuery. 

Sometime back, I was trying to change a piece of code that is written before I came to know about JQuery. So, most of the DOM elements in it will be having an id with _dot_, say a.b. 

This makes it impossible to get that particular element using JQuery. Try it yourself, by executing document.getElementById(“a.b”) and then using $(‘#a.b’) using firebug console. The former returns the element, but not the latter. Note: You can make use of the below HTML fragment for trying out the commands used in this blog. The reason is the _dot_ in the id. Try changing the element id to “a” and execute the above commands. Both commands will return the corresponding element. JQuery perfectly works with the standard. W3c is not recommending _dot_ in ID. Snippet from W3c

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens (“-“), underscores (“_”), colons (“:”), and periods (“.”). 

Now how to work around this, Is it possible to use JQuery to get an element that has id with dot. Yes, it is possible, but not with “id” selector (i.e. the selector that starts with #). If you think wild you will come to know that id is yet another attribute, Correct. So, we can use attribute selector to work around this issue as $(‘:[id=a.b]’). So now the problem is solved you will be able to use JQuery for element that has id with dot. But, I am strongly coding against this as it is coding against standards 🙂

<html><head>

  <script type=”text/javascript” src=”http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js”></script&gt;

</head><body>

   <input type=”text” id=”a.b”></input>

<body></head></html>

Happy to know if this solves your issue too 
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: