Hi Everyone,
Solution Found
See bottom of thread for modified code, jump to code - click here. Thanks & qudos to @John_Borelli for the pointer.
You place the modified code in the following section of the order form, while editing.
Order Form > HTML Areas Tab > Product Information Section
Changing the way jQuery.AJAX is called allows the script to work, fixing the page refresh/load infinite loop problem. The issue being, the order form has already called jQuery, so calling it again via a script tag caused the page refresh issue to occur.
Goal
Trying to apply my previous solution for capturing geolocation information values for web forms to work with order forms.
The modified code works (9/10ths of the way) and will populate the geolocation fields when an order form is submitted but I have hit a visual page refresh/loading issue that I can’t figure out and am asking for help to solve.
Form Data POST Works
Using the code modifications (shown below in the Modified Code Section) the order form will correctly post the geolocation data values to the selected database tables & fields.
Page Refresh/Loading Issue
The problem seems to lie in calling the AJAX JQuery.min.js needed to make the code work.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Without the script call the code doesn’t function.
The script call somehow is interacting with the existing order form JavaScript to cause a page refresh/loading endless visual loop after you enter the ZipCode. After the ZipCode is entered and you tab down to the Country field then the top form sections of the page blank out and try and refresh but never do so successfully, just infinitely spinning circles.
You can still submit the form (while in endless visual refresh mode) and the order form credit card/address and the geolocation data values will correctly process and populate. So we know the geolocation code is working correctly, the form data values are preseved/updated making the problem is a visual refresh / page reload issue only.
Order Form > HTML Areas Tab > Product Information Section
The modified geolocation code is placed in this section in the order form, while editing.
Modified Code
Note: You don’t need to poll for the TimeZone as the order form already is programmed to capture this value.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
jQuery.ajax( {
url: '//freegeoip.net/json/',
type: 'POST',
dataType: 'jsonp',
success: function(location) {
// Update hidden form field variable values
jQuery('#Contact0City3').val(location.city);
jQuery('#Contact0State3').val(location.region_code);
jQuery('#Contact0PostalCode3').val(location.zipcode);
jQuery('#Contact0Country3').val(location.country_name);
jQuery('#Contact0_IPAddress').val(location.ip);
}
} );
</script>
<input name="Contact0City3" id="Contact0City3" type="hidden" value="" />
<input name="Contact0State3" id="Contact0State3" type="hidden" value="" />
<input name="Contact0PostalCode3" id="Contact0PostalCode3" type="hidden" value="" />
<input name="Contact0Country3" id="Contact0Country3" type="hidden" value="" />
<input name="Contact0_IPAddress" id="Contact0_IPAddress" type="hidden" value="" />
Previous - Web Form Code Solution
Here is my previous solution for web forms rather than order forms.
New - Order Form Code Modification
Note the differences in and to correctly reference the database table.field via the order form POST (compared to the previous web form POST solution).
- You drop the field name prefix inf_field_ for the input name & id
- You include the table name prefix Contact0
- You include the underscore character as a prefix for a custom field
Web Form Code (Standard Existing Field)
<input name="inf_field_City3" id="City3" type="hidden" value="" />
Web Form Code (Custom Field)
<input name="inf_custom_IPAddress" id="_IPAddress" type="hidden" value="" />
Order Form Code (Standard Existing Field)
<input name="Contact0City3" id="Contact0City3" type="hidden" value="" />
Order Form Code (Custom Field)
<input name="Contact0_IPAddress" id="Contact0_IPAddress" type="hidden" value="" />
Solutions Tried
JQuery No Conflict
To allow multiple versions of JQuery to run without conflict on the same page.
jQuery.noConflict();
jQuery.noConflict(true);
<script>
jQuery.noConflict();
jQuery.ajax( {
url: '//freegeoip.net/json/',
type: 'POST',
dataType: 'jsonp',
success: function(location) {
// Update hidden form field variable values
jQuery('#Contact0City3').val(location.city);
jQuery('#Contact0State3').val(location.region_code);
jQuery('#Contact0PostalCode3').val(location.zipcode);
jQuery('#Contact0Country3').val(location.country_name);
jQuery('#Contact0_IPAddress').val(location.ip);
}
} );
</script>
Set timeout for AJAX
To stop AJAX from looping after set time period, in case that was conflicting with the page refresh via an endless loop.
timeout: 3000, // sets timeout to 3 seconds
<script>
jQuery.ajax( {
url: '//freegeoip.net/json/',
type: 'POST',
dataType: 'jsonp',
timeout: 3000, // sets timeout to 3 seconds
success: function(location) {
// Update hidden form field variable values
jQuery('#Contact0City3').val(location.city);
jQuery('#Contact0State3').val(location.region_code);
jQuery('#Contact0PostalCode3').val(location.zipcode);
jQuery('#Contact0Country3').val(location.country_name);
jQuery('#Contact0_IPAddress').val(location.ip);
}
} );
</script>
The Possible Code Conflict?
Looking at the existing page code, (view source) the conflict seems to lie with the following document ready function call that then fires a RENDER_ORDER_FORM action. This is my best guess for the page refresh issue code conflict with the AJAX call but I could be off base.
Any help in figuring this issue out is much appreciated, thank you.
jQuery(document).ready(function()
jQuery('#addressLine1, #city, #zipCode, #country, #state').change(function() {
Infusion.Ecomm.OrderForms.submitFormUponChangeOnBilling('orderForm', '807aa4ca-f41c-48be-9b28-5ab1f51730d3', 'RENDER_ORDER_FORM');
