Question

When I use the .load() function in jQuery, my target is on the same page, but for some reason it keeps giving me a new page.

Here is the code:

$('form').submit(function () {
    $("#searchResults").load('@(Url.Action("GetSearchResults", "MyController"))');
});

I have a div on the same page called #searchResults

The GetSearchResults Action in my controller actually returns a partial view that contains a Telerik data grid.

My expectation is that the partial view will get loaded into the #searchResults div using Ajax without refreshing the page. But, a new page shows up instead with the partial view instead of it updating the #searchResults div.

Answer 1

You need to return false at the end of your submit event to prevent the default browser handling of the submit.

$('form').submit(function () {
      $("#searchResults").load('@(Url.Action("GetSearchResults", "MyController"))');
      return false;
});