Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

Using Jquery functions on a ClientLibrary

Avatar

Level 2

I am having some trouble on using a Jquery function my js file inside my clientLib folder. Inside my js file the code that I used was:

$(document).ready(function(){ alert("test") $('.storeLocatorFormSubmit').click(function(){ alert("Hello world"); }); });

and then stumbled on a question on Stackoverflow where it suggest that instead of using the "$" I replaced it the word "jQuery" so after changing the code into this:

jQuery(document).ready(function(){ alert("test") jQuery('.storeLocatorFormSubmit').click(function(){ alert("Hello world"); }); });

The alert with value of "test" is now being displayed on the page but the alert box does not show every time I click the button of "storeLocatorFormSubmit".

1 Accepted Solution

Avatar

Correct answer by
Level 2

Thank you for your responses.

For the

jQuery('.storeLocatorFormSubmit')

I am trying to bind a click function to a button once the form is being submitted. I gave another shot to use the keyword "jQuery" rather than "$" and it now works as expected.

View solution in original post

7 Replies

Avatar

Level 10

We have a JQUERY article with AEM https://helpx.adobe.com/experience-manager/using/integrating-jquery-framework-cq.html.

The $ is valid syntax. Try using Chrome and place a break point on the JS method. Your code looks fine. 

Avatar

Level 10

As Scott mentioned using $ is valid syntax and u can use it.

Check the error in browser console when you are using '$'

Make sure you use jquery code only once jquery library has been loaded.

Are you trying to get click in event on particular class?

Avatar

Level 2

Thank you for the quick response, yes I tried the tutorial based on the given article. But for clarification the jquery code is located on an external file. The way I setup my Client Library Folder is that I declared a dependency on the jquery library that is already present on AEM.

Avatar

Level 2

I think that the $ is valid if the Jquery code is located inside the script tag (<script>) but AEM does not recognized it if the code is on its external javascript file. Please correct me on this one.

Avatar

Level 10

U can use $ irrespective of way you load jquery

Avatar

Level 9

Hi,

Go to browser console where you have loaded your page with this code. Type below code in the browser console. 

jQuery('.storeLocatorFormSubmit')

Does it return "undefined" or an object?. if it is undefined, it means, Event binding is not happening.

Avatar

Correct answer by
Level 2

Thank you for your responses.

For the

jQuery('.storeLocatorFormSubmit')

I am trying to bind a click function to a button once the form is being submitted. I gave another shot to use the keyword "jQuery" rather than "$" and it now works as expected.