Adobe Experience Manager Sites & More

Jai1122 · 10/15/15

Hi All,

My html structure is as follows,

<html> <head> <cq:includeClientLib css="my.categories" /> </head> <body> <!--Header Files--> <!--Navigation files--> <!--Main Body Starts here--> <!--Component that uses jQuery--> $(document).load(function(){ //do something }); <!--Footer part starts here --> <footer> <cq:includeClientLib js="cq.jquery" /> <cq:includeClientLib js="my.categories" /> </footer> </body> </html>

Since i am loading the jQuery clientlib at the footer the jquery in the component is not working. It says $ is not defined.

In such case is it impossible to use jQuery? Kindly let me know how i can proceed!!!

Thanks,

Jai.

Opkar_Gill · 10/15/15

Get you now, as you probably know putting the call to load the client libraries at the bottom is done to improve page load times [1][2].

I'd explain your issue to the tech lead or try what Praveen suggested.

Regards,

Opkar

[1] https://developer.yahoo.com/performance/rules.html#js_bottom

[2] http://stackoverflow.com/questions/9814301/is-it-practically-good-to-put-js-files-at-the-bottom-of-w...

View solution in original post

edubey · 10/15/15

Using js/jquery code inside jsp is not a recommended practice. I would you to call same jQuery code after jQuery file is loaded. You can put that in a js file and call that file after jQuery is loaded. Can you tell what u r trying to do by using this jQuery in jsp file?

edubey · 10/15/15

I would recommend to add a div in your component with a "id" attribute. Using this id your can manipulate/populate anything inside this div using js and place your ajax call code js file after jQuery is loaded.

Jai1122 · 10/15/15

Hi Edubey,

I am making an ajax call to a servlet and processing the JSON response to populate a div in the component.

I referred some article that is similar to the one described here

Opkar_Gill · 10/15/15

Hi,

in the first article referenced by the link you posted [1], they add jquery as a dependency to their custom client library. This is preferable to making a separate call to load jquery. Any reason you were loading JQuery in the footer?

Regards,

Opkar

[1] http://blogs.adobe.com/mtg/2011/11/building-components-in-adobe-cq-5-part-1-a-tutorial-on-clientlibs...