JQuery object expected error when accessing page via url routing.

Question

In my global.asax I have url routing setup like below:

routes.MapPageRoute("User Logon", "{Vendor}/Logon", "~/Logon.aspx");

In the logon.aspx page, I have a script that "stylizes" the logon button:

<link href="jquery/css/flick/jquery-ui-1.8.1.custom.css" rel="stylesheet" type="text/css" />
<link href="images/style.css" rel="stylesheet" type="text/css" />
<script src="jquery/js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="jquery/js/jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#<%= ButtonLogon.ClientID %>').button();
    });
</script>

When I access the page us a url (in debug mode) http://localhost/logon.aspx?v=1 the page loads correctly and the jquery button command loads correctly. But then I access the page using the new url route, I get this error.

Microsoft JScript runtime error: Object expected

Anyone have an idea why this occurs?

Thanks.

Answer 1

That's because of relative paths in your HTML.

When you access your page as http://your.domain/Logon.aspx, the relative URL jquery/js/jquery-1.4.2.min.js resolves to http://your.domain/jquery/js/jquery-1.4.2.min.js and loads correctly.

But when you access it as http://your.domain/xxx/Logon.aspx, that URL resolves to http://your.domain/xxx/jquery/js/jquery-1.4.2.min.js, and since there's really no folder named xxx on your server, the server returns 404 and the script fails to load. Therefore, when you subsequently try to access functions and variables defined in that script, you get an error.

To fix this, you should either use absolute paths - i.e. /jquery/js/jquery-1.4.2.min.js (note the leading slash), or use the ResolveUrl (or Url.Content) method to map the URL correctly - i.e. <%= Url.Content( "~/jquery/js/jquery-1.4.2.min.js" ) %>

The latter option is preferable, since it does not depend on your application being hosted at the root of the domain.