I'm not a programmer (This is my hobby, but I like to learn new things). :)

I'm developing a JComponent on my side, and I need to integrate an Ajax Call in order to check something.

But I have this problem:

Here my code put in media/my_component/js

$(document).ready(function() {


  var codice_fiscale = $("#codice_fiscale").val();

//chiamata ajax

   //imposto il tipo di invio dati (GET O POST)
    type: "POST",

    //Dove devo inviare i dati recuperati dal form?
    url: 'index.php?option=com_doclf_jsajax&view=taskajaxes&task=checkcodicefiscale',

    //Quali dati devo inviare?
    data: "codice_fiscale=" + codice_fiscale,
    dataType: "html",

    //Inizio visualizzazione errori
    success: function(msg)
      $("#risultato").html(msg); // messaggio di avvenuta aggiunta valori al db (preso dal file risultato_aggiunta.php) potete impostare anche un alert("Aggiunto, grazie!");
    error: function()
      alert("Chiamata fallita, si prega di riprovare..."); //sempre meglio impostare una callback in caso di fallimento

Unfortunately, if I call it from

$doc = Factory::getDocument();
$doc->addScript(Uri::base() . '/media/com_doclf_users/js/codice_fiscale.js');

I receive a error on debug

ncaught TypeError: $ is not a function
at codice_fiscale.js:1

Instead, if I put it into a default.php inside the script tag (like <script> my script </script>) it works.

Can anybody explain to me why?

Thanks in advance.


  • Try replacing $(document).ready(function() { with jQuery(document).ready(function($) {
    – Lodder
    Commented May 19, 2020 at 11:06
  • @Lodder Thanks! Works, perfectly! :) Another question: this is a correct way to do this or not? I'm trying to understand how is the best way to do things in joomla. Commented May 19, 2020 at 12:03
  • Glad it worked. I've added a proper answer below
    – Lodder
    Commented May 19, 2020 at 12:35

2 Answers 2


You'd be best off using the jQuery global scope and passing $ as an alias inside the function instead:

jQuery(document).ready(function($) {

This helps prevent any conflicts with other 3rd party libraries that also use the $ namespace.

  • Works Perfectly! :) Commented May 20, 2020 at 0:26

The addScript method will be adding the <script> tag for your JS before jQuery. You can solve this easily by adding JHtml::_('jquery.framework'); before your addScript. Still, probably safer to use the jQuery global and $ as an alias within your function.

  • Thanks. I have implemented also with this. Any tip is appreciate Commented May 19, 2020 at 23:26
  • So you still have the same errors, even after instantiating the jquery framework before your addScript? This injects the necessary <script> calls for the jquery libraries before your <script>, so the jQuery errors should be subdued.
    – Grant G
    Commented May 20, 2020 at 0:11
  • No no it works!!! Thanks ! ;) Commented May 20, 2020 at 0:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.