page does not run jquery script on load

Question

I have an ASP.net mvc page that executes a jquery script on load. The script calls an action on a controller and hydrates a dropdown list.

this works on my dev machine but when deployed to the webserver (Win 2k3 box running IIS 6) the page loads but it does not run the script resulting in an empty drop down list.

I have the jquery-1.3.2.js file in the scripts folder, and I have added the mapping to aspnet_isapi.dll on the webserver. is there anything else that i am missing?

this is the part of the page that hydrates the drop down lists that works on my machine but not on the webserver that it is deployed to as you can see the script call the ApplicationSettings controller to get a JSON object that hydrates the drop down list

 <asp:Content ID="MainContent" ContentPlaceHolderID="MainContent" runat="server">
 <script src="~/Scripts/jquery-1.3.2.js" type="text/javascript"></script>
 <script type="text/javascript">
  // Wait for the document to be ready
  $(document).ready(function()
  {
   var selectedApp = $('#selectedApplication').val();
   var selectedMac = $('#selectedMachine').val();

   // Get the list of applications and populate the applications drop down list
   $.getJSON("/ApplicationSettings/Applications/List", function(data)
   {
    var items = "<option>----------- Select Application to Configure ----------</option>";
    $.each(data, function(i, application)
    {
     var selected = (application.Value == selectedApp) ? 'selected' : '';
     items += "<option value='" + application.Value + "'" + selected + ">" + application.Text + "</option>";
    });
    $("#Applications").html(items);
   });

   // Get the list of machines where the selected application is installed and populate the machines drop down list
   $("#Applications").change(function()
   {
    if ($("#Applications").attr("value") != "")
    {
     // Enable the Machines DDL if a valid application is selected
     $("#Machines").removeAttr("disabled");

     // Populate the machines DDL with a list of machines where the selected application is installed
     $.getJSON("/ApplicationSettings/Machines/List/" + $("#Applications > option:selected").attr("value"), function(data)
     {
      // Set the first item in the list
      var items = "<option>---------- Select Machine -----------</option>";

      // Retrieve the list of machines for th selected application from the database
      $.each(data, function(i, machine)
      {
       var selected = (machine.Value == selectedMac) ? 'selected' : '';
       items += "<option value='" + machine.Value + "'" + selected + ">" + machine.Text + "</option>";
      });

      // Add the items retrieved to the Machines DDL
      $("#Machines").html(items);

      if ($("#Machines").attr("value") != "")
      {
       $("#btnSearch").removeAttr("disabled");
      }
      else
      {
       $("#btnSearch").attr("disabled", "disabled");
      }
     });
    }
    else
    {
     // If a valid application has not been selected then disable the Machines DDL
     $("#Machines").attr("disabled", "disabled");
     $("#btnSearch").attr("disabled", "disabled");
    }
   });

   if (selectedApp != "")
   {
    $("#Machines").removeAttr("disabled");

    $.getJSON("/ApplicationSettings/Machines/List/" + selectedApp, function(data)
    {
     var items = "<option>---------- Select Machine -----------</option>";
     $.each(data, function(i, machine)
     {
      var selected = (machine.Value == selectedMac) ? 'selected' : '';
      items += "<option value='" + machine.Value + "'" + selected + ">" + machine.Text + "</option>";
     });
     $("#Machines").html(items);
    });

    if (selectedMac != "")
    {
     $("#btnSearch").removeAttr("disabled");
    }
    else
    {
     $("#btnSearch").attr("disabled", "disabled");
    }
   }
   else
   {
    $("#Machines").attr("disabled", "disabled");
    $("#btnSearch").attr("disabled", "disabled");
   }
  });


  function saveSelectedApplication()
  {
   $("#selectedApplication").val("");
   $("#selectedMachine").val("");
   $("#selectedApplication").val($("#Applications").attr("value"));
   if ($("#Applications").attr("value") != "")
   {
    $("#Machines").removeAttr("disabled");
    if ($("#Machines").attr("value") != "")
    {
     $("#btnSearch").removeAttr("disabled");
    }
    else
    {
     $("#btnSearch").attr("disabled", "disabled");
    }
   }
   else
   {
    $("#Machines").attr("disabled", "disabled");
    $("#btnSearch").attr("disabled", "disabled");
   }
  }

  function saveSelectedMachine()
  {
   $("#selectedMachine").val("");
   $("#selectedMachine").val($("#Machines").attr("value"));
   if ($("#Machines").attr("value") != "")
   {
    $("#btnSearch").removeAttr("disabled");
   }
   else
   {
    $("#btnSearch").attr("disabled", "disabled");
   }
  }
 </script>

Answer 1

You put your code in a "$(document).ready(function() { [YOUR_CODE] });" block? If not, the DOM is probably not yet ready ;)

Answer 2

I had an issue with script pathing. i used this extension method to sort it.

public static class HtmlHelperExtensions
    {
        /// <summary>
        /// Scripts the specified HTML to allow for correct pathing of the resource.
        /// </summary>
        /// <param name="html">The HTML.</param>
        /// <param name="path">The path.</param>
        /// <returns></returns>
        public static string Script(this HtmlHelper html, string path)
        {
            var filePath = VirtualPathUtility.ToAbsolute(path);
            return "<script type=\"text/javascript\" src=\"" + filePath + "\"></script>";
        }
    }

Then put this in the master page:

<%@ Import Namespace="MYNAMESPACE.Helpers" %>

and then jsut register all scripts like:

<%=Html.Script("~/Scripts/jquery-1.3.2.min.js")%>

Try implemeting the follwoing helper as well:

public static string AbsolutePath(this HtmlHelper html, string path)
{
    return VirtualPathUtility.ToAbsolute(path);
}

and then change your call to

$.getJSON("<%=Html.AbsolutePath("~/ApplicationSettings/Machines/List/")%>"

When your view is rendered the absolute path should be inserted by MVC ViewEngine.

Answer 3

How have you coded the action? This can be important if you run in a virtual directory on the server. If you run locally as http://localhost:xxxx/controller/action, but run remotely as http://mysever/myapp/controller/action, then you need to make sure that you're using Url.Action() to resolve the real path to the action result.