[Solved-5 Solutions] Redirect request after a jQuery Ajax call - javascript tutorial
Problem:
How to manage a redirect request after a jQuery Ajax call ?
Solution 1:
There are 2 possible responses for performing ajax request.They are
- Redirects the browser to a new page
- Replaces an existing HTML form on the current page with a new one.
The jQuery code for doing these request
$.ajax({
type: "POST",
url: required_Url,
data: required_Body,
dataType: "json",
success: function(data, txtStatus) {
if (data.redirect) {
// data.redirect contains the string URL to redirect to
window.location.href = data.redirect;
}
else {
// data.form contains the HTML replacement form
$("#my_form").replaceWith(data.form);
}
}
});
Solution 2:
We also add custom header to the response.
$.ajax({
type: "POST",
url: requiredrequired__Url,
data: required_Body,
dataType: "json",
success: function(data, txtStatus) {
if (data.redirect) {
// data.redirect contains the string URL to redirect to
window.location.href = data.redirect;
}
else {
// data.form contains the HTML for the replacement form
$("#myform").replaceWith(data.form);
}
}
});
public action_result Index(){
if (!HttpContext.User.Identity.IsAuthenticated)
{
HttpContext.Response.AddHeader("REQUIRES_AUTH","1");
}
return View();
}
The success event not allowed the header that why bind a JavaScript function to the ajaxSuccess event and checking to see if the header exists.
$(document).ajaxSuccess(function(event, request, settings) {
if (request.getResponseHeader('REQUIRES_AUTH') === '1') {
window.location = '/';
}
});To set the header on the response take care after the redirect because the page may be transparent to the ajaxSucces handler.
Read Also
Abort Ajax request using jQuerySolution 3:
- To implemented the solution using wrapper for the callback function of the Ajax call.
- The wrapper checks the speicfic element is exist then returned HTML chunk.
- If the element was found then the wrapper executed a redirection.
- Otherwise, the wrapper forwarded the call to the actual callback function.
Example for wrapper function:
$(document).ajaxSuccess(function(event, request, settings) {
if (request.getResponseHeader('REQUIRES_AUTH') === '1') {
window.location = '/';
}
});
function callback_wrapper(data, fun){
if($("#myForm", data).length > 0)
top.location.href="wikitechy.htm";//redirection
else
fun(data);
}
Making an Ajax call,we simply using the Ajax handler
$.post("myAjaxHandler",
{
p1: foo,
p2: bar
},
function(data){
callback_wrapper(data, myActualCB);
},
"html"
);
Solution 4:
Another way of doing ajax redirection is to simply reload the page and redirect when we get returned contentType of text/html
$.ajax(
error: function (jqXHR, timeout, message) {
var contentType = jqXHR.getResponseHeader("Content-Type");
if (jqXHR.status === 200 && contentType.toLowerCase().indexOf("text/html") >= 0) {
// assume that our login has expired - reload our current page
window.location.reload();
}
});
Read Also
jQuery Ajax file uploadSolution 5:
Use the low-level $.ajax() call:
$.ajax({
url: required_Url,
data: { },
complete: function(xmlHttp) {
// xmlHttp is a XMLHttpRquest object
alert(xmlHttp.status);
}
});
Also try this
if (xmlHttp.code != 200) {
top.location.href = "redirect_Url";
}