CODEWITHSUNDEEP
jquery
carlg
carlg

Reputation: 1812

jquery .load target showing up on a new page

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.

Upvotes: 0

Views: 225

Answers (1)

sgrif
sgrif

Reputation: 3822

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;
});

Upvotes: 2

Related Questions