[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

Adblocker detected! Please consider reading this notice.

We've detected that you are using AdBlock Plus or some other adblocking software which is preventing the page from fully loading.

We don't have any banner, Flash, animation, obnoxious sound, or popup ad. We do not implement these annoying types of ads!

We need money to operate the site, and almost all of it comes from our online advertising.

Please add wikitechy.com to your ad blocking whitelist or disable your adblocking software.

×