Databases
StackOverflow2013
Postsdbo
POI'm using Ajax to populate my web page, but the populated HTML isn't working
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POI'm using Ajax to populate my web page, but the populated HTML isn't working
    text
    copied!<p>I'm using Ajax to dynamically populate a DIV. I have each page content stored in XML files as CDATA. When a user clicks on a link from the navigation bar, the Ajax loads the XML for that particular page, parses it, and populates the DIV with it's content.</p> <p>Everything is working GREAT, except for one thing. I have a jQuery modal popup whose markup is loaded from that page's XML file. The .js and .css files from the jQuery plugin are all loaded, and when this is HARD CODED (i.e., not loaded from XML), it works fine. But when it's loaded from the XML, the modal doesn't work. </p> <p>When the page is loaded from the XML file- What the page is supposed to do is load the HTML from the XML file, which it does, and there's a hyperlink that when clicked, it's supposed to create the modal popup window. Instead, clicking on the link does NOT fire up the modal popup window.</p> <p>When the page is hard coded- it does everything it's supposed to do.</p> <p>A live example is at:</p> <p><a href="http://mikemarks.net/clientSites/tabras/" rel="nofollow">http://mikemarks.net/clientSites/tabras/</a></p> <p>Click on "The Band", and at the bottom you'll see the hyperlink called "Demo". Clicking on that should bring up a modal popup window, but instead as you can see it just takes you to the top of the page.</p> <p>Below is my markup (notice the div id="copy", which is the placeholder for my HTML content that's loaded from the XML file), my Ajax JavaScript code, and my XML file (which is shown as the markup that's loaded into the div id="copy").</p> <pre><code>&lt;div id="leftTwoThirdsColumn"&gt; &lt;div id="menu"&gt; &lt;ul class="menu"&gt; &lt;li style="width:65px;"&gt;&lt;a id="default" href="#" onclick="makeRequest('xml/default.xml');"&gt;&lt;span&gt;Home&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li style="width:65px;"&gt;&lt;a id="lyrics" href="#" onclick="makeRequest('xml/lyrics.xml');"&gt;&lt;span&gt;Lyrics&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li style="width:110px;"&gt;&lt;a id="merch" href="#" onclick="makeRequest('xml/merch.xml');"&gt;&lt;span&gt;Merchandise&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li style="width:93px;"&gt;&lt;a id="bio" href="#" onclick="makeRequest('xml/bio.xml');"&gt;&lt;span&gt;The Band&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li style="width:80px;"&gt;&lt;a id="contact" href="#" onclick="makeRequest('xml/contact.xml');"&gt;&lt;span&gt;Contact&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li style="width:150px;" class="last"&gt;&lt;a id="friends" href="#" onclick="makeRequest('xml/friends.xml');"&gt;&lt;span&gt;Friends of Tabr&amp;auml;s&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;br /&gt;&lt;br /&gt; &lt;div id="copy"&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p><pre><code>function makeRequest(url) { if(window.XMLHttpRequest) { request = new XMLHttpRequest(); } else if(window.ActiveXObject) { request = new ActiveXObject("MSXML2.XMLHTTP"); }</p> <pre><code>sendRequest(url); </code></pre> <p>}</p> <p>function sendRequest(url) { request.onreadystatechange = onResponse; request.open("GET", url, true); request.send(null); }</p> <p>function checkReadyState(obj) { if(obj.readyState == 0) { document.getElementById('copy').innerHTML = "Sending Request..."; } if(obj.readyState == 1) { document.getElementById('copy').innerHTML = "Loading Response..."; } if(obj.readyState == 2) { document.getElementById('copy').innerHTML = "Response Loaded..."; } if(obj.readyState == 3) { document.getElementById('copy').innerHTML = "Response Ready..."; } if(obj.readyState == 4) { if(obj.status == 200) { return true; } else if(obj.status == 404) { // Add a custom message or redirect the user to another page document.getElementById('copy').innerHTML = "File not found"; } else { document.getElementById('copy').innerHTML = "There was a problem retrieving the XML."; } } }</p> <p>function onResponse() { if(checkReadyState(request)) { var response = request.responseXML.documentElement; var root = new Array(); root = response.getElementsByTagName('<em>'); //alert("Total Number of HTML Elements Found: " + response.getElementsByTagName("</em>").length); var html = ''; for (var i = 0; i &lt; root.length; i++) { var tagName = response.getElementsByTagName("<em>").item(i).nodeName; var tagObj = response.getElementsByTagName("</em>").item(i); html += tagObj.firstChild.nodeValue; } document.getElementById('copy').innerHTML = html; } }</p> <p></pre></code></p> <p><pre><code></p> <p> &lt;div style=&quot;padding-top:5px; margin-left:auto; margin-right:auto; text-align:center;&quot;&gt; &lt;img src=&quot;images/ShawnBioActive.png&quot; /&gt; &lt;img src=&quot;images/JasonBioActive.png&quot; /&gt; &lt;img src=&quot;images/WillBioActive.png&quot; /&gt; &lt;img src=&quot;images/RasoulBioActive.png&quot; /&gt; &lt;img src=&quot;images/bioStrip.png&quot; /&gt; &lt;div id=&apos;basic-modal&apos;&gt;&lt;h3&gt;Basic Modal Dialog&lt;/h3&gt;&lt;p&gt;A basic modal dialog with minimal styling and no additional options. There are a few CSS attributes set internally by SimpleModal, however, SimpleModal relies mostly on style options and/or external CSS for the look and feel.&lt;/p&gt;&lt;input type=&apos;button&apos; name=&apos;basic&apos; value=&apos;Demo&apos; class=&apos;basic&apos;/&gt; or &lt;a href=&apos;#&apos; class=&apos;basic&apos;&gt;Demo&lt;/a&gt;&lt;/div&gt;&lt;script type=&quot;text/javascript&quot; src=&quot;../js/modal/jquery.simplemodal.js&quot;&gt;&lt;/script&gt;&lt;script type=&quot;text/javascript&quot; src=&quot;../js/modal/basic.js&quot;&gt;&lt;/script&gt;&lt;link type=&quot;text/css&quot; href=&quot;../css/modal/demo.css&quot; rel=&quot;stylesheet&quot; media=&quot;screen&quot; /&gt;&lt;link type=&quot;text/css&quot; href=&quot;../css/modal/basic.css&quot; rel=&quot;stylesheet&quot; media=&quot;screen&quot; /&gt;&lt;script type=&apos;text/javascript&apos;&gt;jQuery().ready(function () {$(&apos;#basic-modal-content&apos;).modal();});&lt;/script&gt; &lt;div id=&quot;basic-modal-content&quot;&gt;&lt;h3&gt;Basic Modal Dialog&lt;/h3&gt;&lt;/div&gt;&lt;div style=&apos;display:none&apos;&gt;&lt;img src=&apos;images/modal/basic/x.png&apos; alt=&apos;&apos; /&gt;&lt;/div&gt;&lt;/test2&gt; &lt;/div&gt; </p> <p></pre></code></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload