Hi there,
I have an issue with the #onInput event handler…
I open the page on different browsers and get a different results with the same code.
Here is the code:
$w.onReady( function() {
$w("#repeater2").onItemReady(($item, itemData, index) => {
$item("#tprice").text = itemData.tprice;
let button = $item("#button1");
let quantity = $item("#quan");
let buttonR = $item("#buttonremove");
quantity.onInput(() => {
let id = itemData._id
let img = itemData.image
let size = itemData.size
let option = itemData.option
let colour = itemData.colour
let price = itemData.price
let title = itemData.title
//initial quantity found in repeater
let qquantity = (Number($item("#quan").value));
//initial price found in repeater
let beforeinterprice = ($item("#pricecart").text).replace('$ ', '');
let interprice = (Number(beforeinterprice));
// to find price * quantity
let tprice = interprice * qquantity;
$item("#tprice").text = "$ " + String(tprice);
// function that calc the price value in Order Totals
sum();
// function that calc the quantity value in Order Totals
q();
let upDate = {
"_id": id,
"quantity": qquantity,
"tprice": "$ " + tprice,
"image": img,
"size": size,
"colour": colour,
"option": option,
"price": price,
"title": title,
"cartowner": userId
}
// "update function" I need to remember user's input value of amount and price in their's cart
wixData.update("cart", upDate)
.then(() => {
//I use to show updated items in the cart
PopulateRepeater();
})
});
});
} );
And this just works nice on the #Chrome:
And works with the bug on the #Safari
As you can see on the Safari it starts count from the second Click/Change
Also I see the Up/Downs arrows on the Order Totals input while the setting on Order Totals is ReadOnly. And I don’t have in this case Up/Down arrows(buttons) on the chrome. But have it on Safari…
So the question is Why there is difference between browser’s preview and how to fix this on Safari?
Thank you !
UPD:
Also, I used Chrome on my iPad (not sure which version) and tried to change the quantity of an item and the numbers wouldn’t show up and the $ went to zero… I’ve attached a couple of pics
Hi Arnobi, a link to the page please?
@info72133 I don’t see anything weird on Chrome and Microsoft Edge, and the code looks fine, and I don’t have accesss to a Safari browser to test it.
Try to empty the browser cach and see if that fixes the problem.
@ahmadnasriya Yeap, in Chrome it works just fine… But in Safari it doesn’t… As well as in Chrome on iPad.
I don’t really think that the problem is in the cach. I’ve run the site on the Mac for the first time.
The problem looks like the function runs after the second click on arrow for some reasons. As we can see from the gif I’ve attached above.
@info72133 that probably means that the problem is a system wide in MacOS, not a browser specific issue.
I suggest that you contact wix support in this regard.
@ahmadnasriya Yeap I’ve checked if everything is fine with the older versions of Safari
and here is what I’ve got
- On latest Big Sur and Safari 14.0 and I saw the problem we were talking about.
- All thing works fine on Catalina with Safari 13.1
- I’ve also checked the Mojave and Safari 12.1
And the input works just fine on it as well. Calculations were right and without delays.
So this is a problem of Safari new 14.0 version of Big Sur OS
I think it will be fixed by Apple with the update 14.1.
@ahmadnasriya And one more question about CrossBrowser please.
I have a container2 which contain all repeater item’s elements inside and a box1 which contain 3 dropdowns . box1 is collapsed onload.
I have event handler mouseIn related to
container2 . So when I hover
container2 box1 with child
dropdowns expand() . Another event handler is mouseOut related to
container2 as well. The function inside is to collapse
box1 . the the last event handler related to box1. The function inside is to expand
box1 . I need event handler for
box1 because if I don’t have it when I hover a
box1 it starts blinking…
Here is the code:
export function container2_mouseIn(event) {
let $item = $w.at(event.context);
$item("#box1").expand();
}
export function container2_mouseOut(event) {
let $item = $w.at(event.context);
$item("#box1").collapse();
}
export function box1_mouseIn(event) {
let $item = $w.at(event.context);
$item("#box1").expand();
}
And that works fine on Chrome and in Safari
But doesn’t in Firefox
So as you can see when I hover Dropdown options box1 collapsed and expanded immediately since I’m still over container2. Does the Firefox think options of dropdown is not a part of dropdown? And why it works normal in the Chrome than… That’s odd. But what can I really do to fix this? I’ve tried a HTML frame which would detect onReady if it is firefox and send the answer back to the wix. And If it’s FireFox export function container2_mouseOut(event) won’t work. But it a bit weird way. Since the site is not really works as needed.
Can you please help with this?
The link on the site
You can go another way.
You could use —> setTimeout(()=>{}) as a workaround.
- When entering —> Menu opens.
- And when leaving —> starting setTimeout → after few seconds then it would close the menu again (and not immediately).
This would be my idea, to solve it somehow (for FireFox).
And you could also write for every type of browser a specified code, which would work for the current selected browser.
Yes you would then have 4-different codes for each of the choosen browsers, but 4-codes which would work for every individualy browser.
The last thing you would have to do, would be —> autodetecting the current used browser…
Perhaps this may help you, to achieve your aim…
https://www.wix.com/velo/forum/community-discussion/is-there-a-way-to-know-which-browser-the-user-is-using
I am thinking of something like this way… (not tested, just an idea)
$w.onReady(function () {
let myDelayTime = 700
let state
$w('#container2').onMouseIn(event) {state=1
let $item = $w.at(event.context);
$item("#box1").expand();
})
$w('#container2').onMouseOut(event) {state=0
let $item = $w.at(event.context);
setTimeout(()=>{
if(state===1) {$item("#box1").expand();}
else {$item("#box1").collapse();}
}myDelayTime)
})
$w('#container2').onMouseOut(event) {state=1
let $item = $w.at(event.context);
$item("#box1").expand();
})
)}
You can go another way.
You could use —> setTimeout(()=>{}) as a workaround.
- When entering —> Menu opens.
- And when leaving —> starting setTimeout → after few seconds then it would close the menu again (and not immediately).
- But during this given setTimeout, you can already switch the state of the current element (from 0 to 1, or vice versa).
It works like a little timeout, which gives you enough time to reach the next element.
This would be my idea, to solve it somehow (for FireFox).
And you could also write for every type of browser a specified code, which would work for the current selected browser.
Yes you would then have 4-different codes for each of the choosen browsers, but 4-codes which would work for every individualy browser.
The last thing you would have to do, would be —> autodetecting the current used browser…
Perhaps this may help you, to achieve your aim…
https://www.wix.com/velo/forum/community-discussion/is-there-a-way-to-know-which-browser-the-user-is-using
I am thinking of something like this way… (not tested, just an idea)
$w.onReady(function () {
let myDelayTime = 700
let state
$w('#container2').onMouseIn(event) {state=1
let $item = $w.at(event.context);
$item("#box1").expand();
})
$w('#container2').onMouseOut(event) {state=0
let $item = $w.at(event.context);
setTimeout(()=>{
if(state===1) {$item("#box1").expand();}
else {$item("#box1").collapse();}
},myDelayTime)
})
$w('#container2').onMouseOut(event) {state=1
let $item = $w.at(event.context);
$item("#box1").expand();
})
)}
You will have to optimize and complete the code, by yourself.
And for better overview and understanding, take alook here.
This simple menu uses the same technique of my idea…
https://www.media-junkie.com/simple-megamenu?lang=de
Take also a look into the related POST.
I hope this can solve your problem.
Good luck and happy coding.
EDIT:
By the way. The Menu which you can find on the given example, was also created with the same technique, i just showed you right now.
Yes it works not perfekt (still in developement), but should work on every browser (but also not tested).
Is this still an issue? Or is onInput() working again?
