3 Replies - 1761 Views - Last Post: 06 April 2010 - 08:21 AM

#1 six_sic6   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 14
  • Joined: 20-August 09

JQuey is not working

Posted 03 April 2010 - 09:17 AM

My page1.php has the following script. It calls page2.php through

$.ajax and append the contents of page2.php in div="main-content" of

page1.php


pgae1.php has the following code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" 

/>
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="page1.css" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
   $(document).ready(function()
   {
         $("#intro").clone().appendTo("#main-content").show();
         $("#selfIntro").clone().appendTo("#main-content").show();
		 $("#menu-bar ul li a").click(function()
		 {
		     		var content_show = $(this).attr

("title");
	                alert(content_show);
					if(content_show=="resources")
					{
					      
						  $.ajax({
							url: 

"page2.php",
							success: 

function(html){
							$("#main-

content").html(html);
					                               

}
				                }); 
                    }

		 });
		
   });
</script>






</head>

<body>
     <div style="width:100%; background-color:#2f2626;" align="center">
	      
		  <img src="demo-title.png" alt="headImg" />
</div>

     <div id="top-bar">
	     <img src="logo.png" style="float:left;" />
	 </div>
	 
	<div id="menu-bar">
	     <ul>
			  <li><a href="#" 

title="home"><span>Home</span></a></li>
			  <li><a href="#" 

title="resources"><span>Resources</span></a></li>
			  <li><a href="#" 

title="contact"><span>Contact</span></a></li>
		 </ul>
	</div>
	
	
	<div id="main-content">
	
	
	
	</div>
	
	
	
	
	
	  <div id="footer"> 
			    &copy;2010 <a href="http://css-

tricks.com">Golam Mostafa</a> 
	  </div>
	 
	 
</body>


<img src="god loves the dead_covergod.jpg" alt="Golam Mostafa" 

id="intro" style="display:none; float:left;"/>
 <p style="font-style:italic; font-size:18px;display:none; " 

id="selfIntro">
		 
		  Hellow. I am Yeasin Abedin. An enthusianstic 

engineering<br />
		  and a beloving muslim. I am studying BSC engineering 

in Khulna University of<br />
		  Engineering and Technology. My subject in Computer 

Science and Engineering. Many people thinks that bla
		 
	</p> 
</html>




page2.php has the following code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" 

/>
<title>Untitled Document</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function()
  {
       $(".accordionContent img").click(function()
	   {
	        alert("SUCCES");
	   });
  });



</script>
</head>

<body>
	<div id="resource-section" style="font-size:18px; width:40%;">
	    <div class="accordionButton">MicroTalk - 8085</div>
	    <div class="accordionContent"><img src="demo-title.png" 

/><a href="#">Details</a></div>
	    <div class="accordionButton">MicroTalk - 8086</div>
	    <div class="accordionContent"><img src="logo.png" /><a 

href="#" title="8086">Details</a></div>
	    <div class="accordionButton">MicroTalk - 8051</div>
	    <div class="accordionContent">Content 1<br />Short 

Example</div>
	    <div class="accordionButton">MicroTalk - 80286</div>
	    <div class="accordionContent">Content 4<br />>Extra Long 

Example</div>
	</div>

</body>
</html>



Problem is when page2.php is placed on "main-content" of page1.php..the

following script of page2.php is not working

<script type="text/javascript">
  $(document).ready(function()
  {
       $(".accordionContent a").click(function()
	   {
	        alert("SUCCES");
	   });
  });



</script>



Is This A Good Question/Topic? 0
  • +

Replies To: JQuey is not working

#2 PsychoCoder   User is offline

  • Google.Sucks.Init(true);
  • member icon

Reputation: 1660
  • View blog
  • Posts: 19,853
  • Joined: 26-July 07

Re: JQuey is not working

Posted 03 April 2010 - 09:18 AM

Let's move this to the jQuery forum :)
Was This Post Helpful? 0
  • +
  • -

#3 girasquid   User is offline

  • Barbarbar
  • member icon

Reputation: 108
  • View blog
  • Posts: 1,825
  • Joined: 03-October 06

Re: JQuey is not working

Posted 06 April 2010 - 08:12 AM

You may want to double-check your HTML - I can't see anything with the class accordionContent.
Was This Post Helpful? 0
  • +
  • -

#4 webhoststudent   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 05-April 10

Re: JQuey is not working

Posted 06 April 2010 - 08:21 AM

you should not put script in page2.php. This is the page that you are fetching via ajax. The correct way to do it would be using a callback:

<script type="text/javascript">
   $(document).ready(function(){
    $("#intro").clone().appendTo("#main-content").show();
    $("#selfIntro").clone().appendTo("#main-content").show();
       $("#menu-bar ul li a").click(function(){
              var content_show = $(this).attr("title");
              alert(content_show);
              
              if(content_show=="resources"){
                          $.ajax({
                              url: "page2.php",
                              success: function(html){  
                                    $("#main-content").html(html);
                                    
                                    // this is your callback function
                                    // put your function here instead
                                    
                                    $(".accordionContent a").click(function(){
                                        alert("SUCCES");
                                    });

                                  }
                          }); 
              }
       });
   });
</script>



Was This Post Helpful? 0
  • +
  • -

Page 1 of 1