Adding Tabs inside a partial view

Question

I'm trying to put tabs in a partial view which is inside a set of tabs already,the admin index view has a set of tabs which when selected render a partial view,I would like to put another set of tabs or side menu in this partial view but it doesn't seem to work,any suggestions would be great,thanks

This is the Admin index view

   
       <script>
           $(function () {
               $("#tabs").tabs({
                   beforeLoad: function (event, ui) {
                       ui.jqXHR
                   }
               });
           });
   
    </script>

<body>
    <div id="tabs" >
        <ul>
            <li><a href="@Url.Action("AllUsersTab","Admin")">All Users</a></li>
            <li><a href="@Url.Action("DoctorTab","Admin")">Doctor</a></li>            
            <li><a href="@Url.Action("StaffTab","Admin")">Staff</a></li>           
        </ul>
        
    </div>


</body>

This is the partial view

<script>
  $( function() {
    $( "#tabs" ).tabs({
      beforeLoad: function( event, ui ) {
        ui.jqXHR.fail(function() {
          ui.panel.html(
            "Couldn't load this tab. We'll try to fix this as soon as possible. " +
            "If this wouldn't be a demo." );
        });
      }
    });
  } );
    </script>

<body> 
    <div id="tabs">
    <ul>
        <li><a href="#tab1">Add Doctor</a></li>
        <li><a href="#tab2">Tab 1</a></li>
        <li><a href="#tab3">Tab 2</a></li>        
    </ul>
    <div id="tab1">
        <h2>Create Doctor</h2>

        @Html.ValidationSummary(false)
        @using (Html.BeginForm("Create", "Doctor", FormMethod.Post, new { enctype = "multipart/form-data" }))


        {
            <div class="form-group">
                <label>First Name</label>
                @Html.TextBoxFor(x => x.FirstName, new { @class = "form-control" })
            </div>

            <div class="form-group">
                <label>Last Name</label>
                @Html.TextBoxFor(x => x.LastName, new { @class = "form-control" })
            </div>

            <div class="form-group">
                <label>Address</label>
                @Html.TextBoxFor(x => x.Address, new { @class = "form-control" })
            </div>

            <div class="form-group">
                <label>Telephone</label>
                @Html.TextBoxFor(x => x.Telephone, new { @class = "form-control" })
            </div>

            <div class="form-group">
                <label>Date Of Birth</label>
                @Html.TextBoxFor(x => x.DOB, new { @class = "form-control" })
            </div>

            <div class="form-group">
                <label>Email</label>
                @Html.TextBoxFor(x => x.Email, new { @class = "form-control" })
            </div>

            <div class="form-group">
                <label>Password</label>
                @Html.PasswordFor(x => x.Password, new { @class = "form-control" })
            </div>

            <button type="submit" class="btn btn-primary">Create</button>
                    @Html.ActionLink("Cancel", "Index", null, new { @class = "btn btn-default" })


        }
    </div>
    </div>    
</body>

Tabs inside tabs is already discussed in this [question](http://stackoverflow.com/questions/24797405/jquery-tabs-inside-of-tabs). — Pedro S Cord, Sep 12 '16 at 16:52
thanks for the reply but I have a tab with a partial view inside, inside the partial view I have more tabs,these tabs don't render properly is my issue — F.OLeary, Sep 12 '16 at 17:05

score 0 · Accepted Answer · answered Sep 13 '16 at 00:35

0

You have 2 tab sets with the sameid... Generate a random id on your views, or whatever to make sure that your tab components are not bouncing against each other..

answered Sep 13 '16 at 00:35

Laurent Lequenne

902
5
13

Adding Tabs inside a partial view

1 Answers1