Question

In my view (that is being uploaded by a dialog) I have several tabs that are being displayed in order for that to happen I need to reference the jquery ui:

<script src="<%= Url.Content("~/Scripts/jquery-ui-1.8.11.js") %>" type="text/javascript"></script>

but due to incorporating this page withing a dialog I need to take this reference to my master page and use that in the contentplaceholders of my view, that is when i have the problem.

this is my code in the view:

 <asp:Content ID="Content2" ContentPlaceHolderID="HeadContent" runat="server">


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

 </asp:Content>


<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">

   <h2>jQuery Tabs Example</h2>

  <div>
    <div id="tabstest">
    <ul>
        <li><a href="#tabs-1">Home</a></li>
        <li><a href="#tabs-2">Products</a></li>
        <li><a href="#tabs-3">Contact Us</a></li>
    </ul>
    <div id="tabs-1">
        <% Html.RenderPartial("GetHomeTab");  %>            
    </div>
    <div id="tabs-2">
        <% Html.RenderPartial("GetProductTab");  %>         
    </div>
    <div id="tabs-3">
        <% Html.RenderPartial("GetContactUsTab");  %>           
    </div>
</div>    
</div>

</asp:Content>

if I remove the jquery UI reference to the master page I recieve this error ” Object does not support method ‘tabs'”, but if I add the same reference to my view the tabs come up.

I will appreciate if anyone knows the reason of this issue

Answer 1

If you move the <script src="..."> to your master page there shouldn’t be any problem (I always do this). Check that you’re putting it in the correct master page.

A way to test is would be the following:

• Run the page on your browser (there’s a js error as you say)
• View its source code
• Look for the <script src="..." tag (the jquery ui inclusion).

I’m almost sure you don’t have it.

Hope this helps. Cheers

PS: Don’t forget to include jquery.js, then jquery.ui, and then your scripts (to ensure you don’t have a dependency problem)