Databases
StackOverflow2013
Postsdbo
POjQuery not working when page is called via ajax
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery not working when page is called via ajax
    text
    copied!<p>This is the <code>index.html</code> page</p> <pre><code>&lt;head&gt; &lt;script src="js/jquery-1.3.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="js/jquery.easing.1.3.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="js/animated-menu.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="js/call.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="js/fade.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="header"&gt; &lt;div class="menu"&gt; &lt;ul&gt; &lt;li class="green" &gt; &lt;p&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/p&gt; &lt;p class="subtext"&gt;The front page&lt;/p&gt; &lt;/li&gt; &lt;li class="yellow" onclick="showHint(1)"&gt; &lt;p&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/p&gt; &lt;p class="subtext"&gt;More info&lt;/p&gt; &lt;/li&gt; &lt;li class="red" onclick="showHint(2)"&gt; &lt;p&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/p&gt; &lt;p class="subtext"&gt;Get in touch&lt;/p&gt; &lt;/li&gt; &lt;li class="blue"&gt; &lt;p&gt;&lt;a href="#"&gt;Submit&lt;/a&gt;&lt;/p&gt; &lt;p class="subtext"&gt;Send us your stuff!&lt;/p&gt; &lt;/li&gt; &lt;li class="purple"&gt; &lt;p&gt;&lt;a href="#"&gt;Terms&lt;/a&gt;&lt;/p&gt; &lt;p class="subtext"&gt;Legal things&lt;/p&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="content" id="content"&gt;&lt;/div&gt; &lt;/body&gt; </code></pre> <p>This is the <code>contact.html</code> which I'm loading via AJAX</p> <pre><code>&lt;head&gt; &lt;script src="js/call.js" type="text/javascript"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;p&gt;Rollover a menu item to expand it.&lt;/p&gt; &lt;h1&gt;Hello Ajax&lt;/h1&gt; &lt;/body&gt; </code></pre> <p>Here is the <code>fade.js</code> file</p> <pre><code>$(document).ready(function() { $("body").css("display", "none"); $("body").fadeIn(2000); }); </code></pre> <p>And finally here is the ajax call</p> <pre><code>var XMLHttpRequestObject; if(window.XMLHttpRequest) { XMLHttpRequestObject=new XMLHttpRequest(); } else if(window.ActiveXObject) { XMLHttpRequestObject=new ActiveXObject("Microsoft.XMLHTTP"); } function showHint(ide) { if(XMLHttpRequestObject) { XMLHttpRequestObject.onreadystatechange=function() { if(XMLHttpRequestObject.readyState == 4 &amp;&amp; XMLHttpRequestObject.status == 200) { document.getElementById("content").innerHTML=XMLHttpRequestObject.responseText; } } if(ide=="0") { XMLHttpRequestObject.open("GET","index.html",true); } else if(ide=="1") { XMLHttpRequestObject.open("GET","about_me.htm",true); } else if(ide=="2") { XMLHttpRequestObject.open("GET","contact.htm",true); } XMLHttpRequestObject.send(); } } </code></pre> <p>The problem is that when I'm calling the contact page separately, the fade effect is working. But when I'm loading the <code>contact.html</code> via AJAX, the jQuery effect is not working. Please help.</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