Editor Enhancer - The Best UI for Oxygen Builder
Customer Login
Post Date: September 8, 2021
Posted In:

How to Use jQuery in Oxygen With $

Write JavaScript with jQuery's dollar symbol ($) in Oxygen Builder.

Example of jQuery written in Oxygen code bock.

WordPress core comes with jQuery baked in, which is a JavaScript library with common, easy to use functions. Personally, I prefer vanilla JS, but find it’s also sometimes easier to just use jQuery. If it’s there already, why not use it?!

To start, open a code block or JS advanced tab. Then wrap your JS with the following:

(function($){
    // Your code goes here. You can use $!
})(jQuery);

What we have above is called an anonymous and self-executing function. Adding the parentheses at the end calls the function immediately after declaration (hence, self-executing). We can then pass the jQuery object as a parameter, which we decide to represent as the common $ symbol within our code block.

Getting the Component ID

Oxygen has a replacer for getting the component’s ID within the scripting area. This is %%ELEMENT_ID%%. But it only returns the name of the ID, so in jQuery we will use it to target the component itself and assign it to a variable, like “el,” so we can use it easily.

(function($){
    var el = $('#%%ELEMENT_ID%%'); // el stands for "element"
})(jQuery);

Now, you can use the variable “el” in your code to target your component. For example, let’s say you want to create a click event on the component. In the following example, the message “Cool message!” will be logged in your browser console.

(function($) {
    var el = $('#%%ELEMENT_ID%%');

    el.click(function() {
        console.log('Cool message!');
    });
})(jQuery);

Give it a try! When you click on your component, you’ll see the message "Cool message!" in your browser's console log..

Improving Your Workflow

If you like this little walkthrough, you’ll probably also like all that EE has to offer. Everything from copy/paste and keyboard shortcuts to style and class management - and so much more! Check out the docs to see everything in store for you. Enjoy!

Leave a Reply

Enhance Your Workflow

Get flowing with Editor Enhancer's suite of extensions and settings that immediately improve your workflow and editing environment.
Get Access Now

Reach out and say "hello!"

Join the Facebook Group
Editor Enhancer - The Best UI for Oxygen Builder
2021 Editor Enhancer. All rights reserved.
closecogcommentchevron-downfacebook-squareellipsis-vcopyrightfacebook-official