JavaScript Document.Write Replaces All Body Content When Using Ajax

JavaScript Document.Write Replaces All Body Content When Using AJAX

You can't use document.write once the document has completed loading. If you do, the browser will open a new document that replaces the current.

Use the innerHTML property to put HTML code inside an element:

function gen_output(ad_content){
  document.getElementById('mb_ad').innerHTML = ad_content;
}

Put the element before the script, so that you are sure that it exists when the callback function is called:

i am text before
<div id="mb_ad"></div>
i am text after
<script type="text/javascript" src="mb.js"></script>

It doesn't matter much where you place the script, as nothing will be written to the document where it is.

How can I replace the entire HTML of a page, or its body content, via an AJAX call's success callback?

remove() will remove the body element (instead of just clearing it out). You can use this to match what you are trying to do

$("body").empty();  
$("body").append($(returneddata));

but it would be better to use

$("body").html(returneddata);

You also may want to look into the jQuery load() function which will place the html into the element(s) for you.

jquery replace full document content

use:

document.open();
document.write(myString);
document.close();

You can also try:

    var startHead = myString.indexOf("<head>");
    var endHead = myString.indexOf("</head>");        
    var headString = myString.substring(startHead+6,endHead);

    var startBody = myString.indexOf("<body>");
    var endBody = myString.indexOf("</body>");
    var bodyString = myString.substring(startBody+6,endBody);

    jQuery('head').html(headString);
    jQuery('body').html(bodyString);

Document.write only overwrites the page once

That is the expected behaviour. The write method is used to write content into the page when it is rendering.

It only replaces the page when it's used after the page has completed, because the first time that you use it, it will do an implicit document.open() to start a new stream to write to.

To use it properly to replace the page, call document.open first, then use document.write one or more times to write the content, then call document.close to tell the browser that the new page is complete.

How to replace the entire html webpage with ajax response?

If your response includes the <head> and <body> tags:

$("html").html(response);.

If not, and it's only content, then do:

$("body").html(response);.

Why does writing a script to a page destroy the body tag, leaving a white blank page?

When you write to the document after the document is initially closed by the browser, the effect is to start all over with a fresh, empty document.

Replacing entire page with ajax response from a frame

I can't check right now, but assuming:

Your Ajax call happens inside a frame one level below the main document
Your response contains only the body content

You may try the following code:

document.parent.body.innerHTML = response;

Using Ajax to call the same page makes the body content show twice

After our discussions, we've discovered that your code is working exactly as it should. It is doing exactly what you ask it to do.

Load the page from the server
Click button
Loads the same page via AJAX
Duplicates the page contents into a div on the page
Display duplicate contents

That's what you've asked, that's what you've received.

JavaScript Document.Write Replaces All Body Content When Using Ajax