Page doesn't run jquery script on load
I have an ASP.net mvc page that does a jquery script load. The script calls the action on the controller and removes the dropdown.
this works on my dev machine, but when deployed to a webserver (Win 2k3 window with IIS 6), the page loads, but it doesn't run the script, resulting in an empty dropdown.
I have a jquery-1.3.2.js file in the scripts folder and I added a mapping to aspnet_isapi.dll on the web server. is there anything else I am missing?
this is the part of the page that humidifies the dropdowns that work on my machine but not the webserver it is deployed to as you can see the script is calling the ApplicationSettings controller to get a JSON object that humidifies the dropdown
<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>
source to share
I'm having a problem with script pathing. I used this extension method for sorting.
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 on your home page:
<%@ Import Namespace="MYNAMESPACE.Helpers" %>
and then write all scripts like:
<%=Html.Script("~/Scripts/jquery-1.3.2.min.js")%>
Try the following helper helper:
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 displayed, the absolute path must be inserted by the MVC ViewEngine.
source to share
How did you code the action? This can be important if you are running a virtual directory on a server. If you are running locally as http://localhost:xxxx/controller/action
, but running remotely as http://mysever/myapp/controller/action
, then you need to make sure you use the Url.Action()
actual path to resolve the action result.
source to share