CODEWITHSUNDEEP
jqueryajax
Ajey
Ajey

Reputation: 8202

jQuery not working when page is called via ajax

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.

Upvotes: 0

Views: 553

Answers (1)

Alqin
Alqin

Reputation: 1305

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>

Upvotes: 2

Related Questions