ajax $ .get回調報告爲undefined

Question

我已經定義了一個div，根據PHP返回的MySQL表格數據通過ajax $ .get調用返回一個帶有默認輸入值的表單。

DIV的樣子：

<div id="esfContainer1"> 
</div> <!--end esfContainer1 div--> 

股利相對於身體標記絕對定位。

與表單驗證相關的腳本在包含在調用表單的主頁上時被破壞，所以我將它移至PHP輸出$ formContent。包含在PHP輸出

這裏是表單驗證並提交腳本：

<script type="text/javascript"> 

var senderName  = $("#sendName"); 
var senderEmail = $("#fromemailAddress"); 
var recipientEmail = $("#toemailAddress"); 
var emailError  = $("#esemailerrorDiv"); 

senderName.blur(checkName); 
senderEmail.blur(checkSEmail); 
recipientEmail.blur(checkREmail); 

function checkName() { 
if (senderName.val() == "YOUR NAME") { 
     $("#esemailerrorText").html("Please provide your name"); 
     $(emailError).removeClass("esemailError"); 
     $(emailError).addClass("esemailErrorNow"); 
     $(emailError).fadeIn("fast","linear"); 
     $(emailError).delay(2000).fadeOut("slow","linear"); 
     return false; 
    } else { 
     return true; 
    } 
}; 

function checkSEmail() { 
    var a  = senderEmail.val(); 
    var filter = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/; 

    if (filter.test(a)) { 
     return true; 
    } else { 
     $("#esemailerrorText").html("Please enter a valid email address"); 
     $(emailError).removeClass("esemailError"); 
     $(emailError).addClass("esemailErrorNow"); 
     $(emailError).fadeIn("fast","linear"); 
     $(emailError).delay(2000).fadeOut("slow","linear"); 
     return false; 
    } 
}; 

function checkREmail() { 
    var a  = recipientEmail.val(); 
    var filter = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/; 

    if (filter.test(a)) { 
     return true; 
    } else { 
     $("#esemailerrorText").html("Your friend\'s email is invalid"); 
     $(emailError).removeClass("esemailError"); 
     $(emailError).addClass("esemailErrorNow"); 
     $(emailError).fadeIn("fast","linear"); 
     $(emailError).delay(2000).fadeOut("slow","linear"); 
     return false; 
    } 
}; 

$("#emailForm").submit (function() { 
    if (checkName() && checkSEmail() && checkREmail()) { 

     var emailerData = $("#emailForm").serialize(); 
     $.get("style.php",emailerData,processEmailer).error("ouch"); 

     function processEmailer(data) { 
      if (data=="fail") { 
       return false; 
      } else if (data=="pass") { 
       $("#c1Wrapper").fadeOut("slow","linear"); 
       $("#confirmation").fadeIn("slow","linear"); 
       $("#esfContainer1").delay(2000).fadeOut("slow","linear"); 
       $("#backgroundOpacity").delay(2000).fadeOut("slow","linear"); 
       return false; 
      } 
     }; 
    return false; 
    }; 
    return false; 
}); 

我有飛濺轟炸上述提交與功能「返回false;」因爲submit函數只是簡單地打開處理PHP腳本而不是執行$ .get。使用Firebug監視提交函數報告processEmailer未定義。

我很新的這一點。我假定，因爲在submit函數中定義了ajax回調（並且processEmailer函數直接在ajax調用下定義），所以定義沒有問題。

在此先感謝您的幫助。

Answer 1

您已被困於function statements。函數聲明（將被提升）不允許在塊內部（if/else /對於body），並且如果它們出現在那裏，行爲就沒有被定義。 Firefox有條件地定義它們，並且在之後你已經在$.get調用中使用它 - 那麼它就是undefined，然後 - 如var functionName = function() {} vs function functionName() {}。

爲了解決這個問題，簡單地把它放在if塊之外（甚至在整個回調之外）。順便說一句，.error("ouch")將無法​​正常工作，您需要傳遞一個函數。

$("#emailForm").submit (function() { 
    if (checkName() && checkSEmail() && checkREmail()) { 
     var emailerData = $("#emailForm").serialize(); 
     $.get("style.php",emailerData).done(processEmailer).fail(function() { 
      console.log("ouch"); 
     }); 
    } 
    return false; 

    // now a proper function declaration, will be hoisted: 
    function processEmailer(data) { 
     if (data=="fail") { 
      return false; 
     } else if (data=="pass") { 
      $("#c1Wrapper").fadeOut("slow","linear"); 
      $("#confirmation").fadeIn("slow","linear"); 
      $("#esfContainer1").delay(2000).fadeOut("slow","linear"); 
      $("#backgroundOpacity").delay(2000).fadeOut("slow","linear"); 
      return false; 
     } 
    } 
});