The Dreaded INVALID_STATE_ERR: DOM Exception 11

Last month I had a strange problem in Chrome with Jquery, the chrome console launched me an INVALID_STATE_ERR:DOM 11 error. It happen when i tried to insert a string of HTML directly using $.html(). Other browsers didnt thrown any error,even IE where ok with that kind of indecent proposal i tried to reach.

So what was the problem with Mr Chrome?
The Exception 11 means teorically means that some objects doesnt exist, in practice it mean that you're creating DOM objects ( I means html tags) using jquery append(), html() or prepend() with semantics errors, like not closing the tags or something like that. So if you write bad html like $.html('<ul><li>HelloWorld</li></ul>'); , ( we did'nt close the li tag) there will be mayhem in Chrome.

And the solution?

If you are using jquery to write strings of html, then make sure all the tags are closed and your html doesnt have semantic errors like unclosed tags and non existing properties. Check the source code in Firefox or Opera an see if youre missing some properties over there. Hope this help

Custom Css Tips for Jquery Tabs

I love Jquery Tabs , it just make your life easier... well, only when you use his custom CSS.

But how about integrating it with your custom CSS, instead of his restrictive-gun-in-head Themes? , of course we know how to create a Tab Menu in CSS, but integrate it with Jquery Tabs is not so easy. So after one day of debugging my own code i will give you some tips to create your custom css for jquery tabs.

Tip 1: Know the classes for the Navigation Tab Bar: There is only one class that you will need to know little grasshoper:

• ui-state-active: As the name implied, this class is added to the tab that is currently selected, dont mind the other classses, you will not need them, this is the silver bullet class for jquery tabs.

So we will need 4 css for know

1. The Default Navigation Bar Css
2. The Css for the a tag inside tha navbar
3. The Css of the ui-state-active bar
4. And the a tag inside the active navbar
   

So the css for this navigation bar(1) will go like this:

ul.grindyMenu li{
background:white;
color:#D09984;
display:inline;
list-style:none;
padding:1px 15px 1px 15px;
}

Then we add the a tag css(2)

ul.grindyMenu a{
text-decoration:none;
font-size:0.7em;
font-weight:bolder;
}

And for the active tab css(3), it will be like this :

ul.grindyMenu li.ui-state-active{
background:#D09984;
}

Finally the a tag inside the active tab (4):

ul.grindyMenu li.ui-state-active a{
color:white;
}

Now there is a small catch, your css file should have those rules written in that order. Maybe here you will not need to follow that tip, but what if you need to create a rule for the ui-state-default class. Do you notice how the active and not active tabs, both have the ui-state-default class? If you declare ui-state-default after ui-sate-active, it will override it:


So make your life easier and put those rules in order, first the default class, and then the active class in your css file.

Tip 2: Know the classes for the Panels, here also we wil only need one class:

• ui-tabs.hide: This is the most important class, this class make the non active panels to hide
  

.ui-tabs-hide{
display:none;
}

And that's it. Put this class and everything will be allright. Happy coding!

Thougth of a Numeric ID in Jquery

I have devoted some of my time to create a Web Browser Game. This game has a Map (It is just a table with a lot of CSS to make it look like an Real Battle Map)... Well i started to work on it an created each tag with a numeric ID.. heres some code example:

But when I tried to select a ROW from the table by its ID like $('tr#0'), it doesnt work. So debuggin and debuggin I figured out that using a numeric Id in any TAG make jquery crazy. There are two solutions for fixing this behaviour:

A) Use eq to get the element of your desire: Something like $('tr').eq(1) will make the trick

B) Dont use a numeric ID at all: I think this is the best solution, so instead use something like:

Hope it help somebody with the same problem