2014-10-20 38 views
1

我敢肯定,我在這裏忽略了一些東西......我有一些jQuery代碼在按下表單按鈕時觸發。按下該按鈕,查看優惠券代碼並將其寫入表格的div中,然後應用折扣(總價=折扣)。問題是,當我通過Firebug進行調試時,大約80%的代碼工作。但是,當我運行代碼時,它不起作用。就像代碼運行速度太快,變量無法獲得正確的信息。下面的代碼:jQuery代碼不更新網頁

$('#coupon-submit').click(function() { 
    applyCoupon($('#coupon'), $(this)); 

    var price = $('#price-total').text(); 
    price = price.substring(5,price.length); 

    var theText = $('#fulldiscounttext').text(); // Sometimes this has a value while debugging, sometimes not 
    var discount = theText.substring(1, theText.length-4); // Takes unwanted characters out of string 

    var total = price - discount; 

    $('#price-total').text('US $ ' + total.toFixed(2)); 
    var thetotal = $('#price-total').text(); 
    $('#grandtotal').val(thetotal); 
}); 

applyCoupon()查找代碼,並將其寫入到DIV #fulldiscounttext。我正在嘗試以折扣金額更新#price-total div。它不更新(除非我正在調試它)。

的applyCoupon()函數:

function applyCoupon(couponInput, couponButton) 
{ 
    removeInputNames(); 
    $.ajax({ 
     data: $('#orderform').serialize(), 
     type: 'POST', 
     timeout: 5000, 
     url: 'coupon.php', 
     dataType: 'text', 

     beforeSend: function(request) 
     { 
      $('#coupon-error').text(''); 
      couponButton.attr('disabled', 'disabled'); 

     }, 
     success: function(data, textStatus) 
     { 
      couponButton.removeAttr('disabled'); 

      if(data == "bad error code") 
       couponOK = 0; 
      else 
       couponOK = 1; 

      if (!couponOK) 
      { 
       var badcode = couponInput.val().toString(); 
       if (badcode.length > 0) 
       { 
        var fmt = 'You\'ve entered an invalid code.'; 
        $('#coupon-error').text(fmt); 
       } 
      } 
      else // Coupon recognized! 
      { 
       $('#total-row').before('<tr><td colspan="4">' 
        + '<div id="fulldiscounttext">' + data 
        + ' Off</div>' 
        + '</td></tr>'); 

       // New discount information; save and update totals 
       $('#discount-storage').text(data); 
       showPrice(); 
      } 
     } 
    }); 
} 
+1

郵政'applyCoupon'功能 - 它可能是一個異步調用... – tymeJV 2014-10-20 19:01:45

+0

可以告訴你的'applyCoupon'代碼? – starvator 2014-10-20 19:02:07

回答

1

由於applyCoupon是一個異步函數的代碼的其餘部分將繼續運行,而請求的進程。使用一個回調來運行代碼調用完成後:

applyCoupon($('#coupon'), $(this), function() { 
    var price = $('#price-total').text(); 
    price = price.substring(5,price.length); 

    var theText = $('#fulldiscounttext').text(); // Sometimes this has a value while debugging, sometimes not 
    var discount = theText.substring(1, theText.length-4); // Takes unwanted characters out of string 

    var total = price - discount; 

    $('#price-total').text('US $ ' + total.toFixed(2)); 
    var thetotal = $('#price-total').text(); 
    $('#grandtotal').val(thetotal); 
}); 

而且applyCoupon功能:

function applyCoupon(couponInput, couponButton, callback) { 
    //AJAXy stuff 
    success: function(data, textStatus) 
    { 
     couponButton.removeAttr('disabled'); 

     if(data == "bad error code") 
      couponOK = 0; 
     else 
      couponOK = 1; 

     if (!couponOK) 
     { 
      var badcode = couponInput.val().toString(); 
      if (badcode.length > 0) 
      { 
       var fmt = 'You\'ve entered an invalid code.'; 
       $('#coupon-error').text(fmt); 
      } 
     } 
     else // Coupon recognized! 
     { 
      $('#total-row').before('<tr><td colspan="4">' 
       + '<div id="fulldiscounttext">' + data 
       + ' Off</div>' 
       + '</td></tr>'); 

      // New discount information; save and update totals 
      $('#discount-storage').text(data); 
      showPrice(); 
     } 
     callback(); //ADDED CALLBACK TO RUN ONCE THE AJAX REQUEST IS COMPLETE 
    } 
} 
+0

謝謝!一直以來都是這樣愚蠢的。不知道爲什麼我不早點來這裏。我知道jQuery足夠做一些事情,但是當它變得更復雜時,我就迷路了。異步調用解釋很有意義。現在我需要進一步瞭解回調。我感謝你的時間。 :) – 2014-10-20 19:22:52