Make Ajax Call Wait Until Response

I have a legacy script for a client that I'm trying to get their original authorize.net coding to work with the new acceptJS coding format.

The following code makes a call out to a credit card processing service (authorize.net).  When it returns with validated info, it pops up a dialog box that the person then responds to in order to finalize the processing.

When it makes the call to authorize.net, a token is returned. But because JavaScript is running in asyncronos mode, if the person is on a slow internet connection, the box pops up before a reply has been received from authorize.net.

What I need to have this do is to postpone the processing of the popup dialog until I get a valid answer of either "Error" or "Ok" from authnet. Anything else should wait for that reply.

In the script below, the call to auth.net is made on line 23:  var resp = sendPay2Auth(apiLoginID, clientID, extr);

On the next line it then looks for the value of resp.respcd.  If it says, "Error" it returns false and thus the dialog box does not pop up.

If it returns "Ok" it pops up the dialog box for them to continue.

But the problem is if the call to authorize.net has sent back a response yet, it gives a value of "undefined" in which case it then just does nothing at this point. Which leaves the customer hanging.

So what I'm looking for is how to code this so that the script will just "wait" until it gets back either an "Ok" or and "Error" in the field designated as "resp.respcd"   Any insight would be appreciated.  Thanks.

<script language="javascript">
  var accpeted = false;
  var currency = "$"; 
  var decimals = 0; /** echo with php here **/

$(document).ready(function() {

		// this is the pop-up box that asks for confirmation  CONFOPOP
		// To DEBUG, run on the console logs
		$('#eventPay').submit(function(e) {
			// console.log('At button press');
			if(accpeted == false) {
				e.preventDefault();
				var type = $('[name="method"]:checked').val();
				var amt = $('.due').eq(1).text();
				var ccnum = $('[name="cardNumber"]').val().substr($('[name="cardNumber"]').val().length - 4);
				var acptJS = $('[name="acceptJS"]').val();
				// console.log('At INLINE acceptJSPayButton');
				e.preventDefault();
				var clientID = 'hidden';
				var apiLoginID  = 'hidden';
				var extr = 'zp';
				var resp = sendPay2Auth(apiLoginID, clientID, extr);
				if (resp.respcd === 'Error') return false;
				else if (resp.respcd === 'Ok') {
				     if (ccnum > 0) var payPhrase = 'Your Credit Card ending in ' + ccnum + ' is about to be charged ' + amt;
				     else return false; 
				} // 
				
				var dialogbox = $('<div></div>').html(payPhrase + '.  If you agree to this, click the Ok button or select cancel to exit.');

				//console.log(dialogbox);
				
				dialogbox.dialog({
					buttons: [
						{
							text: "Ok",
							click: function() { 
								accpeted = true;
								$('#eventPay').submit(); 
								$(this).dialog("close"); 
							}
						},{
							text: "Cancel",
							click: function() { 
								accpeted = false; 
								$(this).dialog("close"); 
							}
						}
					]
				});
			}
		});
		

});
</script>

Open in new window

Paul KonstanskiProject SpecialistAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Leonidas DosasCommented:
Check this code that I ma using Promises:
$(document).ready(function() {

		// this is the pop-up box that asks for confirmation  CONFOPOP
		// To DEBUG, run on the console logs
		$('#eventPay').submit(function(e) {
			// console.log('At button press');
			if(accpeted == false) {
				e.preventDefault();
				var type = $('[name="method"]:checked').val();
				var amt = $('.due').eq(1).text();
				var ccnum = $('[name="cardNumber"]').val().substr($('[name="cardNumber"]').val().length - 4);
				var acptJS = $('[name="acceptJS"]').val();
				// console.log('At INLINE acceptJSPayButton');
				e.preventDefault();
				var clientID = 'hidden';
				var apiLoginID  = 'hidden';
				var extr = 'zp';
				var resp = sendPay2Auth(apiLoginID, clientID, extr);
				var respPonse=new Promise(function(resolve,reject){
                if(resp.respcd === 'Error'){
                   resolve(false);
                   }else{
                   if (resp.respcd === 'Ok') {
	               if (ccnum > 0) var payPhrase = 'Your Credit Card ending in ' + ccnum + ' is about to be charged ' + amt;
                   }else{
                   return false;
                  }
                  }
                 });
              
				
				var dialogbox = $('<div></div>').html(payPhrase + '.  If you agree to this, click the Ok button or select cancel to exit.');

				//console.log(dialogbox);
				
				dialogbox.dialog({
					buttons: [
						{
							text: "Ok",
							click: function() { 
								accpeted = true;
								$('#eventPay').submit(); 
								$(this).dialog("close"); 
							}
						},{
							text: "Cancel",
							click: function() { 
								accpeted = false; 
								$(this).dialog("close"); 
							}
						}
					]
				});
			}
		});
		

});

Open in new window

0
Julian HansenCommented:
If you find yourself in a situation where you want to turn an asynch call into a synch call you probably need to re-assess your design.
The correct way to handle this is to put the dialog code in the success handler of the asynch call.

Make your call to the CC check - when that returns proceed with whatever processing is necessary

In your code you have
var resp = sendPay2Auth(apiLoginID, clientID, extr);

Open in new window

Where is sendPay2Auth defined.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Paul KonstanskiProject SpecialistAuthor Commented:
I only posted a small portion of the script. The "sendPay2Auth" function is defined in a separate authorize.js file.

I tried to implement what Leonidas D. shared but it didn't resolve the problem. But it then dawned on me like what stated that instead of a popup box, I need to redo the design to put in into the success handler. I will work on that tomorrow. If I can't get it working, I'll update here.

Thanks Julian for the insight.
0
Paul KonstanskiProject SpecialistAuthor Commented:
I was able to get this working as it should by following Julian's advice.  Thanks.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
E-Commerce

From novice to tech pro — start learning today.