Question

当用户在jQuery UI对话框中单击“确定”时，页面（有时）在AJAX调用完成之前被重新加载，导致未发送数据。我尝试添加

.done(function() {
                window.location.href = cancelURL;

调用ajax，但这会导致400错误。

jQuery(document).ready(function($) {
    $('.button.suspend').click(function(e) {
        e.preventDefault();
        var cancelURL = jQuery(this).attr("href");
        var subscription_id = $.urlParam('subscription_id', cancelURL);
        var is_other = 0;
        var popUpList = $('<form name="pauzeerreden" title="Waarom wil je de herhaalservice pauzeren?"><label><input type="radio" name="cancelreason" value="tesnel" class="reason">De mascara&apos;s volgen elkaar te snel op</label><br><label><input type="radio" name="cancelreason" value="teduur" class="reason">Ik vind de mascara te duur</label><br><label><input name="cancelreason" type="radio" value="kwaliteit" class="reason">Ik vind de kwaliteit van de mascara&apos;s niet goed genoeg</label><br><label><input name="cancelreason" type="radio" value="geenformule" class="reason">Mijn ideale mascara formule zit er niet tussen</label><br><label><input name="cancelreason" type="radio" value="geenborsteltje" class="reason">Mijn ideale borsteltje zit er niet tussen</label><br><label><input name="cancelreason" type="radio" value="uitproberen" class="reason">Ik wil de mascara eerst uitproberen</label><br><label><input name="cancelreason" id="otherreason" type="radio" value="other" />Anders, namelijk...</label><div id="otherinput" style="display:none;"><input type="text" name="overig" id="textinput" size="10" /></div><script>$("#otherreason").click(function(){ var otherreason = document.getElementById("otherreason"); var otherinput = document.getElementById("otherinput"); otherinput.style.display = otherreason.checked ? "block" : "none"; var input = document.getElementById("textinput"); input.focus(); }); $(".reason").click(function(){ $("#otherinput").hide(); }); </script></form>');
        var that = this;
        var choice = "blank";

        $(popUpList).keydown(function(e) { if(e.which == 13) {
            $(':button:contains("Pauzeer")').click();
          }
        });

        $(popUpList).dialog({
            modal: true,
            width:'auto',
            text: "text",
            dialogClass: 'fancybox-container',
            buttons: {
                "Pauzeer": function() {
                    for( i = 0; i < document.pauzeerreden.cancelreason.length; i++ ) {
                            if( document.pauzeerreden.cancelreason[i].checked == true ) {
                                    var val = document.pauzeerreden.cancelreason[i].value;
                                    if(val=='other') {
                                            val=document.pauzeerreden.overig.value;
                                            is_other = 1;
                                    }
                                    else { is_other = 0; }
                            }
                    }
                    if (! val) {
                        val = "Geen reden opgegeven";
                    }
                        $.ajax({
                      url: ajax_object.ajax_url,
                      type: 'POST',
                      data: {'action': 'wcs_cancel_confirmation', 'subscription_id' : subscription_id, 'reason_to_cancel': val, 'is_other': is_other}
                    }).done(function() {
                window.location.href = cancelURL;
            });
                            $(this).dialog("destroy");
                        },
                "Ik wil toch niet pauzeren" : function() {
                        $(this).dialog("destroy");
                        }
                    }
                });
            return false;
    });

})

Answer 1

要阻止提交表单或阻止ajax调用更改位置，可以使用：

 event.preventDefault()

在点击了元素的听众中

 $("a").click(function(event){
  event.preventDefault();
 });

Answer 2

尝试

 e.preventDefault();

了解更多：event.preventDefault()

在使用jQuery UI表单完成AJAX调用之前正在重新加载页面

2 个答案: