Expand my Community achievements bar.

SOLVED

Client libs error

Avatar

Level 5

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.

1 Accepted Solution

Avatar

Correct answer by
Employee

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

8 Replies

Avatar

Level 10
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?       

Avatar

Level 10
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.

Avatar

Level 5

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

Avatar

Employee

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...

Avatar

Level 5

    Yes Opkar, if i add jquery as a dependency to my clientlib and i load my clientlib first in my component then for sure the component works.

But i do not know why they are loading jquery in the footer. This is the process they follow in this project and i am new to this project

Avatar

Correct answer by
Employee

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...

Avatar

Level 5

Thanks for that Opkar, Am waiting for your response