jQuery AJAX load not executing on ASP.NET MVC Controller Action

Question

Hey folks,

I have a simple thing going here: two divs and two calls to load partials (controller actions with PartialView as results).

I am dealing with two controller actions: Index and ItemDetail. The jQuery load works in the view returned by the Index action, but not on ItemDetail.

These items are in the same controller and you can access them in a brower as follows: http://[site]/items http://[site]/items/itemdetail

To isolate the problem, I have set up Index and ItemDetail to return views with identical syntax:

<div id="deptTickets">Loading department tickets...</div>
<div id="recentTickets">Loading recent tickets...</div>

<script type="text/javascript" language="javascript">
    $("#deptTickets").load("items/DepartmentTickets");
    $("#recentTickets").load("items/RecentTickets");
</script>

The .load methods fire and load the appropriate partial views for index, but not for ItemDetail.

I think the only thing different is the route. In fact, if I return the 'detail' view in the index it renders correctly and the jQuery runs, and if I return the 'index' view in the controller action for itemDetail it renders the page but never executes the jQuery.

Any ideas?

Answer 1

You're using a relative URI, so it will be appended to the current URI. Since that's a different place, your AJAX request is probably 404ing. Use Firebug's net panel or Fiddler to confirm this.

Answer 2

You need to make the URLs relative to the site root otherwise your routes won't be correct. It's probably best to use the Url helper for this.

<script type="text/javascript" language="javascript"> 
    $("#deptTickets").load("<%= Url.Action( "DepartmentTickets", "Items" ) %>"); 
    $("#recentTickets").load("<%= Url.Action( "RecentTickets", "Items" ) %>"); 
</script>