2

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

  • Try replacing $(document).ready(function() { with jQuery(document).ready(function($) { – Lodder May 19 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. – Andrea Suriani May 19 at 12:03
  • Glad it worked. I've added a proper answer below – Lodder May 19 at 12:35
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.

| improve this answer | |
0

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.

| improve this answer | |
  • Thanks. I have implemented also with this. Any tip is appreciate – Andrea Suriani May 19 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 May 20 at 0:11
  • No no it works!!! Thanks ! ;) – Andrea Suriani May 20 at 0:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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