jQuery not working when page is called via ajax

Question

This is the index.html page

<head>
    <script src="js/jquery-1.3.js" type="text/javascript"></script>  
    <script src="js/jquery.easing.1.3.js" type="text/javascript"></script>  
    <script src="js/animated-menu.js" type="text/javascript"></script>  
    <script src="js/call.js" type="text/javascript"></script>    
    <script type="text/javascript" src="js/fade.js"></script>
</head>  

<body>
    <div class="header">         
        <div class="menu">
            <ul>  
                <li class="green" >  
                    <p><a href="index.html">Home</a></p>  
                    <p class="subtext">The front page</p>  
                </li>  
                <li class="yellow" onclick="showHint(1)">  
                    <p><a href="#">About</a></p>  
                    <p class="subtext">More info</p>  
                </li>  
                <li class="red" onclick="showHint(2)">  
                    <p><a href="#">Contact</a></p>  
                    <p class="subtext">Get in touch</p>  
                </li>  
                <li class="blue">  
                    <p><a href="#">Submit</a></p>  
                    <p class="subtext">Send us your stuff!</p>  
                </li>  
                <li class="purple">  
                    <p><a href="#">Terms</a></p>  
                    <p class="subtext">Legal things</p>  
                </li>  
            </ul>
        </div>
    </div> 
    <div class="content" id="content"></div>
</body>

This is the contact.html which I'm loading via AJAX

<head>
    <script src="js/call.js" type="text/javascript"></script>
</head>

<body>
    <p>Rollover a menu item to expand it.</p>  
<h1>Hello Ajax</h1>    
</body>

Here is the fade.js file

$(document).ready(function() {
$("body").css("display", "none");
    $("body").fadeIn(2000);
});

And finally here is the ajax call

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 && 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();
    }
}

The problem is that when I'm calling the contact page separately, the fade effect is working. But when I'm loading the contact.html via AJAX, the jQuery effect is not working. Please help.

I don't see anything that resembles jQuery method calls.

Explosion Pills
– Explosion Pills

2013-04-10 05:59:48 +00:00
Commented Apr 10, 2013 at 5:59 — Explosion Pills
– Explosion Pills, Commented Apr 10, 2013 at 5:59
sorry , post updated now

Ajey
– Ajey

2013-04-10 06:01:58 +00:00
Commented Apr 10, 2013 at 6:01 — Ajey
– Ajey, Commented Apr 10, 2013 at 6:01

Alqin · Accepted Answer · 2013-04-10 07:56:49Z

2

You also need to include in contact.html, all necessary libraries as given below:

<head>
    <script src="js/jquery-1.3.js" type="text/javascript"></script>  
    <script src="js/jquery.easing.1.3.js" type="text/javascript"></script>  
    <script src="js/animated-menu.js" type="text/javascript"></script>  
    <script src="js/call.js" type="text/javascript"></script>    
    <script type="text/javascript" src="js/fade.js"></script>
</head>

EDIT:

First you should learn how to use jQuery's ajax: http://api.jquery.com/category/ajax/, also include the latest version of the library if you can.

Second I think you want the fade in effect on body after every ajax call. In that case in contact.htm you only need to have the content from the body. Everything put together bellow:

<html>
<head>
    <script src="js/jquery-1.3.js" type="text/javascript"></script>  
     <script src="js/jquery.easing.1.3.js" type="text/javascript"></script>  
     <script src="js/animated-menu.js" type="text/javascript"></script>    
    <script type="text/javascript">
    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 && XMLHttpRequestObject.status == 200)
                {
                    document.getElementById("content").innerHTML=XMLHttpRequestObject.responseText;

                    $("body").css("display", "none");
                    $("body").fadeIn(2000);
                }
            }
            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();
    }
}
    </script>    
    <script type="text/javascript">
    $(document).ready(function() {
$("body").css("display", "none");
    $("body").fadeIn(2000);
});
    </script>
</head>  

<body>
    <div class="header">         
        <div class="menu">
            <ul>  
                <li class="green" >  
                    <p><a href="index.html">Home</a></p>  
                    <p class="subtext">The front page</p>  
                </li>  
                <li class="yellow" onclick="showHint(1)">  
                    <p><a href="#">About</a></p>  
                    <p class="subtext">More info</p>  
                </li>  
                <li class="red" onclick="showHint(2)">  
                    <p><a href="#">Contact</a></p>  
                    <p class="subtext">Get in touch</p>  
                </li>  
                <li class="blue">  
                    <p><a href="#">Submit</a></p>  
                    <p class="subtext">Send us your stuff!</p>  
                </li>  
                <li class="purple">  
                    <p><a href="#">Terms</a></p>  
                    <p class="subtext">Legal things</p>  
                </li>  
            </ul>
        </div>
    </div> 
    <div class="content" id="content"></div>
</body> 
</html>

Your contact.html:

<p>Rollover a menu item to expand it.</p>

edited Apr 10, 2013 at 7:56

answered Apr 10, 2013 at 6:02

Alqin

1,3054 gold badges17 silver badges35 bronze badges

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

4 Comments

Ajey Over a year ago

did that , but too not working.!! actually the scripts are not getting called when the page is loaded via ajax. any solution for this ?

Alqin Over a year ago

Edited the answer. See if that works for you now. The most important part is that you call the fadein function for the body after document.getElementById("content").innerHTML=XMLHttpRequestObject.responseText;

Ajey Over a year ago

Thx a lot man , this is working . But what if i want a external jquery script to be executed after every ajax call ? pls help :)

Alqin Over a year ago

You place that script in the head of the index.html and any function you want to add in the same place you placed fadein function, inside if(XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) { }

Collectives™ on Stack Overflow

jQuery not working when page is called via ajax

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related