Where/how should we handle onFocus and onBlur events for elements?
In particular, I’d like to show a modal when the focus is on an input element.
1 Like
Hopefully the weweb team will expose a trigger for focus events one day.
For now a simple workaround can be using javascript actions and event listeners:
-
create a variable of type boolean
addedListeners. This will be used to avoid adding event listeners multiple times.
-
create a global workflow that will handle all the focus events. Add 2 parameters
elementName(remember to assign unique names to the inputs, so that you know what input triggered the event and you can decide what to do with it), andisFocus(trueif it is focused,falsewhen the focus is lost). Add here the logic you want.
-
take note of the uid of the workflow
-
add a second global workflow with a javascript action. It will set the event listeners
-
the code for the javascript action will be:
// this is the boolean variable created on step 1
// you can find it in the variables menu in the editor
if (!variables[/* addedListeners */ "b1851a02-fc79-469e-94ee-fa3a5d39d156"]) {
wwLib.getFrontDocument().addEventListener("focusin", (event) => {
// use the uid of the first workflow
wwLib.executeWorkflow("94d8100f-836c-4e5f-bd38-258c8a977380", {
elementName: event.target.name,
isFocus: true,
});
});
wwLib.getFrontDocument().addEventListener("focusout", (event) => {
// use the uid of the first workflow
wwLib.executeWorkflow("94d8100f-836c-4e5f-bd38-258c8a977380", {
elementName: event.target.name,
isFocus: false,
});
});
// this is the boolean variable created on step 1
variables[/* addedListeners */ "b1851a02-fc79-469e-94ee-fa3a5d39d156"] = true;
}
- now to use it you just need to trigger this second workflow on page load
Result:
4 Likes
Brilliant! Thank you @dorilama
Happy to help. 
this is possible now because weweb team recently exposed this function to trigger workflows from javascript.
Hi @dorilama
I’m trying to run this JS by button click with class=“btn” and id=“payButton”. It works with a second click on the button. This button also submit workflow with current JS code. I’m not familiar with JS and can’t figure out what’s wrong.
Hoping you can help me find solution
let btn = getElementById(“payButton”)
//let language = navigator.language //or fix
let language = “ru-RU”
function pay() {
var widget = new cp.CloudPayments({
language: language
})
widget.pay(‘charge’, // или ‘charge’
{ //options
publicId: ‘test_api_00000000000000000000002’, //id из личного кабинета
description: ‘Оплата товаров в example.com’, //назначение
amount: 1000, //сумма
currency: ‘USD’, //валюта
accountId: ‘user@example.com’, //идентификатор плательщика (необязательно)
invoiceId: ‘1234567’, //номер заказа (необязательно)
skin: “mini”, //дизайн виджета (необязательно)
autoClose: 3
}, {
onSuccess: function(options) { // success
//действие при успешной оплате
},
onFail: function(reason, options) { // fail
//действие при неуспешной оплате
},
onComplete: function(paymentResult, options) { //Вызывается как только виджет получает от api.cloudpayments ответ с результатом транзакции.
//например вызов вашей аналитики Facebook Pixel
}
}
)
}
//window.addEventListener(‘load’, pay)
btn.addEventListener(‘click’, pay)
1 Like
this topic is about focus and blur events. If you have an unrelated question it’s better to create a new topic so that people in the community can find your question and reply.
At a first glance it looks like you are just copy/pasting code with a lot of problems.
My advice is to try to understand the code you are using. A websites like freecodecamp is a great starting point. Of course the documentation of the library you are using is going to be helpful as well.
Chat GPT is so good at telling me answers to what is wrong with my code. If you haven’t asked Chatty, I’d suggest you try that.
So helpful! Using this. Thx!
Thank you for the advice!
I understand what this code does, even I can run it in Codepen. But it doesn’t actually work in my published Weweb application.
How do you see the UID? It doesn’t show for me.
