Home/ Questions/Q 6139055
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T17:56:33+00:00

I am requesting with AJAX (using jQuery) a tag which contains a Javascript function

  • 0

I am requesting with AJAX (using jQuery) a tag which contains a Javascript function call to an Apache+PHP server. Here is the HTML and AJAX code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://localhost/LivingLab/javascript/jquery.min.js"></script>
</head>

<body>
<a href="javascript: void(0)" onclick="
    $.post(
        'http://localhost/test.php',    // server target page
        {some_var: 'abc'},              // data to be sent via POST method
        function(data) {                // JS callback function
            $('#container').html(data); // innerHTML of <div id="container"> will be replaced
        }
    )
">Click me!</a>
<div id="container"></div>
</body>
</html>

AJAX requests the page ‘http://localhost/test.php&#8217; which has the following PHP code:

<?php
    echo '<script type="text/javascript"> document.write("Javascript output"); </script>';
?>

When I click on the link, after the AJAX request, the whole page is replaced by “Javascript output”, instead of writing this only inside the div tag with id “container”.

If the PHP server script writes something else, instead of a script tag like this:

<?php echo 'text' ?>

the AJAX call behaves normal, by replacing div with id “container” and not the whole page.

I tried to investigate HTTP data transfered by this pages with Wireshark and it doesn’t seem to be an HTTP problem because server response is exactly how it should be:

<script type="text/javascript"> document.write("Javascript output"); </script>

Running the Javascript code without AJAX does not replace the whole page, this happens only when the script tag is returned using AJAX. A noticed the same behavior in Firefox 3 and 5 and also in Google Chrome.

Why does this happen?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    document.write is normally used during the main load of the page, during which it outputs to the parsing stream that the browser reads to render the main page. If you use it after the initial load of the page is complete, it implicitly does an open on the document, which completely tears down the document and starts fresh with the newly-written content.

    The short version is: Only use document.write during main page load (if then). After the page has loaded, use DOM manipulation instead.

    Example (live copy):

    <body>
  <input type='button' id='theButton' value='Click Me'>
  <script>
    document.write(
      "<p><code>document.write</code> is fine here, during " +
      "the main load of the page.</p>");
    document.getElementById("theButton").onclick = function() {
      document.write(
        "<p>But not here, because the initial " +
         "page load is complete and using " +
         "<code>document.write</code> at this point tears " +
         "down the document and starts  new one.</p>");
    };
  </script>
</body>

    More about from the DOM2 HTML spec, the HTML5 spec, and MDC:

    • document.write: DOM2 | HTML5 | MDC
    • document.open: DOM2 | HTML5 | MDC
      (called implicitly by document.write if you call it once the page is loaded)
    • 0