Javascript

As part of widgets, Duda allows you to use standard JavaScript. This can be used to load content, add custom functionality and more. We also give you easy access to both the DOM element, data input to the widget and a few helper values passed into the callback. Below is a list of helper objects.

Element

A direct reference to the DOM element of this widget. Here's an example of how you can interact with the element.

console.log("Element Class List: " + element.classList);
//Output: "Element Class List: widget-366254 dmCustomWidget"

Configuration

Gives access to the raw values from the widget content settings. The data.config object allows you reference these values and access them from JS easily. For example, if I had a text input variable named btnText, then I could access in JS with the following.

alert("Button Text Value is: " + data.config.btnText);

The result from above would look like this:

You can also use the data.config object access a list of items (which is stored as an array). For example, if you had a list of checkboxes called checkList, you could loop through each and find out which ones are checked.

data.config.checkList.forEach(function(item,index) { 
    if(item.listCheckbox) { 
        console.log("List item number " + index + " is checked") 
    } 
});

Device Type

The device that Duda detected as visiting the website. Allows you to change functionality based on device type. There are three possible types: desktop, tablet and mobile.

if (data.device==="mobile") {
    //do something if mobile
} else {
    //do something if desktop or tablet
}

inEditor

A bool value if the widget is currently in the editor or being viewed on a live website/preview.

if (data.inEditor) {
    //do something if in editor
} else {
    //do something regular if outside editor
}

Page Name

Access the name of the page the widget is currently being viewed from.

alert("Current page is: " + data.page);
//Out: "Current page is: home"

jQuery

All Duda websites have jQuery embedded within them by default. As of this writing, it is version 2.11. You can use the standard $ function to access the features. You do not need to include the jQuery library, as it's already available.

It’s important to note that Duda places jQuery and JS at the bottom of web pages and not inline. We do this to conform to PageSpeed best practices, so we recommend that you avoid relying on JS to render content.


What’s Next
Did this page help you?