Order Form AJAX Callbacks/or load full order form every time?

Max Classic
1

I’ve got some .js running so that if the customer chooses the country Canada, I swap out the STATE field for a select field.

PROBLEM – recently my order forms started to load with a button to either click to pay with Credit Card, or click the PayPal button… and this is making my scripts not load/not work because the fields they are looking for are now not being loaded with the DOM - they get loaded when someone clicks that button.

I see the button has some javascript in the onclick:

Infusion.Ecomm.OrderForms.selectPaymentType(‘creditcard’);Infusion.Ecomm.OrderForms.ajaxSubmitForm(‘orderForm’, false, 0, ‘’, ‘AN-Monthly-Recurring’, ‘RENDER_ORDER_FORM’,
[‘ORDER_FORM_BILLING_ENTRY’, ‘PAYMENT_SELECTION’, ‘ORDER_FORM_SHIPPING_ENTRY’, ‘SHIPPING_OPTIONS’, ‘CHECKOUT_LINKS’])

…

QUESTION:

Is there anyway to disable this behavior, and have my order form just load without the choices? For example, if I click “Credit Card,” then reload the form, the entire form loads, and my scripts work.

I want the entire form to load each time.

OR

What is a callback / what can I hook a function on to so that it will wait until after the button is clicked, and all the forms load?

Or does someone already have a .js snippet to just hide this button/paypal thing, and unhide the form … since I see it’s all there, and my script has already worked, but once the “Pay with Credit Card” button is clicked, I think the billing fields get reloaded, and my script is now moot.

Thanks.

Jason

2

@Jason_Kadlec1, I’ve found that if you edit the actual template with JS to disable or CSS to hide the button that this works. However, attempting to modify the action order form on code level does not seem to work at all. So, obviously, my recommendation would be to modify the template.

3

@John_Borelli - my issue is that I’m running some .js off of jQuery( window ).on( “load” etc etc…

But the form is loading some JS after mine, even though mine is the very last thing in the footer html area.

When the Infusionsoft JS runs, it breaks mine, because as far as I can tell, the order form loads up, my .js runs on it, (my .js finds elements in the form and does its thing) – but then the IS .js runs, and for whatever reason it almost seems like it reloads the form, or just the fact that it hides it, my .js gets unhooked from those elements.

Reload the page, the IS .js doesn’t run anymore and mine works fine.

So what I think I need is, to be able to take my stuff, put it in its own function, then run that function on either the load, or the click on that button…but since the button itself is hooked to some .js – I was hoping there was a callback or something I could listen for so that my .js would run not when the button is clicked, but when the IS .js functions that button triggers are done.

I guess I’ve not tried just hooking it to the button click yet… in the meanwhile I’ll try it, but first I wanted to see if I could just get rid of it / or if anyone already knows what to listen for with this button setup.

Jason

4

@Jason_Kadlec1,

An example of what I’ve gotten to work is:

1079×909 46.6 KB

I came across the same problem you are describing. What I found was that I had to do this in the order form theme. Attempting the same thing in the order form itself just got stripped away by infusionsoft (leaving me wondering why they even have the option there on the form apart from the theme in the first place).

So create a separate theme and edit it accordingly. Then create an order form based on that modified theme.

5

Thanks! I’ll give this a shot.

6

@John_Borelli:

I gave yours a shot, but the problem was that I think the forms are now loading the actual credit card field/radio buttons to choose either CC or PP via AJAX, so while I was able to hide the buttons/force the form to show, it wasn’t a working order form.

I was looking for what callback to listen for, then… duh jQuery already has a .ajaxComplete which listens for any AJAX already…

Because the form is loading the “rest” of the order form via AJAX - the solution is simple. I put my stuff into a function, then call it when the AJAX is returning the last piece of the form like so:

jQuery( document ).ajaxComplete(function( event, request, settings ) {
    var str = request.responseText;
    if (str.indexOf('<div class="checkoutLinks">') >= 0){
      console.log('boom');
      doJasonThing();
    }

});