Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Clean up my $.ajax and setTimeout in JQuery...

Posted on 2011-10-21
6
Medium Priority
?
507 Views
Last Modified: 2012-05-12
Hey Guys and Gals,
I have some code I have written in JQuery and it just looks a bit messy and just feels wrong.  Al of the 'display actions' I am doing would be for user experience.  Even though the data is returned in just a few miliseconds, I want to give the feel that the site is working...

The issue I was having is with the .delay() used in the .done() section of Jquery's $.ajax function.  All of the .delay's regardless of time would fire immediatly, so I switched to setTimeout and just timed my display actions.  

Is there a better way to do this?

Here is my code:
$('#apply').click(function(){
		$('#apply').hide();
		$('#status').show();
		var promoCode = document.getElementById('promo').value;
		
		$.ajax({type: "POST",url: "../scripts/ajaxPromo.asp",data: "promo=" + promoCode,}).done(function(promoInfo) {
		  var promoArray = promoInfo.split(":")
		  
		  switch (promoArray[0]) {
			case '-1':
				setTimeout(function() {$('#status').html('<span style="color:#FF0000;">Bad promo code...</span>');}, 1000);
				setTimeout(function() {$('#status').hide();}, 2000);
				setTimeout(function() {$('#status').html('<img src="../images/ajax-loader.gif">&nbsp;Checking code');}, 2100);
				setTimeout(function() {$('#apply').fadeIn();}, 2800);
				break;
			case '0':
				setTimeout(function() {$('#status').html('<span style="color:#2770D0;">Success!');}, 1000);
				setTimeout(function() {$('#promoDisplay').slideDown('fast');},1500);
				setTimeout(function() {$('#promoTitle').html(promoArray[1]);},1000);
				setTimeout(function() {$('#promoTotal').html('Tuition is now: ' + promoArray[2]);},1000);
				break;
			case '1':
				//something here
				break;
			default:
				//same as -1  
		  }
		});
	});

Open in new window


Thanks!
0
Comment
Question by:Slim81
  • 3
  • 3
6 Comments
 
LVL 83

Accepted Solution

by:
leakim971 earned 2000 total points
ID: 37008793
0
 
LVL 4

Author Comment

by:Slim81
ID: 37008833
leakim971,
Thanks for the post.  I spend most of my time fumbling through the Jquery website!  I have seen that documentation before....  

Though I did just notice this paragraph on their site:
"The .delay() method is best for delaying between queued jQuery effects. Because it is limited—it doesn't, for example, offer a way to cancel the delay—.delay() is not a replacement for JavaScript's native setTimeout function, which may be more appropriate for certain use cases."

So maybe I am stuck using setTimeout...


0
 
LVL 83

Expert Comment

by:leakim971
ID: 37008873
jQuery delay is based on this : http://www.hashbangcode.com/blog/enabling-use-delay-pre-jquery-14-531.html

Try it, you don't need to cancel the timer in your case
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 4

Author Comment

by:Slim81
ID: 37008912
thanks for the link, I will check it out and give it a shot when I get back home (which is when I will be able to test it).

Though, I am using JQuery 1.6 , which pulls from Google's CDN (I hope that is the right way to phrase it) .
Example:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>

Open in new window


By adding the block of code you mention in your previous post, will that mess anything up?  To me it looks like it will just replace the Jquery delay...which may work for me.
0
 
LVL 83

Expert Comment

by:leakim971
ID: 37008925
No, you don't need the script on the last link, jQuery already include it.
0
 
LVL 4

Author Comment

by:Slim81
ID: 37008947
Gotcha.  Glad I told you I use 1.6

I will keep toying with it and see what I come up with.  It is just so weird how it doesn't have any delay at all (when using .delay(1000)) , regardless of the time frame I use, the events all happen immediatly....

Hence the use of setTimeout....
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

OverviewThis article demonstrates a simple search form using AJAX. The purpose of the article is to demonstrate how to use the same code to render a page and javascript (JQuery) and AJAX to make subsequent calls to refine the results. The princip…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

564 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question