jQuery and content from AJAX call

#1
Alhazred

Posted 19 September 2010 - 12:41 PM

Learning Programmer

Members
99 posts

I'm creating a one-column site which has only one div where I show the content.
The links in the menu call the content to show through AJAX, everything is ok whith this.
The problem starts when I call a page whith 3 images, a JQuery script should work on these images, but since they are not on the page from the beginning, JQuery can't find the elemnts to work with.

I've found that the .live() function should solve my problem, but since I'm really new to JQuery I can't make it work.
Could anyone help me?

Here the code I have till now.
Main page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
   <title>Title here</title>
    
   <!-- js and css file included here -->

   <!-- JQuery script as I have now -->
   <script type='text/javascript'>
      $(document).ready(function(){
         $("img.up").hover(
            function() {
               $(this).stop().animate({"opacity": "0"}, "slow");
            },
            function() {
               $(this).stop().animate({"opacity": "1"}, "slow");
            }
         );         
      });
   </script>
    
</head>
<body>
<div id="container">
   <div id="header">LOGO</div>
      <div id="navigation">
         <ul id="hor">
            <li><a href="#" class="home" onclick="loadXMLDoc('home.html')">Home</a></li>
            <li><a href="#" class="storia" onclick="loadXMLDoc('storia.html')">Storia</a></li>
            <li><a href="#" class="contatti" onclick="loadXMLDoc('contatti.php')">Contatti</a></li>
            <li><a href="#" class="prodotti" onclick="loadXMLDoc('prodotti.php')">Prodotti</a></li>
         </ul>
      </div>
   <div class="clear"></div>
   <div id="content">
      <?php include("home.html") ?>
   </div>
   <div id="footer">Footer</div>
</div>
</body>
</html>

File that is called from AJAX on which JQery should work

<div class="fadehover">
   <div class="cover">
      <a href="#"><img src="images/cover/immagine1.jpg" class="down"/></a>
      <a href="#"><img src="images/cover/immagine1_bw.jpg" class="up"/></a>
   </div>
   <div class="cover">
      <a href="#"><img src="images/cover/immagine2.jpg" class="down"/></a>
      <a href="#"><img src="images/cover/immagine2_bw.jpg" class="up"/></a>
   </div>
   <div class="cover">
      <a href="#"><img src="images/cover/immagine3.jpg" class="down"/></a>
      <a href="#"><img src="images/cover/immagine3_bw.jpg" class="up"/></a>
   </div>
</div>

#2
gokuajmes

Posted 20 September 2010 - 01:03 AM

Programming God

Members
518 posts

you got this almost correct but since this is a ajax application you should do this the following way

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
   <title>Title here</title>
    

   <script type='text/javascript'>

function requestPage(strPageName){
[COLOR=Orange]$('#content').load(strPageName,fx(0,"slow"));[/COLOR]
}

function fx(strOpac,strSpeed){
         $("img.up").hover(function() {
               $(this).stop().animate({"opacity": strOpac}, strSpeed);
            },
            function() {
               $(this).stop().animate({"opacity": "1"}, "slow");
            }
         );         
}
   </script>
    
</head>
<body>
<div id="container">
   <div id="header">LOGO</div>
      <div id="navigation">
         <ul id="hor">
            <li><a href="#" class="home" onclick="requestPage('home.html')">Home</a></li>
            <li><a href="#" class="storia" onclick="requestPage('storia.html')">Storia</a></li>
            <li><a href="#" class="contatti" onclick="requestPage('contatti.php')">Contatti</a></li>
            <li><a href="#" class="prodotti" onclick="requestPage('prodotti.php')">Prodotti</a></li>
         </ul>
      </div>
   <div class="clear"></div>
   <div id="content">
      <?php include("home.html") ?>
   </div>
   <div id="footer">Footer</div>
</div>
</body>
</html>

i have color coded the statement that is of utmost imprtance
or you could do this with live method of the api as below

[COLOR=#000000]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
   <title>Title here</title>
    
   <!-- js and css file included here -->

   <!-- JQuery script as I have now -->
   <script type='text/javascript'>
      $(document).ready(function(){
         $("img.up").hover(function() {
               $(this).stop().animate({"opacity": "0"}, "slow");
            },
            function() {
               $(this).stop().animate({"opacity": "1"}, "slow");
            }
         )[COLOR=Orange].live('hover',function(){
//write your Fx effects here
});[/COLOR]
[/COLOR][COLOR=#000000]         
      });
   </script>
    
</head>
<body>
<div id="container">
   <div id="header">LOGO</div>
      <div id="navigation">
         <ul id="hor">
            <li><a href="#" class="home" onclick="loadXMLDoc('home.html')">Home</a></li>
            <li><a href="#" class="storia" onclick="loadXMLDoc('storia.html')">Storia</a></li>
            <li><a href="#" class="contatti" onclick="loadXMLDoc('contatti.php')">Contatti</a></li>
            <li><a href="#" class="prodotti" onclick="loadXMLDoc('prodotti.php')">Prodotti</a></li>
         </ul>
      </div>
   <div class="clear"></div>
   <div id="content">
      [COLOR=#0000BB]<?php [/COLOR][COLOR=#007700]include([/COLOR][COLOR=#DD0000]"home.html"[/COLOR][COLOR=#007700]) [/COLOR][COLOR=#0000BB]?>
[/COLOR]   </div>
   <div id="footer">Footer</div>
</div>
</body>
</html>[/COLOR]

Edited by gokuajmes, 20 September 2010 - 01:12 AM.
missed do

Featured on Deeptechtons | the JavaScript forums[Closed Now]| twitter| Facebook| Create a Web2 modal popup control with asp.net ajax modal popup extender

#3
Alhazred

Posted 20 September 2010 - 02:35 AM

Learning Programmer

Members
99 posts

Thanks for your answer.
I'm trying to use the first code but it doesn't look to work to me.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head> 
    <title>Title here</title>

   <!-- JS and CSS files -->

    <script type='text/javascript'>
        function requestPage(strPageName){
            $('#content').load(strPageName,fx(0,"slow"));
        }

        function fx(strOpac,strSpeed){
             $("img.up").hover(function() {
                   $(this).stop().animate({"opacity": strOpac}, strSpeed);
                },
                function() {
                   $(this).stop().animate({"opacity": "1"}, "slow");
                }
             );
        }

    </script>

</head>
<body>
<div id="container">
    <div id="header">LOGO</div>
    <div id="navigation">
        <ul id="hor">
            <li><a href="#" class="home" onclick="requestPage('home.html')">Home</a></li>
            <li><a href="#" class="storia" onclick="requestPage('storia.html')">Storia</a></li>
            <li><a href="#" class="comunicazioni" onclick="requestPage('comunicazioni.php')">Comnicazioni</a></li>
            <li><a href="#" class="prodotti" onclick="requestPage('prodotti.php')">Prodotti</a></li>
        </ul>
    </div>
    <div class="clear"></div>
    <div id="content">
        <?php include("home.html") ?>
    </div>
    <div id="footer">Footer</div>
</div>
</body>

<div id="prod1">
    <a href="#" class="link_prod"><img src="images/cover/immagine1_bw.jpg" class="up"/></a>
</div>
<div id="prod2">
    <a href="#" class="link_prod"><img src="images/cover/immagine2_bw.jpg" class="up"/></a>
</div>
<div id="prod3">
    <a href="#" class="link_prod"><img src="images/cover/immagine3_bw.jpg" class="up"/></a>
</div>

Is there anything wrong?

#4
gokuajmes

Posted 20 September 2010 - 07:33 PM

Programming God

Members
518 posts

Have you included the jQuery library ?
Well what does it say in the firebug console when you click on any of the links in Home, About etc. think it is a problem with the fx() being read literally could you try with this

function fx(strOpac,strSpeed){
             $("img.up").hover(function(){
             $(this).stop().animate({"opacity": strOpac}, strSpeed);}
,function() {
$(this).stop().animate({"opacity": "1"}, "slow");}
             );
}
 function requestPage(strPageName){
            $('#content').load(strPageName,fx(0,"slow"));}

Edited by gokuajmes, 20 September 2010 - 07:43 PM.
added notes

Featured on Deeptechtons | the JavaScript forums[Closed Now]| twitter| Facebook| Create a Web2 modal popup control with asp.net ajax modal popup extender

#5
Alhazred

Posted 20 September 2010 - 10:48 PM

Learning Programmer

Members
99 posts

Yes, I've included the jQuery library 1.4.2

I've just tried this new code, but yet doesn't work.
Firebug says it's all ok both with the new and old code

Posted Image

Expanding the message there's only the same html code I've written in previous post.

#6
Alhazred

Posted 20 September 2010 - 11:54 PM

Learning Programmer

Members
99 posts

Solved changing the load() method like this

$('#content').load(strPageName,function(){fx(0,"slow")});

Thanks for your help :)

#7
gokuajmes

Posted 24 September 2010 - 12:40 AM

Programming God

Members
518 posts

my advice when working with ajax is , use the firebug console if you are making a http request and monitor the request in the Net panel by clicking the Xhr
btw did you understand the code i had provided you with

Edited by gokuajmes, 24 September 2010 - 12:41 AM.
review my code

Featured on Deeptechtons | the JavaScript forums[Closed Now]| twitter| Facebook| Create a Web2 modal popup control with asp.net ajax modal popup extender