Appel d'un fichier js externe à partir du modèle html

Question

J'ai un problème lors de l'appel au bouton onclick d'un fichier js externe, l'erreur sur la fonction onclick n'est pas définie.

<table class="table table-striped table-bordered table-nonfluid" style='width: auto;'> 
     <tr> 
      <td>Name: </td> 
      <td><input type='text' name='ref_name' id='ref_name'></td> 
     </tr> 
     <tr> 
      <td>Description: </td> 
      <td><input type='text' name='ref_desc'></td> 
     </tr> 
     <tr> 
      <td colspan='2' align='right'><button type='button' class='btn btn-primary' id="btn_save" onclick="saveMst();">Save</button></td> //this is the line onclick "saveMst()" is not defined when calling external js file. 
      <input type='hidden' name='ref_type' value='1'> 
     </tr> 
    </table> 

---

Ce sont les scripts que je définis en php:

$scripts = '<script type="text/javascript" src="js/references.js"></script>'; 

$smarty->assign('script', $scripts); 

---

Voici le code references.js

function saveMst(){ 
sessionExpired(); 
if(mstValidate()==true){ 
    var url= "ref_deparment.php?do=save&save=mst&ref_name="+encodeURIComponent(ref_name)+ 
      "&ref_desc="+encodeURIComponent(ref_desc); 
    alert (url);return false; 
    topMsgDisplay('Saving... Please wait...'); 
    var myAjax = new Ajax.Request(url, { method: 'get', onComplete: function(oR){ 
     hideOverlay(); 
     r = oR.responseText.split('||'); 
     //alert (oR.responseText); 
     if(r[0]==1) { 
      $('btn_save').style.display = 'none'; 
      alert('Record had been save sucessfully!'); 
      getEdit(r[1]); 
     } 
     else alert(r[1]); 
    } });  
} 
} 

function mstValidate(){ 
borderpass = '1px solid #ccc'; 
borderfail = '1px solid #f00'; 

shortdesc = $('ref_name').value; 
longdesc = $('ref_desc').value; 

err_msg = 'You\'ve encounter the below error:\n'; 
pass=true; 

if(shortdesc.length==0){ 
    pass=false; 
    err_msg += '* Name field is left empty.\n'; 
    $('ref_name').style.border = borderfail; 
}else { 
    $('ref_name').style.border = borderpass; 
} 

if(longdesc.length==0){ 
    pass=false; 
    err_msg += '* Description field is left empty.\n'; 
    $('ref_desc').style.border = borderfail; 
}else { 
    $('ref_desc').style.border = borderpass; 
} 

if(pass==false){ 
    alert(err_msg); 
    return false; 
}else return true; 
} 

Answer 1

Vous pouvez déplacer le gestionnaire d'événements le html en ligne dans votre fichier javascript. Vous devriez le mettre dans un bloc qui s'exécute quand le DOM est chargé afin que vous puissiez être sûr que tous les éléments auxquels vous attachez des gestionnaires existent.

Comme vous semblez être en utilisant jquery, qui ressemblerait à quelque chose comme:

$(function(){ 
    // Document ready 
    $('#btn_save').on('click', function() { 
     saveMst(); 
    }); 
});