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>

Is your script running at all? simple alert at the top of the script? — littlechris
– littlechris, Commented Sep 22, 2009 at 19:58
Do you use any custom routing in your global.asax file? The comment you have left below is the same tpye of error I got until I implemented as below. I believe the JS was running too early as a result of issues with my script path. — littlechris
– littlechris, Commented Sep 22, 2009 at 20:24
The script was having a problem locating the action in the line $.getJSON("/ApplicationSettings/Applications/List", function(data) If I change it to $.getJSON("../ApplicationSettings/Applications/List", function(data) it works I guess what i really need to do is to be able to resolve the path to the action correctly. not sure how to do this in jquery any ideas? — user99513
– user99513, Commented Sep 22, 2009 at 20:58

littlechris · Accepted Answer · 2009-09-24 09:42:24Z

5

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.

edited Sep 24, 2009 at 9:42

answered Sep 22, 2009 at 18:31

littlechris

4,20410 gold badges47 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user99513 Over a year ago

littlechris this works! thank you so much for your help. and for explaining the solution. I made a slight change i.e. added "~/" to get the getJSON method to work $.getJSON("<%=Html.AbsolutePath("~/ApplicationSettings/Machines/List/")%>"

Julian Aubourg · Accepted Answer · 2009-09-22 18:29:26Z

0

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

answered Sep 22, 2009 at 18:29

Julian Aubourg

11.4k1 gold badge31 silver badges29 bronze badges

2 Comments

user99513 Over a year ago

As you see I do have the function within a $(document).ready( .... ) block. I stepped thru the script using the script debug tool provided with ie8 and it throws an error Saying "Object Expected" at the line $(document).ready(function().. any Ideas?

Julian Aubourg Over a year ago

It's probably a script pathing issue like littlechris pointed out. Seems like $ is not defined (that the only thing that is possibly undefined at this point). On a side note, I strongly recommend using firefox+firebug for proper debugging (IE8's one is a sad joke).

Jarrett Meyer · Accepted Answer · 2009-09-22 18:31:56Z

0

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.

answered Sep 22, 2009 at 18:31

Jarrett Meyer

19.6k6 gold badges61 silver badges52 bronze badges

Collectives™ on Stack Overflow

page does not run jquery script on load

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related