ASP MVC Jquery Tabs

Question

Hey all. im writing application on asp mvc. so, i have jQuery tabs on index.aspx, which contains same ascx control - "ChildMain":

<div id="tabContainer1">
    <ul>
        <li><%=Html.ActionLink("test1","ChildMain")%></li>
        <li><%=Html.ActionLink("test2","ChildMain")%></li>
    </ul>
</div>

$(document).ready(function () {
        $("#tabContainer1").tabs();            
    });

This ChildMain.ascx contains another jQuery tabs:

<div id="tabContainer2">
<ul>
    <li><%=Html.ActionLink("test3","Child2")%></li>
    <li><%=Html.ActionLink("test4","Child5")%></li>
</ul>
</div>
$(document).ready(function () {
        $("#tabContainer2").tabs();            
    });

And controllers:

public ActionResult ChildMain() {
        return PartialView();
    }
public ActionResult Child2() {
        return PartialView();
    }
public ActionResult Child5() {
        return PartialView();
    }

So. when i start application, i see two rows of tabs, and everything fine, but when i select second tab on first row of tabs, second tabs row doesnt renders, i mean, i see html list instead of tabs. so, is it becouse of creating two instances of one ascx control? any ideas?

Answer 1

You may have to call the function that activates the jquery plugin which in this case looks to be .tabs(). If you are adding html to the page when your tab is clicked to populate your child tabs then the html added hasn't been touched by your jquery plugin yet.