Ajax request works, but with no CSS and JavaScript

Question

Below is a snippet of code I have for an Ajax request. The request works, but when the request is processed the page appears without any of the CSS or JS (even though I have everything in the same directory). To test this I made the request point to a page on my site that already existed. Any help? Thanks in advance.

<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {
  xmlhttp=new XMLHttpRequest();
  }
else
  {
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","ajaxtest.html",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>
</html>

ajaxtest.html

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://swip.codylindley.com/jquery.DOMWindow.js"></script>

<p><a href="#inlineContent" class="defaultDOMWindow">Open DOM Window</a></p> 
<script type="text/javascript"> 
$('.defaultDOMWindow').openDOMWindow({ 
eventType:'click', 
loader:1, 
loaderImagePath:'animationProcessing.gif', 
loaderHeight:16, 
loaderWidth:17 
}); 
</script> 
<div id="inlineContent" style=" display:none;"> 
<p>Inline Content</p> 
<p>Click overlay to close window</p> 
<p>Consequat ea Investigationes in enim congue. Option velit volutpat quod blandit ex. Congue parum praesent aliquam nam clari. Qui praesent quam sollemnes id vulputate. In imperdiet diam at sequitur et. Minim delenit in dolor dolore typi. Erat delenit laoreet quinta videntur id. Ii at qui eum ut usus. Quis etiam suscipit iusto elit dolor. Dolor congue eodem adipiscing cum placerat. </p> 
<p>Erat usus lorem adipiscing non in. Nobis claram iusto et dolore facilisis. Claritatem decima velit decima ipsum wisi. Quinta ullamcorper sollemnes usus aliquip in. Ut aliquip velit tempor facit putamus. Habent duis et option quod facer. Delenit facer consequat seacula molestie notare. Qui tincidunt nobis lectores eleifend eorum. Decima usus facer id parum legere. Nonummy nonummy facilisis sit qui eodem. </p> 
</div>

Answer 1

This is how it's supposed to work.

AJAX call is not, in terms of behaviour, a browser window. It will fetch ajaxtest.html and only this file. It will not attempt to fetch any other files referenced by ajaxtest.html.

If you want to put some webpage inside your document, use iframe:

<iframe id="iframe_test" src="ajaxtest.htm"></iframe>

You can then load some document to this iframe by calling:

document.getElementById('iframe_test').src = 'ajaxtest2.html';

Answer 2

Correction is as below.

document.getElementById('myDiv').innerHTML=xmlhttp.responseText;

Do not use double quote for getElementById

and window is not opening because you are dynamically adding DOM so events are not binding for dynamically loaded content.

Answer 3

I finally found the solution.

// for firing CSS after HTML response

function csstuff() 
{
    $('selector').css('var', 'val');
}

// for firing JavaScript after HTML response

function domWinInit(){ 
    //include the code from 
    (http://swip.codylindley.com/jquery.DOMWindow.js)
}

function domClick(){ 
    $('.defaultDOMWindow').openDOMWindow({ 
      eventType:'click', 
      loader:1, 
      loaderImagePath:'animationProcessing.gif', 
      loaderHeight:16, 
      loaderWidth:17 
    });  
}

The success case is when status==200 and readyState==4, fire your js & css functions after inserted the HTML response

xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById('myDiv').innerHTML=xmlhttp.responseText;

        // CSS & JavaScript firing goes here
        csstuff();
        domWinInit();
        domClick();
    }
}

Thanks for your replays.

Ajax request works, but with no CSS and JavaScript

Question

3 answers

solution1
1 2013-03-05 11:04:37

solution2
0 2013-03-05 11:52:56

solution3
0 ACCPTED 2013-03-06 05:58:04

Ajax request works, but with no CSS and JavaScript

Question

3 answers

solution1 1 2013-03-05 11:04:37

solution2 0 2013-03-05 11:52:56

solution3 0 ACCPTED 2013-03-06 05:58:04

solution1
1 2013-03-05 11:04:37

solution2
0 2013-03-05 11:52:56

solution3
0 ACCPTED 2013-03-06 05:58:04