jQuery is often regarded as the "gold standard" when it comes to DOM traversal and manipulation. It also has features that aid in event handling, animation, and HTTP requests via Ajax. It is usually the first library a JavaScript developer learns once he or she has become comfortable in the JavaScript world. Here at Exaptive, we've made it dead simple to work with jQuery in your JavaScript components.


Let's dive in!


(When you're ready to start coding on your own, you'll want to have the Javascript Component API reference handy.)




Getting Started


To get started, create a new component from your studio by clicking the "+" button. Select "JavaScript" is the selected type and give your component a name. Finally, click the "Create" button.


You should now see the EDIT page of your newly created component. This is where you can edit things like the component's description, it's inputs & outputs, and the actual script it runs. Normally, we would be interested in the component's specification (the SPEC tab), but in the case of jQuery this isn't necessary. Go ahead and navigate to the spec to see what I mean.


The spec is where we can edit things like the name of the component or add tags to help other users find it and use it in their own xaps. It is also where we can add dependencies to the component in the form of JavaScript libraries. However, we can skip this step for jQuery. By default, every JavaScript component in the Exaptive platform comes with jQuery as a dependency (see the "dependencies" section of the spec file). This is mainly due to the utility that jQuery provides and the fact that it is one of the most popular libraries on the market.


So, there is no need to add jQuery! You've already got it!


NOTE: If you don't need to use jQuery or simply don't want to use it in your components, feel free to remove it as a dependency. It isn't required for JavaScript components to run; we simply include it as a means of helping developers get started.


Hello, jQuery!


Since jQuery is already set up as a dependency, let's edit the script and test your component in a xap to make sure that everything is working as expected.


First, open your component's script by clicking on the SCRIPT tab on the left-hand side of the screen. This is your component's script. This is where you write the code to give life to your component and have it do something awesome.


In the script, you'll see a method called doSomething. We are going to ignore that for now. Instead, turn your attention to the _init method. This method gets fired when your xap loads the component and initializes it. We're going to write our code here so it happens immediately when we add our component to our xap in the next step.


In the _init method add the following:

 

let $ = this.api.imports.$;
let element = $(this.api.layoutElement);
element.html("Hello, jQuery!");

 

This is a simple "Hello, World" example of using jQuery to show that we can use it in our component. The first line accesses our imports (or dependencies) via the name we give it in the spec file. In this case, jQuery has the name $ assigned to it. Then, we use jQuery to get our component's top-level DOM element. In the spec file you will notice that our layout element is defined in the layoutSpec section, and by default, it has a class of my-comp. Thus, we could have also used:

 

let element = $('.my-comp');

 

Finally, the last line uses jQuery's html method to modify the inner HTML of our DOM element to say "Hello, jQuery!" This is a very simple example, but it shows that you, as a developer, have access to a very powerful and feature-rich library right out of the gate!


Now let's see it in action!


Using Our Component


Time to see the fruits of our labor! Go back to your studio and click the "+" button again, but this time select "xap." This will bring you directly to the DATAFLOW section of the Studio.


From here, add your component to the DATAFLOW. 


Then go to PREVIEW and you will see your "Hello, jQuery!" message. Beautiful, isn't it?



That's it! You've successfully created a jQuery component! Use your newfound powers wisely.


Happy building!