How to load a portion of a Page Using Ajax in JQuery?

Question

I am Working on Asp.net MVC application and I am using the following code in the Success method of the Ajax call in JS.

window.location.href = "Some Url Path" + Id(Say 123456);

The problem is that the entire page is being loaded after the ajax call. Please suggest me a solution so that the partial part of the page has to be loaded.

Answer 1

You can load a portion using jQuery load() method

$('#divId').load("url");

Description: Load data from the server and place the returned HTML into the matched element, Reference

Syntax .load( url [, data ] [, complete(responseText, textStatus, XMLHttpRequest) ] )

url Type: String A string containing the URL to which the request is sent.

data

Type: PlainObject or String A plain object or string that is sent to the server with the request.

complete(responseText, textStatus, XMLHttpRequest)

Type: Function() A callback function that is executed when the request completes.

Answer 2

By using $('#divId').html(data) or $('#divId').replaceWith(data) in the ajax success function we can replace a portion of page without reloading whole page. "data" is the partialview returned from controller.