I am not sure what is happening. I am trying to use Google Autocomplete using the Google Maps api. I have done this many times and I have no idea what is happening. I am unable to figure out if this is an issue with weweb or I am missing something here. It is a very important feature for me, so any help is highly appreciated. Below are the details of the issue I am facing with working website.
As you can see as soon as user starts typing in the “Enter address” field, it behaves exactly as it should. I am provided with choices.
Next, I can select any of the choices (for now you can ignore Street Number and Street Name since they are simply broken down parts of the selected choice in the “Enter address” field).
The problems begin here. The values do not bind to the input fields. So if I POST this data upon submit button I get null values in my backend. rather I get the values what I type in the “Enter Address” field before selecting an address from the dropdown.
Also, you will notice that the State, City, Country etc. values disappear as soon as you hover over the fields.
This same code works well in Webflow, standalone html/javascript running on a local server and practically everywhere else. But this seemingly straightforward javascript does not seem to work in weweb.
Is this weweb issue or I am missing something straightforward here.
Hi,
I think your problem is that you just change the value of the input while weweb store the value of the input in variables.
In order to make your code work, you have to replace
For every document.querySelector you use.
Weweb automaticly update the input on variable change.
You can use weweb variable selectore to automaticly set the right UUID :
Thanks @stagiaire. I am not sure it will work. I am using the ID of the elements to set the values. As you can see in the attached screenshots, the ID of the elements is correctly passed through by weweb. And the code is referring to those elements by their ID. If I use the variable names as you suggested would imply appending the names (which I have set to be same as the ID) with “- value”. If I do that, it throws me an error for unreferenced variables.
@stagiaire I do not think this is the correct way to handle variables in javascript or weweb. Javascript will refer to standar DOM and the weweb UID’s cannot be referred to in this manner. I also confirmed after making the changes you suggested. As suspected, we get an error : Uncaught ReferenceError: variables is not defined.
@weweb-team can you chime in since this does not seem accurate to refer to element UID’s as opposed to their element ID’s.
Because Vue/JS is handling the DOM, we must rather think about changing the variable value rather than the input/DOM value.
You can use a Change Variable action, or use the initial value field for that
@aurelie not sure I understood what you mean by using change variable action to fetch value from google autocomplete api response. Would it be possible for you to elaborate? Thanks, I have been stuck on it for a couple of days now.
@aurelie i think some adjustment is needed to stabdard JS in order to bind the values. I am not sure how to execute it in weweb. I found pure vue based problem (and related solution) specifically for google address autocomplete. I am able to run it as a vue app and it works. Any help on how to make it work on weweb would be really helpful.
Here is the reference link: javascript - How to change v-model value from JS - Stack Overflow
Weweb/Vue is synchronizing a JS value and the input dom value. If you try to directly (like Google api may do) the input, you may break this synchronization. This is why its better to change the js value, and not touch the html input. You should normally never have to go with a getElementById on a Vue app. Always bind, and update the js model rather than the DOM directly.
Basically, see InitialValue as the equivalent of modelValue property in a pure Vue app, and OnChange workflow trigger as the equivalent of @update:modelValue in a pure Vue app.
So if you want to change the value on an input, you need to change the value of what is passed to the input by Weweb.
Its either:
Change the intialValue of the input = make it bind to a variable, and update that variable
@aurelie i have tried a few different ways to bind the values. But i am stoll unsuccessful. I created new variables and bound my input fields using init vvslues. Then i updated the values in javascript. Using console.log i can see that my variable values are updated. Then i had upon init value change action set value of input field to my variable. But still no luck.
Any suggestions?
From what I understand, you are using the custom code property of your page to manage all that is happening in your page.
If that is the case, it might be the reason your code is not properly connected with the Vue component.
You might have better result by using the workflow property of the page, this way you will be able to use the weweb integrated tools.
You still need to add the google map api source call in the custom code property of your page :
@stagiaire i was afraid that it will become a big effort just to get such widely used functionality working. I dont think I will be able to write a new component. Not sure if this is on the feature plan for @weweb-team.
But what I learned is that weweb is not really compatible with vanilla JS. It requires a lot of tweaking due to its Vue JS scaffolding. Any new user evaluating should be cognizant.
@aurelie any inputs from your end? It seems both @stagiaire and I have come to similar conclusion that we cannot simply use vanilla JS to accomplish google address autocomplete.
If you can run the solution as a vue app you can run it as a weweb custom element.
Vanilla Javascript can be used in your element and the experience using custom code in weweb is great.
Give it a try.
@dorilama I understand that your experience level with vuejs is very high and that helps you in interpreting how to use weweb in context of custom code. But, as you can see from my past comments, I am not that great with vuejs. Sorry if I was not clear earlier, but I ran an example script, that really does not make me experienced in vuejs at all.
@dorilama I have not abandoned it but just trying to get some basic functionality up. I hope you don’t mind me pinging you back after trying couple of things you mentioned earlier.
