[Javascript] How do I replace the entire HTML node using jQuery


Answers

You could just strip out the html tags, and then put everything inside the html element:

$('html').html(myString.replace(/<html>(.*)<\/html>/, "$1"));
Question

I have a string which looks like:

<html><head><title>example</title></head><body>some example text</body></html>

I get this string returned as a result to an AJAX request.

I would like the browser to render and display that string. The idea would be to do something like:

$('html').parent().html(myString);

Well, that doesn't work. I've attempted to use an IFRAME but I haven't figured out how to get that to work either.

Note: It is impossible for me to change this string. It is also impossible for me to regenerate this string in a subsequent call to the server (otherwise I could just redirect the browser to that url).




At least in firefox(47.0) the solution:

var newDoc = document.open("text/html", "replace");
newDoc.write(response);
newDoc.close(); 

does not work as suggested since pressing the back button on firefox still loads the previous history entry - i.e. the entire point of using "replace" is to avoid having users click their back button only to be greeted by the view of the page before the last time the document.write() was called. The way of doing this that does not cause the aforementioned effect is simply calling methods on the document object directly:

document.open("text/html", "replace");
document.write(response);
document.close();

Using the replace option not only avoids filling the users history with garbage, but also helps in dealing with the issues that arise from the weird ways in which browsers often handle the history entries created by javascript, as sometimes allowing the browser to log the changes made to the document by javascript in history might have unexpected results when handling the back/forward operations (for instance adding 'wyciwyg://(somenumber)' to the url after performing a document.write() on the document that had its history reverted to a previous state).




I am doing it this way and its working.

$('#form').submit(function(){
    $.ajax({
      url: $('#form').attr('action'),
      type: 'POST',
      data : $('#form').serialize(),
      success: function(){
        console.log('form submitted.');
      }
    });
    return false;
});



Try this

 $('html').replaceWith(myString);



How do I capture response of form.submit

You won't be able to do this easily with plain javascript. When you post a form, the form inputs are sent to the server and your page is refreshed - the data is handled on the server side. That is, the submit() function doesn't actually return anything, it just sends the form data to the server.

If you really wanted to get the response in Javascript (without the page refreshing), then you'll need to use AJAX, and when you start talking about using AJAX, you'll need to use a library. jQuery is by far the most popular, and my personal favourite. There's a great plugin for jQuery called Form which will do exactly what it sounds like you want.

Here's how you'd use jQuery and that plugin:

$('#myForm')
    .ajaxForm({
        url : 'myscript.php', // or whatever
        dataType : 'json',
        success : function (response) {
            alert("The server says: " + response);
        }
    })
;



No jquery:

var newString = [
      "<!doctype html>"
    , "<html>"
    , "<head>"
    , "</head>"
    , "<body>"
    , "<h1>new content</h1>"
    , "</body>"
    , "</html>"
].join("");

document.getElementById('myIframeId').contentDocument.documentElement.outerHTML = newString;