mvc3 modal dialog with tabs

I have created a modal dialog in my project and I can load the partialview/view in the modal dialog, problem is on the view I have 3 tabs and each one of them is referencing another partialview. when I click on the tabs it brings the related partialview in t开发者_运维技巧he parent page (the page that has the link to the modal dialog) instead of just shifting through the tabs while inside the modal dialog. Anyone have experienced this issue before?

I will appreciate any help or similar examples that I can look through.

this is my code jQuery(document).ready(function () {

        $('.trigger').live('click', function (event)
         { 
              var id = $(this).attr('rel');    
                 var dialogBox = $("<div>");
                       $(dialogBox).dialog({   
                               autoOpen: false,
                               resizable: true,
                               title: 'Test Modal Dialog',
                               modal: true,
                               show: "blind",
                               hide: "blind", 
                               open: function (event, ui) {

                                         $(this).load('<%=Url.Action("action1","controllerName")%>');
                                                                           } 



                                     });  
                                       $(dialogBox).dialog('open');
                                   });

and then I have 4 partial views first one is the action1:

    <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<NeboAlertManagement.Models.model>" %>

" type="text/javascript"> " type="text/javascript"> " type="text/javascript"> " type="text/javascript">

        <div id="tabContainer">
         <ul id="menu"> 


          <li><%= Html.ActionLink("Home", "action2", "controllername")%></li>
          <li><%= Html.ActionLink("Products", "action3", "controllername")%></li>
          <li><%= Html.ActionLink("Contact Us", "action4", "controllername")%></li>


      <%--    <li><%= Html.RenderPartial("action2")%></li>
          <li><%= Html.RenderPartial("action3")%></li>
          <li><%= Html.RenderPartial( "action4")%></li>--%>


        </ul>
        </div>
        <% } %>

and the other three partialviews are simple test views but if it helps I can post them!

Thanks!

---

You should give a 'trigger' class to your links - tabs, so that jquery live can capture them.

Html.ActionLink("Text", "Action", new { controller = "Home" }, new { @class = "trigger" })

and at the top of click handler use

 $('.trigger').live('click', function (event)
 { 
     event.preventDefault()
     var uriToLoad = $(this).attr('href');

Before loading values into popup - make sure you use the same popup. Because now you create each time new popup. So:

// popup already present
if($('#mypopupid').length > 0 && $('#mypopupid').dialog("isOpen")) {
    $('#mypopupid').load(uriToLoad);
} else { // rest of the code - give popup id
  var dialogBox = $('<div id="mypopupid" />')
}

If popup is already present use it, if not open new.