Code Working In Chrome but Not Safari!

bizlutionsllc · July 21, 2021, 8:27pm

I am building a custom site where users can pick a container, pick from a variety of stuffers, and then select shipping method.

Everything works fine on Chrome, but I noticed that Safari is acting weird.

The numbers should automatically change based on user input, which happens on Chrome. When the quantity is changed, the total changes, when an item is added, the cost per item and total cost per items changes. When quantity is changed, shipping/handling costs change as well.

It seems as though on Safari, that when I make a change, it takes another change to be made in order for the previous change to display. Also, when inputting a number into the quantity directly, it does not calculate correctly, cannot pinpoint exactly what.

//Shipping and Handling Auto update:

 const $oneLocation = $w('#checkbox16');
 const $multipleLocations = $w('#checkbox17');
 const $handlingDestination = $w('#input33');
 const $shippingDestination = $w('#input34');

 const updateHandling = ($checkbox, handlingSrc, shippingSrc) => {
 if($checkbox.checked){
 const $handlingSrc = $w(handlingSrc);
 const $shippingSrc = $w(shippingSrc);

 setHandling($handlingSrc.value);
 setShipping($shippingSrc.value);

 } else {
 $handlingDestination.value = '0.00';
 $shippingDestination.value = '0.00';

 }
 }
 const setHandling = (handlingSrcVal) => {$handlingDestination.value = handlingSrcVal;}
 const setShipping = (shippingSrcVal) => {$shippingDestination.value = shippingSrcVal;}

 $oneLocation.onChange(() => updateHandling($oneLocation,'#input29', '#input31'));
 $multipleLocations.onChange(() => updateHandling($multipleLocations,'#input30', '#input32'));
 
//For shipping/handling calculations 
 
 //TOTALS AND COST OF ITEMS
export function input13_input(event) {

 let quantity = $w("#input13").value
 //cost per item;
 let price = $w("#input25").value;

 // total cost of items
 $w("#input26").value = (quantity*price); 

 const $oneLocation = $w('#checkbox16');
 const $multipleLocations = $w('#checkbox17');
 const $handlingDestination = $w('#input33');
 const $shippingDestination = $w('#input34');

 const setHandling = (handlingSrcVal) => {$handlingDestination.value = handlingSrcVal;}
 const setShipping = (shippingSrcVal) => {$shippingDestination.value = shippingSrcVal;}
 //single handling fee;
 const singleHandlingFee = Math.ceil(quantity/32)*12.90;
 $w("#input29").value = singleHandlingFee;
 if($oneLocation.checked) setHandling(singleHandlingFee);
 //mult handling fee;
 const multHandlingFee = quantity*3.90;
 $w("#input30").value = multHandlingFee;
 if($multipleLocations.checked)setHandling(multHandlingFee);
 //single shipping fee;
 const singleShipping = Math.round(quantity/32)*45;
 $w("#input31").value = singleShipping;
 if($oneLocation.checked) setShipping(singleShipping);
 //mult shipping fee
 const multShipping = quantity*12.98
 $w("#input32").value = multShipping;
 if($multipleLocations.checked) setShipping(multShipping);
}

A link to this page can be found at: https://bizlutionsllc.wixsite.com/stuffit/buildyourown

If this can please be solved, I would greatly appreciate it, as this site cannot go live until this issue is resolved, as money is at stake.

THANK YOU!

J.D · July 21, 2021, 9:06pm

You have thousands of code lines on your page, so it might not be easy to locate the issue (you can make it much shorter. I mean MUCH shorter by using functions and methods for repeated code).
Anyhow, I can see you have some imports in the middle of your code (See lines: 2196-2199), you should move them to the top of the page, but I doubt that will solve the issue.

I suggest:

Make the code shorter.
Check the safari console and see if there’s any error.
Add console.log() to the relevant places and debug the code.
Try to see if using onKeyPress with setTimeout(callback, 10) instead of onInput solves the problem.

J.D · July 21, 2021, 9:13pm

go ever this thread. It sounds like your issue:

bizlutionsllc · July 22, 2021, 1:03pm

Thank you! I am new to coding so am nervous about shortening. Do you have an example of how to shorten the sections?

J.D · July 22, 2021, 1:31pm

@bizlutionsllc there’re many ways to things shorter.
For example, lets say you have many single checkboxes on your page and you wish that once one of them is checked the others will get disabled.
Then instead of creating a separate event handler to each of them, and disable each separately, you can do something like:

$w("Checkbox").onChange(event => {
  const targetId = event.target.id;
  $w("#" + targetId).checked ? $w("Checkbox").filter(e => e.id !== targetId).forEach(e => e.disable()) : $w("Checkbox").enable();
});

bizlutionsllc · July 27, 2021, 4:35pm

@jonatandor35 Thank you! this helps a lot! However, in this case, it would have to be certain checkboxes. For example, if they select a container, only the container checkboxes are disabled. If a Bow Color is selected, only the bow options are disabled. Any suggestions on how to edit this?

bizlutionsllc · July 27, 2021, 4:38pm

@jonatandor35 Also, am I able to condense the “if checkbox 24 is checked” lines. These are pushing different values to different data fields, if the one checkbox is checked.

$w('#dataset1').onBeforeSave(() => {
 let checked = [];
 //ORDER INFORMATION
 if ($w('#checkbox24').checked) {
 checked.push($w('#input28').value)
 $w('#dataset1').setFieldValue('ordernumber', checked);} 
 if ($w('#checkbox24').checked) {
 checked.push($w('#text145').text)
 $w('#dataset1').setFieldValue('container', checked);}
 if ($w('#checkbox24').checked) {
 checked.push($w('#text146').text)
 $w('#dataset1').setFieldValue('containerColor', checked);} 
 if ($w('#checkbox24').checked) {
 checked.push($w('#input13').value)
 $w('#dataset1').setFieldValue('quantity', checked);} 
 if ($w('#checkbox24').checked) {
 checked.push($w('#input26').value)
 $w('#dataset1').setFieldValue('costPerItem', checked);} 
 if ($w('#checkbox24').checked) {
 checked.push($w('#input33').value)
 $w('#dataset1').setFieldValue('handlingCost', checked); }
 if ($w('#checkbox24').checked) {
 checked.push($w('#input34').value)
 $w('#dataset1').setFieldValue('shippingEstimate', checked);} 
 if ($w('#checkbox24').checked) {
 checked.push($w("#input26").value);
 $w('#dataset1').setFieldValue('totalCostOfItems', checked); }
 if ($w('#checkbox16').checked) {
 checked.push($w('#input20').value)
 $w('#dataset1').setFieldValue('shippingCompanyName', checked); }
 if ($w('#checkbox16').checked) {
 checked.push($w('#input19').value);
 $w('#dataset1').setFieldValue('shippingContactName', checked); }
 if ($w('#checkbox16').checked) {
 checked.push($w('#input21').value);
 $w('#dataset1').setFieldValue('shippingAddress', checked); }
 if ($w('#checkbox16').checked) {
 checked.push($w('#input22').value);
 $w('#dataset1').setFieldValue('shippingAddress2', checked); }
 if ($w('#checkbox16').checked) {
 checked.push($w('#input18').value);
 $w('#dataset1').setFieldValue('shippingCity', checked); }
 if ($w('#checkbox16').checked) {
 checked.push($w('#input17').value);
 $w('#dataset1').setFieldValue('shippingStaate', checked); }
 if ($w('#checkbox16').checked) {
 checked.push($w('#input16').value);
 $w('#dataset1').setFieldValue('shippingZip', checked); }
 if ($w('#checkbox16').checked) {
 checked.push($w('#input24').value);
 $w('#dataset1').setFieldValue('shippingPhone', checked); }
 if ($w('#checkbox17').checked) {
 checked.push($w('#uploadButton1').uploadFiles());
 $w('#dataset1').setFieldValue('addressList', checked); }
 if ($w('#checkbox24').checked) {
 checked.push($w('#input6').value);
 $w('#dataset1').setFieldValue('title', checked); }
 if ($w('#checkbox24').checked) {
 checked.push($w('#input7').value);
 $w('#dataset1').setFieldValue('billingContactName', checked); }
 if ($w('#checkbox24').checked) {
 checked.push($w('#input14').value);
 $w('#dataset1').setFieldValue('billingAddress1', checked); }
 if ($w('#checkbox24').checked) {
 checked.push($w('#input15').value);
 $w('#dataset1').setFieldValue('billingAddress2', checked); }
 if ($w('#checkbox24').checked) {
 checked.push($w('#input8').value);
 $w('#dataset1').setFieldValue('billingCity', checked); }
 if ($w('#checkbox24').checked) {
 checked.push($w('#input9').value);
 $w('#dataset1').setFieldValue('billingState', checked); }
 if ($w('#checkbox24').checked) {
 checked.push($w('#input10').value);
 $w('#dataset1').setFieldValue('billingZip', checked); }
 if ($w('#checkbox24').checked) {
 checked.push($w('#input11').value);
 $w('#dataset1').setFieldValue('contactEmail', checked); }
 if ($w('#checkbox24').checked) {
 checked.push($w('#input12').value);
 $w('#dataset1').setFieldValue('contactPhone', checked); }
 //BOW COLORS
 if ($w('#checkbox24').checked) {
 checked.push($w('#text123').text);
 $w('#dataset1').setFieldValue('bowColor', checked); }
 if ($w('#checkbox24').checked) {
 checked.push($w('#text145').text);
 $w('#dataset1').setFieldValue('stuffers', checked); }
//SHIPPING METHOD LABELS TO DATABASE
 if ($w('#checkbox16').checked) {
 checked.push('To One Location'); 
 $w('#dataset1').setFieldValue('shippingMethod', checked); }
 if ($w('#checkbox17').checked) {
 checked.push('To Multiple Locations');
 $w('#dataset1').setFieldValue('shippingMethod', checked); }
//HANG TAG LABELS TO DATABASE
{
 if ($w('#checkbox19').checked) {
 checked.push('Yes');
 $w('#dataset1').setFieldValue('hangTag', checked); } 
 else {
 $w('#dataset1').setFieldValue('hangTag', "No"); } 
}
 });

bizlutionsllc · July 27, 2021, 5:43pm

@jonatandor35 Actually, that code pushes everything. See attached.

J.D · July 27, 2021, 5:53pm

@bizlutionsllc I don’t understand what I see and what is “that code pushes everything”. Please explain.

bizlutionsllc · July 27, 2021, 6:41pm

@jonatandor35 It is not separating the values. It is combining all checked.

Topic		Replies	Views
Code not working on iphone/Safari Ask the community code , question	2	138	December 29, 2021
\|SOLVED\| multiplying and subtracting values on text fields. Ask the community code , question	4	320	December 30, 2021
IPad/Safari/Chrome onInput event problem Ask the community code , question	12	1383	July 17, 2023
Safari onInput handler is not working (intermittently) Ask the community	0	176	October 8, 2021
With code update shipping method dropdown in the cart page Ask the community code , question	0	108	August 25, 2020

Code Working In Chrome but Not Safari!

Related topics