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>

When you click on Open DOM Window it will open window or not ? — Devang Rathod
– Devang Rathod, Commented Mar 5, 2013 at 11:36

kamituel · Accepted Answer · 2013-03-05 11:04:37Z

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';

answered Mar 5, 2013 at 11:04

kamituel

36.2k6 gold badges86 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Toping Over a year ago

" It will fetch ajaxtest.html and only this file" untrue

kamituel Over a year ago

What other files would be fetched? From MDN page: "It provides an easy way to retrieve data at a URL.".

Devang Rathod · Accepted Answer · 2013-03-05 11:58:04Z

0

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.

edited Mar 5, 2013 at 11:58

answered Mar 5, 2013 at 11:52

Devang Rathod

6,7342 gold badges25 silver badges32 bronze badges

2 Comments

6339 Over a year ago

so, what should I do to dynamically load content with events!

Devang Rathod Over a year ago

now i also cant help , because i don't have further idea. but even i will try to help you if i will find solution for this.

6339 · Accepted Answer · 2013-03-06 05:58:04Z

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.

Collectives™ on Stack Overflow

Ajax request works, but with no CSS and JavaScript

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related