jquery not executing on pages with custom routes

Question

I have a number of pages that include the same partial view which contains a set of jquery tabs. The purpose of the partial view is to componentize a common set of tabs. The tabs are essentially links to the other pages. The urls for the tabs on the partial view are provided by the view model passed to the partial view.

The urls are of the form:

http://localhost:1999/Transactions/1/Item/

These urls match custom routes defined in the routing configuration.

My problem is that the tabs only display correctly for the first page displayed, selecting a tab takes me to the correct page, but the $(document).ready(function() does not execute and the ul for the tabs displays undecorated.

Typical page code is :

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<Questern.ActiveOrderManagementSystem.Web.ViewModels.TransactionItemModel>" %>
<asp:Content ID="headerStuff" ContentPlaceHolderID="headerContent" runat="server">  
<script type='text/javascript'>
$(document).ready(function() {
    $("input[type=text]").tooltip();
});
</script>
</asp:Content>
<asp:Content ID="editTitle" ContentPlaceHolderID="TitleContent" runat="server">
Edit Transaction Item
</asp:Content>
<asp:Content ID="itemContent" ContentPlaceHolderID="MainContent" runat="server">
<h2>Edit Transaction Item</h2>
<% using (Html.BeginForm()) {%>
     <fieldset>
         <% Html.RenderPartial("TransactionSummaryInfo", Model.summaryModel); %> 
         <% Html.RenderPartial("TransactionTabs", Model.tabModel); %>
         <div class="container_16">
          <div class="grid_16 form_row_start">
              <div class="prefix_5 grid_2 ">  
                  <a id="btnSave" href="javascript:document.forms[0].submit()" class="fg-button fg-button-icon-left ui-state-default ui-corner-all"><span class="ui-icon ui-icon-disk">Save</span>Save</a>                        
              </div>
              <div class="grid_1">&nbsp;</div>
              <div class="grid_2 suffix_6"> 
                  <a id="btnCancel" class="fg-button fg-button-icon-left ui-state-default ui-corner-all"><span class="ui-icon ui-icon-cancel">Cancel</span>Cancel</a>  
              </div>
          </div>
      </div>    
    </fieldset>
<% } %>
</asp:Content>

Partial View code is:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<Questern.ActiveOrderManagementSystem.Web.ViewModels.TransactionTabModel>" %>
<% if (false) { %>
  <link href="../../Content/forms.css" rel="stylesheet" type="text/css" media="screen" />
   <link href="../../Content/grid.css" rel="stylesheet" type="text/css" media="screen" />
   <script type="text/javascript" src="../../Scripts/roundCorners.js"></script>      
<% } %>
<script type='text/javascript'>
$(document).ready(function() {
    $('#tabs').tabs({
        select: function(event, ui) {
            var url = $.data(ui.tab, 'load.tabs');
            if (url) {
                location.href = url;
                return false;
            }
            return true;
        }
    });
});
</script>
<% using (Html.BeginForm())
   {%>
   <div id="tabs" >
    <ul> 
           <% int i = 0; foreach (TransactionComponent component in Enum.GetValues(typeof(TransactionComponent)))
              {
                  if (component == Model.selectedComponent)
                  {%>
                     <li class="ui-tabs-selected"><a href="#editbody"><%= Html.Encode(Model.tabNameList[i])%></a></li>
                <%} else
                  {%>
                      <li><a href="<%= Html.Encode(Model.tabLinkList[i]) %>"><%= Html.Encode(Model.tabNameList[i])%></a>
                <%}; 
                  i++;
              }%>
           </ul>
    </div>
    <%} %>

I got the jquery code for the tabs from the jquery docs http://docs.jquery.com/UI/Tabs in section *...follow a tab's URL instead of loading its content via ajax

Apologies for the long post, I wanted to give as much context as possible.

Update: From running firebug I get the error "$ is not defined" and I can also see that the js files are not being found as the browser is trying to load them from

http://localhost:1999/Transactions/ instead of http://localhost:1999/

Answer 1

Bit of a red herring but I'll post the answer in case anyone else comes across the same scenario. The problem was due to the pages not being located at the root url for the site.

I have custom URLs like:

http://localhost:1999/Transactions/1/Detail/

http://localhost:1999/Transactions/1/Item/

When accessing these pages, this has the consequence of the browser attempting to retrieve Javascript includes in the Site.Master from the realtive root of the page

i.e. http://localhost:1999/Transactions/

For example:

<script type='text/javascript' src="../../Scripts/jquery.maskedinput-1.2.2.min.js"></script>

will be mapped to:

http://localhost:1999/Transactions/Scripts/jquery.maskedinput-1.2.2.min.js

Solution is to encode the includes like so:

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

For full explanation see Referencing JavaScript in ASP.NET MVC Master Pages

Answer 2

If you reference your scripts form the root of the site, the path will always be correct. Additionally, intellisense will be aware of the script.

<script src="/Scripts/jquery.maskedinput-1.2.2.min.js" type="text/javascript"></script>