Question

I can’t get my tabs working, no mater what I do. Demo is very simple and straight forward but i must missed something.
CSS is applied and $("#pnlTabs").tabs(); function is called but nothing happens.

Please help me, this JS drives me nuts.

EDIT:

here is the link to zip file with complete solution http://dl.dropbox.com/u/12791555/HelpDeskControls.zip

EDIT2:

Just one more question. When You click “services” or “events” tab is it possible that function from codebehind is called ? Let’s say that when I click on events tab, same function gets called that when I click on “Load” button

Answer 1

I suspect that ID mangling might be the cause here.

Change your script to this and try again

$(function () {
    $('#<%=pnlTabs.ClientID %>').tabs();
});

Since the HTML specification requires element IDs to be unique within the DOM, the ASP.NET framework attempts to avoid the possibility of duplicate IDs appearing by rewriting the IDs that you assign to server controls in the page. If you think about it, this makes sense to some degree, as using controls such as the gridview for example, where you have a server control with an ID which you would like to repeat for each item in the datasource, you wouldn’t want the ID to also repeat as this will result in invalid HTML.

Any control that is decorated with the INamingContainer interface creates a new ID namespace which will result in element ID mangling on the client side.* Using the markup given above, we can have the ID that will be generated in the response sent to the client outputted into the page into the jQuery function call.

*ASP.NET 4 can be set to not mangle IDs, at your own peril!

EDIT:

I’ve had a look through your demo code and all is working as intended – the tab event handlers are being bound correctly to the list elements which when clicked are applying the correct CSS classes to the div elements to show the corresponding one and hide the others, respectively.

It seems that you are missing a large chunk of the CSS required to style the tabs and it is the CSS classes that drive some of the tab behaviour. If you drop in a link to a jQuery UI theme CSS hosted on google api, then all appears to work correctly. I added the following after your CSS stylesheet link

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>

and all appeared to work as expected.

On a side note, you may be interested in checking out ASP.NET MVC – in my personal opinion after using it for around a year, given a choice, I would not go back to web forms. If your comfortable with HTML, CSS and JavaScript, you might find it more intuitive than web forms to use 🙂