Vanilla javascript doesn't work with Wix?

How does anyone work with javascript in Wix? Its extremely frustrating to see garbage errors like “alert is not defined”, or how it seems to override vanilla javascript so that one can’t use window.href, etc.

Pretty much ready to give up on it at this point.

Not sure what you mean by “vanilla” Javascript. See Velo: Javascript Support and Coding with Velo for details on Velo Javascript support and compatibility.

Thanks. I read those already. It doesn’t jive with the reality I’m seeing, which is that basic js like window objects and alert functions throw errors in the Wix editor.

It’s all a matter of context. After all, NodeJS doesn’t have an alert or access to window objects since those are in the browser’s context. Wix has merely defined the context as screen elements being accessed via $w .

I’ve been using Javascript since it first came out (about '95 or '96) and today’s Javascript is both the same and very different. When it comes right down to it, Velo Javascript support is quite standard.

You need to ask yourself what is it you want to accomplish, not necessarily how. Wix provides a powerful development environment allowing you to deal with the big picture as opposed to obscure and unwieldy manipulations of the DOM.

You also might be interested in EditorX , which also supports Velo, and lets you fine-tune your site down to the pixel without all that nasty DOM and CSS stuff.

1 Like

I’ll give you an example of why modifying the DOM with plain JS would be ideal, as far as I can tell. It seems to be a very complicated process if I try to use the “powerful development environment” Wix provides. I do love Wix and am impressed with its function. But it seems to be overly restrictive for some tasks that would be simple if plain document level JS was allowed.

I’m trying to write a survey website. I would like to be able to customize the number of questions, what type of inputs are used on each question, etc, just by modifying the collection data the survey references. This is extremely fine tuned. There are two ways I’m thinking of doing this.

  1. Create a collection of surveys : the fields are normal (like title), except then there’s multiple multi-reference fields to other collections: multiple choice questions , text response questions , slider questions , etc . The reason I need different collections for each type of question is because a slider will require different attributes than a text response. I could jam every attribute into a single collection and have another field in that collection to differentiate the types, but I’m not sure that is any more straight forward, easier, or clear.

To implement this, without “vanilla” js (meaning plain js you can run on any page in any browser ECMA), I have to create a repeater that has every possible element that each question could be formed as in each section. Then query my collections, then hide all the wrong types of question formats for each question. Any time I want a new type of question, a new collection must be made with that type of question’s properties and modify the UI in the editor to have the repeater have the new question type.

This is possible, and perhaps the only good way to do it in Wix. I’m definitely open to easier options.

  1. My idea to simplify this process was to store in a single survey collection the object that describes the survey (including all the questions). This is possible with the above example as well, (though the above example was to illustrate that the Wix “powerful development environment” may overcomplicate certain functionalities). The problem I run into is the UI. It would simplify things greatly to write a script to construct from scratch a question based on the object given to the function. All I would have to do is get that function working then query the data, and pass the survey object returned into the function. Voila! The page would now have the appropriate survey built. When I want to add a question, I simply append a question to the object in the collection. Is that not simple? The Wix UI allows no such manipulation as far as I’m aware because it requires DOM manipulation via javascript.

Is there a better approach to this using Wix?

@escapeon13th I understand your frustration. You need to understand that Velo is not executed in the main context for security reason. Instead Velo is executed inside a web worker, hence you don’t have access to window and the DOM. Since window is not available window.alert is not available either. This one single issue.

I agree with you that a feature for creating elements “on the fly” would be a big plus for developers! (I suggest you create a feature request).

Now regarding your problem, if you are confortable with dom manipulation I suggest you create a custom web component where you can easily build your form.

If you want to stick to repeater + all possible input you can achieve this with a single collection:

FormQuestions(question, inputType, inputData) with

question (text) : the question label
inputType (text): the question input type (text, dropdown, checkbox, address,…)
inputData (object): an object that contains all information in order to configure the input ex

inputType = Dropdown {
options: [{value: “option1”, label:“optionA”}, {value: “option2”, label:“optionB”}],
value: “option1”
}

inputType = Rating {
maxRating: 5,
minRating: 1,
}

Would that work for you?

Guys, I know this thread is old, but I have an issue related to this at the moment. The designers have created a FAQ Widget, and inside the collapsable section there are two buttons that must execute some code (mostly to copy contents from the title and such, before going to the actual link).

Those buttons don’t have an id attached to them, so I either need to add a custom id to those or get the elements by class or tag.

How am I supposed to do that with Velo? I can’t use “document.getElementsByClassName” apparently.

How is the FAQ designed? Using Repeaters? If so, then it’s a simple matter of getting the Repeated Item Scope from the button clicked in a repeater item.

And yes, this is an old thread and not exactly on the same topic as your question. Please add your own issue into a new post instead of bumping up an old post. Explain what you are trying to do, what works, and what doesn’t. Also, add any code in a code block as stated in the Forum Guidelines .

This is an old post and is being closed.