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?
 
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
 
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
 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.