"$ is not a function" JQUERY problem on my site ? | Community
Skip to main content
H
hadrien303
Level 2
April 11, 2018
Solved

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

  • April 11, 2018
  • 6 replies
  • 6608 views

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)

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by hadrien303

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

6 replies

Vijayalakshmi_S
Vijayalakshmi_S
Level 10
April 11, 2018

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.

smacdonald2008
smacdonald2008
Level 10
April 11, 2018

Here is an older community artilce that shows use of JS and HTL -- Adobe Experience Manager Help | Creating an Adobe Experience Manager HTML Template Language component that uses JavaScri…

H
hadrien303Author
Level 2
April 13, 2018

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

smacdonald2008
smacdonald2008
Level 10
April 13, 2018

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

H
hadrien303AuthorAccepted solution
Level 2
April 25, 2018

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

K
kishorec5702717
June 7, 2018

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

Terms & ConditionsAccessibility statement

Loading footer...