views:

31

answers:

2

Hi,

I have an asp.net page with some JQuery tabs. Everything works ok. I added a dropdownlist in one of the tabs, that causes a postback. After the postback I want the same tab to be selected.

I initialize the tabs as:

<script type="text/javascript">
    $(document).ready(function() {
     var $myTabs = $(".tabsDiv").tabs();
</script>

Then, on the PageLoad event, I inject a script to select the tab:

Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "TabSelect", "$myTabs.tabs('select', 1);", true);

For some reason this doesn't work. The script is running but the tabs are not selected. Is it because the RegisterClientScriptBlock places the script in the bottom of the page and, for some reason, it runs too late?

Any help is appreciated. Thx in advance

+1  A: 

Hey,

It might run too early... bottom of the page is good, try this instead:

Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "TabSelect", 
    "$(document).ready(function() { $myTabs.tabs('select', 1); });", true);

Basically, it also runs this code at the ready event.

Brian
Like it's stated in the other comment, it gives a JS error about the variable not existing...
Dante
Sorry, didn't see anything about a variable not existing error... don't use $myTabs then, just call $(".tabsDIV").tabs('select', 1); then; that's how you use the plugins anyway...
Brian
+2  A: 

Calling $myTabs.tabs('select', 1); I think results in an error. $myTabs is not a global variable. It's scope is only in $(document).ready(function() { ... }); Can you try with $(".tabsDiv").tabs('select', 1); and see if it works?

Regards...

Padel
Nope, the tab is not selected.If I put this line directly in the script included in the head section, it works. If it's injected in the PageLoad nothing happens.I don't get it...
Dante
Do you use this inside an UpdatePanel? Because that is another story.
Padel
No update panels....In summary, on the <head> section the tab is initialized, as I write in the post text, and in case the ddl causes a postback I add another script, like you posted.
Dante
Then I can't tell exactly what the problem is. In a previous project I've used something like this for tab selection:protected void RegisterTabsScript(int tabId) { if (!ClientScript.IsStartupScriptRegistered("tabsScript")) ClientScript.RegisterStartupScript(GetType(), "tabsScript", "$(document).ready(function() { $('#tabs').tabs({selected: " + tabId + "}); });", true); }And it worked just fine by calling this method whenever needed (Page_Load, button click handler, selected index changed handler etc.).Maybe you can make it work in your project.
Padel
And call it with RegisterTabsScript(0); in your initial page load to make the jQuery tabs plugin work (forget the script in the <head> and call it from code).Regards...
Padel
It worked, but only when I injected the script in the ddl_SelectedIndexChanged event. For some reason adding it in the Page_Load was not working.On top of that I had OutputCache enabled and that was causing strange behaviours in the page.
Dante
I didn't get in all this trouble when I used this...
Padel