CODEWITHSUNDEEP
jqueryasp.net-mvc
Tony Borf
Tony Borf

Reputation: 4660

Jquery Tabs in a MVC User Control

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?

Upvotes: 1

Views: 1004

Answers (1)

tvanfosson
tvanfosson

Reputation: 532465

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>

Upvotes: 1

Related Questions