Js/Ajax function into a Js file doesn't work

Question

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() {


$("#avanti").click(function(){


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


//chiamata ajax
  $.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.

Andrea

Answer 1

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.

Answer 2

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.