Replace current page with ajax content

Question

I have a page with a dialog window which sends ajax post data to server and receives a response. During development, there can be two responses - one regular (this is not th

Answer 1

Configure jQuery ajax setup as follows:

$.ajaxSetup({
    error: handleXhrError
});

where handleXhrError function look like this:

function handleXhrError(xhr) {
    document.open();
    document.write(xhr.responseText);
    document.close();
}

See also:

• Handling of server-side HTTP 4nn/5nn errors in jQuery

Answer 2

You may also try to use data URL's, the latest versions of the major browsers supporting it:

function utf8_to_b64( str ) {
    return window.btoa(unescape(encodeURIComponent( str )));
}

function loadHtml(html)
{
    localtion.href='data:text/html;base64,'+utf8_to_b64(html);
}

This way, you can load any html page you want in runtime.

Answer 3

Just figured this out as easy as

document.body.innerHTML = YourAjaxrequest.responseText;

_______________________________________________^ up here is what over writes your current HTML page with the response.

request.onreadystatechange = function() {
      if (request.readyState == 1) {
        document.getElementById('sus').innerHTML = "SENDING.......";
    } 
      if (request.readyState == 3){
        document.getElementById('sus').innerHTML = "SENDING >>>>>>>>>>>>>";

    }

     if (request.readyState == 4 && request.status == 200) {

        //document.getElementById('sus').innerHTML = request.responseText;

    document.body.innerHTML = request.responseText;


     }
  }
   request.send(formD);



  },false);