jQuery problems

Uncaught ReferenceError: $ is not defined

How do I add jquery for the error that occurs because there is no jQuery specific to the metronic template?

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (6)

How can I use jquery in my project?

Hi,

If you are trying to run a jquery code when the Metronic main bundle js that includes jquery snd other plugins you may get that error. To fix this just run your code on document ready event by refering to our custom js scripts under src/sass/.

Also please double check that sll dependecy js scripts are fully loaded.

Regards.

Deleted comment

Hi Sean,

I think that is exactly the error that cut me off, when I upgraded from 8.0.38 to 8.1 AND I STILL HAVE THIS ERROR TILL NOW (Thought about not use anymore jQuery due to this, but a lots of components we are using are based on jQuery)

I mean all my code was working like a charm,

Once I upgraded to 8.1, I got errors everywhere I used Select2 in my Modal on ajax, and since Select2 is jQuery dependent, I got that error of "Uncaught ReferenceError: $ is not defined"

Now I got the issue happy,

thank also to user Büşra (OP), to bring that up,

But how to from now on to use run my code on document ready event ?????

I wen as you refering to go to you custom js scripts under src/sass/. as you said above but didn't find nothing !!!

But instead I sneak up on your js code and found something useful, is this the code you are refering too (I took example of a KTImage):


// On document ready
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', KTImageInput.init);
} else {
KTImageInput.init();
}

If so, please advice, bair with me witness with this one please .

NB : Thins is not just an issue for me, it's the whole Web project we are building that rely on, please advice.

Thank you Sean for everything, wait for you simple and accurate explanation (As JS is not my strength point)

Thank you.

Hi,

Thank you for the feedback.

Have you tried to use the below KTUtil API ? Within this handler you can init your custom scripts and access all plugins from assets/plugins/global/plugins.bundle.js including jQuery.

KTUtil.onDOMContentLoaded(function () {
// run this on DOM ready
});

And just make sure that your scripts are loaded after the main bundle:

<script src="assets/plugins/global/plugins.bundle.js"></script>
<script src="assets/js/scripts.bundle.js"></script>

Regards.

This thread Sean is GOLD.

It avoided me a hell of problem, now I know exactly what was messed up.

This Thred and thoses snippets should be Pinned up, ;) for later user.

Thank you so much Sean.

https://imgur.com/a/pmQqwmD


I have file application.html.haml

I render other pages in this file with ruby ​​specific code.
but jquery doesn't work on the pages I include in it.

so it seems to work only on the typed page.
It doesn't work on pages rendered on that page.


I don't understand your solution, what should I do? js files seem to be loaded successfully on the page.

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(