Joomla 3.8 and Jquery - Does not work

Question

Hello! I searched everything that was singing and couldn’t find a step-by-step how to use Jquery in Joomla 3.8. I am creating a module and I would like to use Jquery.

I made it here:

1 - download jquery-3.3.1.js and put it in the folder: /modules/mod_mymodule/js

2. Reading the Joomla documentation, I added the following lines to my modules/mod_mymodule/mod_mymodule.php file:

   JHtml::script(JURI::base() . 'js/jquery-3.3.1.js');
   Jhtml::_('jquery.framework');
   Jhtml::_('jquery.ui');
   

3. At the bottom of my default.php file I added this:

   <?php
   $document = JFactory::getDocument();
   $document->addScriptDeclaration('
       window.event("domready", function() {
           alert("An inline JavaScript Declaration");
       });
   ');
   ?>
   

It should show an alert window when the page loads but does not work. What I am doing wrong?

Answer 1

To avoid conflict with Joomla libraries you should use JQuery with a different format. Instead of using the $ to fetch the ID, CLASS, etc, you must use the name jQuery:

var variavel = jQuery("#id_do_elemento_html").val();

On this page (Docs.joomla.org/J3.x:Developing_an_mvc_component/Adding_a_map) you will find an example of how to add a map, here the author makes use of Jquery the way I showed above. This is an official Joomla page

I do it like this and it always works.