Replace current page with ajax content

javascript jquery html ajax

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

javascript jquery html ajax

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.

javascript jquery html ajax

In your ajax callback:

success: function (data) {   $("html").html($(data).find("html").html());}

That will replace the entire page's HTML content with the one received from your AJAX request. Works in Chrome... not sure about IE.

Despite that, I'm not sure why you'd want to include the <head> section... but you can easily modify the above to display just what's in the body of the AJAX response, and append it to a div or even a lightbox. Much nicer.