Jquery Tabs in a MVC User Control

Question

I am having a problem with Jquery Tabs. On my MVC page, I have a form that returns a partial page (.ascx). This page has Jquery tabs on it, howerver all I get is the tab content without the tab. It looks like the partial page javascript code for the tab does not run,

<script type="text/javascript">
    $(function() { $("#tabs").tabs(); });
</script>

I tried to put this in the main page, but I get an error because "#tabs" does not exist on the page when it is first loaded.

Any ideas on getting this to work?

Answer 1

Are you loading the partial via AJAX? If so, put the code that generates the tabs in the AJAX callback instead of on the page.

$('#tabContent').load( '/controller/action', null, function() {
   $('#tabs').tabs();
});

With the MS Ajax helpers:

<% using (Ajax.BeginForm("Action", new AjaxOptions { ..., OnSuccess = "doTabs", ...})) %>

<script type="text/javascript">
    function doTabs() {
       $('#tabs').tabs();
    }
</script>