2011-04-28 135 views
1

我正在使用jQuery與ajax。有時,它給出錯誤$未定義。jquery不工作

這是我的代碼:

<script language="javascript" type="text/javascript"> 
    var base_path="<? echo $this->baseUrl().'/'; ?>"; 

    function checkemail() 
    { 
       var email=document.getElementById('comp_email').value; 
       //alert(email); 
     if(email!='') 
     { 

      $.ajax({ 
           url: base_path + "admin/jobs/emailcheck/", 
           data: "email="+email, 
           type: 'GET', 
         success: function (resp) 
         { 

             //alert(resp); 

             $("#valid_email").html(resp); 

             //alert($("#valid_email table tr td").text()); 
             if($("#valid_email table tr td").text()=='This firm is not exist in database. Firstly register this firm.') 
             { 
               //alert('ok'); 
               $.ajax({ 
                 url: base_path + "admin/profile/firmadd/", 
                 data:"flag=jobsController", 
                 type: 'POST', 
               success: function (resp) 
               { 
                 document.getElementById('firm_add_form').style.display=''; 
                 //alert(resp); 
                   $("#firm_add_form").html(resp); 
                   document.getElementById('register_typ').focus(); 
                   return false; 
               }, 
                 error: function(e){ alert('Error: '+e); } 
               });          
             } 
             else 
             { 
               document.getElementById('firm_add_form').style.display='none'; 
               document.getElementById('valid_email').style.display='none'; 
               var comp_name = resp.substring(0,resp.indexOf(',',0)); 
               var comp_web = resp.substring(resp.indexOf(',',0)+1); 
               document.getElementById('comp_name').value = comp_name; 
               document.getElementById('comp_web').value = comp_web; 
               return true; 
             } 
         }, 
           error: function(xhr ,e){ 
             alert(xhr.readyState); 
             alert('Error: '+e); } 
         }); 
       } 
    } 
</script> 

此功能在一個文本框呼籲onblur並呼籲onclick在相同的形式提交按鈕。

但是,當我打電話給onblur它正常工作,但當我打電話給onclick時,它會給出錯誤$ is not defined

當我給予警報(電子郵件),然後它在onclick上正常工作提交按鈕。

我的形式是以下:

 <form id="addfrm" enctype="application/x-www-form-urlencoded" method="post" action="" 
    name=""> 
    <table align="center" class="tbcss" width="100%" cellspacing="0" cellpadding="0"> 
     <tr> 
     <td align="right" valign="top" width="15%"><label for="comp_email" class= 
     "optional">Company Email:</label></td> 

     <td class="element" width="26%" valign="top"><input type="text" name="comp_email" 
     id="comp_email" value="" size="35" onblur="return checkemail()"><span id= 
     "valid_email" align="left" width="55%"></span></td> 

     <td align="right" valign="top" width="15%"><label for="comp_name" class= 
     "required">Company Name:</label></td> 

     <td class="element" width="26%" valign="top"><input type="text" name="comp_name" 
     id="comp_name" value="" size="35"></td> 
     </tr> 

     <tr> 
     <td id="firm_add_form" colspan="4"></td> 
     </tr> 

     <tr> 
     <td align="right" valign="top" width="15%"><label for="comp_web" class= 
     "optional">Company Website:</label></td> 

     <td class="element" width="26%" valign="top"><input type="text" name="comp_web" 
     id="comp_web" value="" size="35"></td> 

     <td align="right" valign="top" width="15%"><label for="category" class= 
     "required">Job Category:</label></td> 

     <td class="element" width="26%"><select name="category" id="category"> 
      <option value="" label="Select Category"> 
      Select Category 
      </option> 

      <option value="Architecture" label="Architecture"> 
      Architecture 
      </option> 

      <option value="Manufacturing" label="Manufacturing"> 
      Manufacturing 
      </option> 

      <option value="IT" label="IT"> 
      IT 
      </option> 
     </select></td> 
     </tr> 

     <tr> 
     <td align="right" valign="top" width="15%"><label for="job_title" class= 
     "optional">Job Title:</label></td> 

     <td class="element" width="26%" valign="top"><input type="text" name="job_title" 
     id="job_title" value="" size="35"></td> 

     <td align="right" valign="top" width="15%"><label for="contact_prsn" class= 
     "optional">Contact Person:</label></td> 

     <td class="element" width="26%" valign="top"><input type="text" name= 
     "contact_prsn" id="contact_prsn" value="" size="35"></td> 
     </tr> 

     <tr> 
     <td align="right" width="15%"><label for="close_date" class="optional">Closing 
     Date:</label></td> 

     <td class="element" width="26%"><select name="close_date" id="close_date"> 
      <option value="" label="Date"> 
      Date 
      </option> 

      <option value="1" label="01"> 
      01 
      </option> 

      <option value="2" label="02"> 
      02 
      </option> 

      <option value="3" label="03"> 
      03 
      </option> 

      <option value="4" label="04"> 
      04 
      </option> 

      <option value="5" label="05"> 
      05 
      </option> 

      <option value="6" label="06"> 
      06 
      </option> 

      <option value="7" label="07"> 
      07 
      </option> 

      <option value="8" label="08"> 
      08 
      </option> 

      <option value="9" label="09"> 
      09 
      </option> 

      <option value="10" label="10"> 
      10 
      </option> 

      <option value="11" label="11"> 
      11 
      </option> 

      <option value="12" label="12"> 
      12 
      </option> 

      <option value="13" label="13"> 
      13 
      </option> 

      <option value="14" label="14"> 
      14 
      </option> 

      <option value="15" label="15"> 
      15 
      </option> 

      <option value="16" label="16"> 
      16 
      </option> 

      <option value="17" label="17"> 
      17 
      </option> 

      <option value="18" label="18"> 
      18 
      </option> 

      <option value="19" label="19"> 
      19 
      </option> 

      <option value="20" label="20"> 
      20 
      </option> 

      <option value="21" label="21"> 
      21 
      </option> 

      <option value="22" label="22"> 
      22 
      </option> 

      <option value="23" label="23"> 
      23 
      </option> 

      <option value="24" label="24"> 
      24 
      </option> 

      <option value="25" label="25"> 
      25 
      </option> 

      <option value="26" label="26"> 
      26 
      </option> 

      <option value="27" label="27"> 
      27 
      </option> 

      <option value="28" label="28"> 
      28 
      </option> 

      <option value="29" label="29"> 
      29 
      </option> 

      <option value="30" label="30"> 
      30 
      </option> 

      <option value="31" label="31"> 
      31 
      </option> 
     </select> <span class="element"><select name="close_month" id="close_month"> 
      <option value="" label="Month"> 
      Month 
      </option> 

      <option value="01" label="Jan"> 
      Jan 
      </option> 

      <option value="02" label="Feb"> 
      Feb 
      </option> 

      <option value="03" label="Mar"> 
      Mar 
      </option> 

      <option value="04" label="Apr"> 
      Apr 
      </option> 

      <option value="05" label="May"> 
      May 
      </option> 

      <option value="06" label="Jun"> 
      Jun 
      </option> 

      <option value="07" label="Jul"> 
      Jul 
      </option> 

      <option value="08" label="Aug"> 
      Aug 
      </option> 

      <option value="09" label="Spt"> 
      Spt 
      </option> 

      <option value="10" label="Oct"> 
      Oct 
      </option> 

      <option value="11" label="Nov"> 
      Nov 
      </option> 

      <option value="12" label="Dec"> 
      Dec 
      </option> 
     </select></span> <span class="element"><select name="close_year" id="close_year"> 
      <option value="" label="Year"> 
      Year 
      </option> 

      <option value="2009" label="2009"> 
      2009 
      </option> 

      <option value="2010" label="2010"> 
      2010 
      </option> 

      <option value="2011" label="2011"> 
      2011 
      </option> 

      <option value="2012" label="2012"> 
      2012 
      </option> 

      <option value="2013" label="2013"> 
      2013 
      </option> 

      <option value="2014" label="2014"> 
      2014 
      </option> 

      <option value="2015" label="2015"> 
      2015 
      </option> 

      <option value="2016" label="2016"> 
      2016 
      </option> 

      <option value="2017" label="2017"> 
      2017 
      </option> 

      <option value="2018" label="2018"> 
      2018 
      </option> 

      <option value="2019" label="2019"> 
      2019 
      </option> 

      <option value="2020" label="2020"> 
      2020 
      </option> 

      <option value="2021" label="2021"> 
      2021 
      </option> 
     </select></span></td> 

     <td align="right" valign="top" width="15%"><label for="location" class= 
     "required">Location:</label></td> 

     <td class="element" width="26%"><input type="text" name="location" id="location" 
     value="" size="35"></td> 
     </tr> 

     <tr> 
     <td align="right" valign="top" width="15%"><label for="job_detail" class= 
     "optional">Job Details:</label></td> 

     <td class="element" width="26%" valign="top"> 
     <textarea name="job_detail" id="job_detail" cols="30" rows="5"> 
</textarea></td> 

     <td align="right" valign="top" width="15%"><label for="notes" class= 
     "required">Notes:</label></td> 

     <td class="element" width="26%"> 
     <textarea name="notes" id="notes" cols="30" rows="5"> 
</textarea></td> 
     </tr> 

     <tr> 
     <td align="right" valign="top" width="15%"><label for="block" class= 
     "optional">Block:</label></td> 

     <td class="element" width="26%"><input type="hidden" name="block" value= 
     "N"><input type="checkbox" name="block" id="block" value="Y"></td> 

     <td align="right" valign="top" width="15%"><label for="source" class= 
     "optional">Job Source/Link:</label></td> 

     <td class="element" width="26%" valign="top"><input type="text" name="source" id= 
     "source" value=""></td> 
     </tr> 

     <tr> 
     <td align="center" colspan="4"><input type="submit" name="add" id="add" value= 
     "Add" onclick="return checkemail();"> <button name="back" id="back" type="button" 
     onclick="window.location='/allindiazend/admin/jobs/list'">Back</button></td> 
     </tr> 
    </table> 
    </form> 

任何機構可以幫助我PLZ。

+1

已包含在您的網頁'jquery'庫之前確保jQuery是加載(和定義$)?如果你使用'jquery',你爲什麼要使用傳統的DOM查找例程('getElementByID'等)?我沒有看到經常這樣做。 – 2011-04-28 06:55:16

+0

你何時附加jquery.js文件? – vooD 2011-04-28 06:56:03

+0

是的,我已包括在內。 – Chirayu 2011-04-28 06:56:30

回答

5

$由jQuery庫定義。因此,你可能沒有成功將圖書館包含在你的網頁上。

  • 檢查你有一個包含它的<script>元素,它不是404錯誤。
  • 檢查你的網頁這樣做早期那麼任何試圖使用它
  • 檢查你是不是defer荷蘭國際集團的要求爲腳本
  • 檢查瀏覽器發出請求(在Net標籤無論調試工具(如螢火蟲)的使用
+0

請解釋2,3,4點。 – Chirayu 2011-04-28 07:03:20

+0

' ' - 1 *前* 2,但2 *後* 1 – Quentin 2011-04-28 07:04:18

+0

' 1' - 劇本是'defer'ed – Quentin 2011-04-28 07:04:32

0

您的jQuery的是沒有得到正確加載的時候。理想的情況下,使用谷歌的CDN加載它。

-2

你應該把所有的jQuery的腳本在documen準備好面對塊這樣:

<script type="text/javascript"> 
    $(document).ready(function(){ 
      //call jQuery enabled functions here 
     }); 
</script> 

此執行

+1

不,它沒有。它試圖立即調用'$'。這個嘗試假定jQuery **已經加載了**(我們知道情況並非如此),以便在DOM完成之前延遲運行該函數。 – Quentin 2011-04-28 07:00:14