JavaScript / DHTML / AJAX RSS JavaScript / DHTML / AJAX RSS

Easy as for jQuery GURUS!

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Reply

•
•
Join Date: Jul 2009
Posts: 25
Reputation: ablitz is an unknown quantity at this point 
Solved Threads: 0
ablitz ablitz is offline Offline
Light Poster

Easy as for jQuery GURUS!

 
0
  #1
Oct 22nd, 2009
Hi guys, I spent the whole day (thats 8 hours straight) trying to get a simple jQuery function to work but failed miserably!!! I very very new to the jQ scene and I know I have a lot of catching up to do!
Could somebody get this to work for me ???

All i want is when user clicks is:
1.the box with info fades out
2. when data returned from the database the box fades in with the new data!

What happens now is while the box fading out i can see new set of data already loaded and thats a complete FAIL of what I interned to do. ANY HELP IS GREATLY APPRECIATED! Peace.

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. $(document).ready(function() {
  2.  
  3. 		$("ul.sc_menu a").click(function() 
  4. 		{
  5.  
  6. 			$('#content #mainbg #infobox #trackinfo').animate({opacity:"0"});
  7.  
  8. 				$.post('projects-agent.php', {'title': $(this).text()}, function(data) 
  9. 				{
  10. 					$('#content #mainbg #infobox #trackinfo').html(data);
  11. 					$('#content #mainbg #infobox #trackinfo').animate({opacity:"1"});
  12.  
  13. 				});
  14. 			return false;
  15. 		});
  16. 	});
Last edited by peter_budo; 34 Days Ago at 5:15 am. Reason: Keep It Organized - For easy readability, always wrap programming code within posts in [code] (code blocks)
Reply With Quote Quick reply to this message  
•
•
Join Date: Jul 2006
Posts: 828
Reputation: pritaeas will become famous soon enough pritaeas will become famous soon enough 
Solved Threads: 136
Sponsor
pritaeas's Avatar
pritaeas pritaeas is offline Offline
Practically a Posting Shark
 
0
  #2
Oct 22nd, 2009
It is possible to attach a callback function to the animate() function. This callback is called after the animation is done. Put your post in that function. See http://docs.jquery.com/Effects/animate
"If it is NOT source, it is NOT software."
-- NASA
Reply With Quote Quick reply to this message  
•
•
Join Date: Jul 2009
Posts: 25
Reputation: ablitz is an unknown quantity at this point 
Solved Threads: 0
ablitz ablitz is offline Offline
Light Poster
 
0
  #3
Oct 22nd, 2009
hi thank you for your reply, its easier said than done, i can't get the syntax right! could you please kindly rewrite the code? cheers
Reply With Quote Quick reply to this message  
•
•
Join Date: Jul 2009
Posts: 25
Reputation: ablitz is an unknown quantity at this point 
Solved Threads: 0
ablitz ablitz is offline Offline
Light Poster
 
0
  #4
Oct 22nd, 2009
This is what I've tried and it didnt work

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. 	$(document).ready(function() {
  2. 		soundManager.debugMode = false;
  3. 		$("ul.sc_menu a").click(function() 
  4. 		{
  5. 			//$('#mainbg').fadeOut("slow");
  6. 			$('#content #mainbg #infobox #trackinfo').animate({opacity:"0"},function(){$.post('projects-agent.php', {'title': $(this).text()},function(data){$('#content #mainbg #infobox #trackinfo').html(data);$('#content #mainbg #infobox #trackinfo').animate({opacity:"1"})});
  7.  
  8. 				;
  9.  
  10. 					threeSixtyPlayer.init();
  11. 				});
  12. 			return false;
  13. 		});
  14. 	});
Reply With Quote Quick reply to this message  
•
•
Join Date: Jul 2009
Posts: 25
Reputation: ablitz is an unknown quantity at this point 
Solved Threads: 0
ablitz ablitz is offline Offline
Light Poster
 
0
  #5
Oct 22nd, 2009
This is what I've tried and it didnt work

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. 	$(document).ready(function() {
  2. 		soundManager.debugMode = false;
  3. 		$("ul.sc_menu a").click(function() 
  4. 		{
  5. 			//$('#mainbg').fadeOut("slow");
  6. 			$('#content #mainbg #infobox #trackinfo').animate({opacity:"0"},function(){$.post('projects-agent.php', {'title': $(this).text()},function(data){$('#content #mainbg #infobox #trackinfo').html(data);$('#content #mainbg #infobox #trackinfo').animate({opacity:"1"})});
  7.  
  8. 				;
  9.  
  10. 					threeSixtyPlayer.init();
  11. 				});
  12. 			return false;
  13. 		});
  14. 	});
Reply With Quote Quick reply to this message  
•
•
Join Date: Jul 2009
Posts: 178
Reputation: codejoust is an unknown quantity at this point 
Solved Threads: 18
codejoust's Avatar
codejoust codejoust is offline Offline
Junior Poster
 
0
  #6
Oct 22nd, 2009
javascript Syntax (Toggle Plain Text) 
  1. $(function(){
  2.  
  3. 		$("ul.sc_menu a").click(function() {
  4. 			$('#content #mainbg #infobox #trackinfo').animate({opacity:"0"},
  5. function(){
  6. alert('animated');
  7. $.post('projects-agent.php', {'title': $(this).text()},
  8. function(data){
  9. alert(data);
  10. $('#content #mainbg #infobox #trackinfo').html(data);
  11. $('#content #mainbg #infobox #trackinfo').fadeIn('fast');
  12. });
  13. 	});
  14. 			return false;
  15. 		});
  16. 	});
Do the alerts go off with the code? It looked like a few syntax errors...
They should be cleaned up. Are you sure the php file is returning a http 200 and data? Also, I'd try to make sure you audioplayer is present.
CodeJoust! Design + Development - Proud User of Ubuntu
Reply With Quote Quick reply to this message  
•
•
Join Date: Jul 2009
Posts: 25
Reputation: ablitz is an unknown quantity at this point 
Solved Threads: 0
ablitz ablitz is offline Offline
Light Poster
 
0
  #7
Oct 22nd, 2009
•
•
•
•
Originally Posted by codejoust View Post
javascript Syntax (Toggle Plain Text) 
  1. $(function(){
  2.  
  3. 		$("ul.sc_menu a").click(function() {
  4. 			$('#content #mainbg #infobox #trackinfo').animate({opacity:"0"},
  5. function(){
  6. alert('animated');
  7. $.post('projects-agent.php', {'title': $(this).text()},
  8. function(data){
  9. alert(data);
  10. $('#content #mainbg #infobox #trackinfo').html(data);
  11. $('#content #mainbg #infobox #trackinfo').fadeIn('fast');
  12. });
  13. 	});
  14. 			return false;
  15. 		});
  16. 	});
Do the alerts go off with the code? It looked like a few syntax errors...
They should be cleaned up. Are you sure the php file is returning a http 200 and data? Also, I'd try to make sure you audioplayer is present.
got it! thank you for your time and help!!
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2006
Posts: 319
Reputation: Luckychap is on a distinguished road 
Solved Threads: 42
Luckychap's Avatar
Luckychap Luckychap is offline Offline
Posting Whiz
 
0
  #8
Oct 22nd, 2009
May this help
javascript Syntax (Toggle Plain Text) 
  1. $(document).ready(function() {
  2.  
  3. $("ul.sc_menu a").click(function() 
  4. {
  5.  
  6. $('#content #mainbg #infobox #trackinfo').animate({opacity:"0"});
  7.  
  8. $.post('projects-agent.php', {'title': $(this).text()}, function(data) 
  9. {
  10. //$('#content #mainbg #infobox #trackinfo').html(data);
  11. $('#content #mainbg #infobox #trackinfo').animate({opacity:"1"}, function(){this.html(data)});
  12.  
  13. });
  14. return false;
  15. });
  16. })
When you think you have done a lot, then be ready for YOUR downfall.
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2006
Posts: 319
Reputation: Luckychap is on a distinguished road 
Solved Threads: 42
Luckychap's Avatar
Luckychap Luckychap is offline Offline
Posting Whiz
 
0
  #9
Oct 22nd, 2009
Even better:
javascript Syntax (Toggle Plain Text) 
  1. $(document).ready(function() {
  2.  
  3.     $("ul.sc_menu a").click(function() 
  4.     {
  5.            $('#content #mainbg #infobox #trackinfo').animate({opacity:"0"}, function(){
  6.                  $.post('projects-agent.php', {'title': $(this).text()}, function(data) 
  7.                  {
  8.                        $('#content #mainbg #infobox #trackinfo').html(data);
  9.                        $('#content #mainbg #infobox #trackinfo').animate({opacity:"1"});
  10.  
  11.                  });
  12.                  return false;
  13.            });
  14.       });
  15. })
When you think you have done a lot, then be ready for YOUR downfall.
Reply With Quote Quick reply to this message  
Reply

Tags
•
•
•
•
Tags
animate, jquery

Quick Reply to Thread
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum
Thread Tools Search this Thread



2.0 ajax animate asp.net bug cakephp class development ie7 javascript jquery libcurl microsoft mimic paypal php post toggle web
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC