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 the question) or one with an error. Server returns code 500 and a page with lot of debug informations. This is a regular page returned from a framework and contains some javascript code. I want to be able to display this error page in case it happens.

The problem is, I can not simply attach the returned result to body element or open a new link in a new page and load this error again. I simply get a html page instead of data and I have to display the page (in current window or in another one).

I am using jQuery.

Please read it carefully. It is not text what I get with the error, it is whole html page I need to display. No text, no changes, no extraction just regular html page with some javascript functionality (defined in head section of returned code). I need to replace current page with this one or create new window with returned html code (head section too, not body section only) — Bruce, Dec 08 '10 at 17:53

score 32 · Accepted Answer · edited May 23 '17 at 12:18

32

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

unlike other answers, an approach NOT using document.write(); though slower in performance. upvoted. – user3526 Aug 27 '14 at 18:50
Unfortunately, this no longer seems to work in FF for html containing links, since data urls no longer inherit the security context. For details,see [here](https://developer.mozilla.org/en-US/docs/Web/HTTP/data_URIs#Security) (though the note only refers to data uris in the browser's location bar, this also seems to apply to the technique you've suggested [which I still upvoted for its elegance] ). Possibly I'm missing something evident ... – collapsar Mar 17 '16 at 11:55

score 2 · Answer 3 · answered Jul 22 '13 at 11:49

Here is an example of how to change either if the response is a url or a html content (using django\php)

        var xmlhttp;
        xmlhttp=new XMLHttpRequest();

        xmlhttp.onreadystatechange=function()
        {
            var replace_t = '{{ params.replace_t }}';
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                if(replace_t == 'location')
                    window.location.replace(xmlhttp.responseText);
                else if(replace_t == 'content')
                {
                    document.open();
                    document.write(xmlhttp.responseText);
                    document.close();
                } 
            }
        }

        xmlhttp.open("GET",SOME_ASYNC_HANDLER_URL,true);
        xmlhttp.send();

score 2 · Answer 4 · answered Dec 10 '10 at 00:44

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.

score 1 · Answer 5 · answered Dec 09 '10 at 00:59

1

I found this solution. I don't know if it si correct, but for Opera and Firefox it is working.

var error_win = window.open(
   '',
   'Server error',
   'status=0,scrollbars=1, location=0'
);
error_win.document.write(XMLHttpRequest.responseText);

answered Dec 09 '10 at 00:59

Bruce

1,380
2
13
17

The only drawback of this approach is that the onload event isn't fired but it is still better than nothing – Bruce Dec 09 '10 at 23:23
1

My code is not ok, missing error_win.document.close(). After that, the onload event is fired and the page works as it should – Bruce Dec 13 '10 at 01:17

score 0 · Answer 6 · answered Jan 18 '15 at 02:44

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);

score 0 · Answer 7 · answered Dec 08 '10 at 13:41

0

Have you tried just simply creating an element and inserting the returned error page into the element? I do this with error pages and jQuery.

    var errorContainer = $( '<div/>' );
    errorContainer.html( errorTextResponse );
    errorContainer.appendTo( $( 'body' ) );

answered Dec 08 '10 at 13:41

Shane Tomlinson

3,310
3
19
12

What will happen to the head section of the page I need to display? Head section loads javascript and css files – Bruce Dec 08 '10 at 18:03

score 0 · Answer 8 · answered Dec 08 '10 at 14:12

I may be misunderstanding, but do you know what elements from the result you specifically want to display? You could trying something like this:

  success: function(data){
               //store the response
               var $response=$(data);
               //use .find() to locate the div or whatever else you need
               var errorMessage = $response.find('#warning').text();
               alert(errorMessage);      
            }

Is that what you were looking for?

score 0 · Answer 9 · answered Dec 10 '10 at 01:16

I don't think there's any way to do that. Iframes are meant for loading other pages and there's no other sandbox in which to dump a standalone page -- that's what frames were designed for.

It might be difficult with the framework you're using, but it's probably worthwhile to have it generate different errors for your Ajax requests. My Ajax pages will only ever send

{"exit": 1, "message": "As in the shell, a non-zero exit is an error and this is why..."}

Replace current page with ajax content

9 Answers9

See also:

Linked