htmlテンプレートから外部jsファイルを呼び出す

Question

外部jsファイルを呼び出すonclickボタンで問題が発生しました。onclick関数がエラーになっています。定義されていません。ここで

---

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

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

あなたはからイベントハンドラを移動することができます

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

references.jsコードです：

<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> 

---

この

は私がPHPで定義されたスクリプトでありますあなたのjavascriptファイルへのインラインhtml。 DOMをロードするときに実行されるブロックに配置して、ハンドラをアタッチしているすべての要素が存在することを確認する必要があります。以下のようなものになります

あなたはjqueryのを使用しているように見えるとして、：

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