Replace HTML page with contents retrieved via AJAX

I have an HTML page with a typical structure:

<html>
  <head>
   <script src="..." ></script>
   <style>...</style>
  </head>
  <body>
   content
  </body>
  <script>
    var success_callback = function(data) {
      // REPLACE PAGE CONTENT & STRUCTURE WITH "data"
    }
    ajax(url, params, success_callback);
  </script>
</html>

Do you think it is possible ? I've already tried to give the html tag an id and doing $(id).replace(data); with no success.

Don't ask me why, but that is what I need (I'm working with a special "mashup builder" site... it is a long story).

EDIT : I forgot to say that scripts in the received content have to be executed, even external scripts included using <script src="...">.

The simplest way is to set the new HTML content using:

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

try this with jQuery:

$('body').load( url,[data],[callback] );

Read more at docs.jquery.com / Ajax / load

Here's how to do it in Prototype: $(id).update(data)

And jQuery: $('#id').replaceWith(data)

But document.getElementById(id).innerHTML=data should work too.

EDIT: Prototype and jQuery automatically evaluate scripts for you.

You could try doing

document.getElementById(id).innerHTML = ajax_response

the simplest way is

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

Replace HTML page with contents retrieved via AJAX

Related

Recent Posts