Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

"$ is not a function" JQUERY problem on my site ?

Avatar

Level 2

Hello everyone, I got an error when I go to my site, actually I think it's Jquery the problem but I can't find how to fix this..

here my component page:

<html data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html">

    <head>

    <title>My Title</title>

    <sly data-sly-call="${clientlib.js @ categories='cq.jquery'}"/>

    </head>

    <body>

    <div data-sly-include="/libs/wcm/core/components/init/init.jsp"></div>

    <header>

  

    </header>

    <main>

            <!-- <div data-sly-resource="${'responsivegrid' @ resourceType='wcm/foundation/components/responsivegrid'}"></div> -->

              <div class="container">

                 <sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html"/>

                 <sly data-sly-call="${clientlib.css @categories='horizon-static.components'}"/>

                 <sly data-sly-call="${clientlib.js @categories='horizon-static.components'}"/>

                 <div data-sly-resource="${'content' @ resourceType='wcm/foundation/components/parsys'}"></div>

                 <sly data-sly-resource="${'par' @ resourceType='wcm/foundation/components/responsivegrid'}/>

              </div>

    </main>

    </body>

</html>

Here the error I get in my console when I'm on the editor page on my site, if someone have an idea or something I would appreciate, because lot of work I try to do with my components, does not work because this error is thrown..


Uncaught TypeError: (intermediate value)(...) is not a function               at all.js:6318

Uncaught TypeError: $ is not a function                                                 at all.js:6297

    at HTMLDocument.<anonymous> (all.js:6297)

    at fire (jquery.js:3232)

    at Object.fireWith [as resolveWith] (jquery.js:3362)

    at Function.ready (jquery.js:3582)

    at HTMLDocument.completed (jquery.js:3617)

1 Accepted Solution

Avatar

Correct answer by
Level 2

Hey again, finally I fixed it ! Got this error because I use a color picker component where Jquery was not included as a dependency.

Thanks for the help

View solution in original post

6 Replies

Avatar

Community Advisor

HI,

I could see the dependency JS category(cq.jquery) is directly included via template/call.

Recommendation/best practice to organize client libraries folders and ways of including it in Base page component has been mentioned in detail in Getting Started with AEM Sites Part 3 - Client-Side Libraries and Responsive Grid

Suggest you follow the same way and see if that helps solve the issue.

Avatar

Level 2

Hello guyz, thanks for you answers

Actually I removed all the potential include to Jquery in my template(s) and page/components, but I still got this error, I suspect it comes from something else but I can't figure out from where..

I don't understand how I got an error "$ is not a function" from a "core" file but not in my html when I use $..

Avatar

Level 10

So when you use JQuery in a component - there is no error?

Avatar

Correct answer by
Level 2

Hey again, finally I fixed it ! Got this error because I use a color picker component where Jquery was not included as a dependency.

Thanks for the help

Avatar

Level 1

Hi,

I am getting same error and i added jquery as a dependency to my color picker clientlibs (cq.jquery) . Problem not solved. did you do anything different ?

Thanks

Kishore