[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.

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

});

Solution 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";
}



Related Searches to javascript tutorial - Redirect request after a jQuery Ajax call