0

我在我的 AJAX 调用中使用微调器。我在一个函数中实现了绑定代码，因此我可以随时使用它，并避免某些 AJAX 调用使用微调器。例如，我有一个用户名和电子邮件存在检查 onkeyup ，显然我不希望微调器在按下键时显示。

我实现它的方式是有效的，但是如果客户端验证完成，例如在注册页面上触发一个 ajax 调用，并且发回一个错误，用户名和电子邮件将在按下键时开始显示微调器。

这是代码：

HTML

<div id="spinner" class="spinner hidden">
    <img id="img-spinner" src="<?php echo base_url(); ?>/images/spinner.gif" alt="Loading"/>
</div>

遮罩功能

    function show_hide_loading_mask() {
        $("#spinner").bind("ajaxSend", function() {
            $(this).show();
            $.blockUI({ message: '' }); //Set message to empty to remove default Loading message and show spinner instead
        }).bind("ajaxStop", function() {
            $(this).hide();
            $.unblockUI();
        }).bind("ajaxError", function() {
            $(this).hide();
            $.unblockUI();
        });
    }

表单提交调用

$('#frmMyForm').submit(function(){
      if (validate()) {
        show_hide_loading_mask();

        $.ajax({
            type: "POST",
            url: "ajax/path",
            data: $('#frmMyForm').serialize(),
            dataType: "json",

            success: function(data){
               if (data.response == "OK") {
                    console.log('OK');
               } else {
                console.log('NOT OK');
               }
            },
            error: function(xhr, textStatus, errorThrown) {
                console.log('Exception...');
            }
        });
    } else {
        console.log('client side validation failed');
    }
    return false; // do not actually submit
  })

验证功能：

function validate() {
    var param1 = $('#txtParam1').val();
    var param2 = $('#txtParam2').val();
    return param1.length >= 5 && param2.length >= 5 //return true when both are at least 5 chars long
}

任何想法为什么会在访问服务器后发生这种情况？当有 ajaxStop 时，它应该再次被禁用。

谢谢你。

4

2 回答 2

0

我找到了解决方案。问题是，一旦函数被调用，它就会继续与 ajax 函数绑定。

通过命名 ajax 函数可以解决这个问题。我现在有两个功能：

function show_loading_mask() {
    $(document).bind("ajaxStart.showSpinner", function() {
        $('#spinner').show();
        $.blockUI({ message: '' }); //Set message to empty to remove default Loading message and show spinner instead
    });

    $(document).bind("ajaxStop.showSpinner", function() {
        $('#spinner').hide();
        $.unblockUI();
    });

    $(document).bind("ajaxError.showSpinner", function() {
        $('#spinner').hide();
        $.unblockUI();
    });
}

function no_loading_mask() {
    $(document).unbind('.showSpinner');
}

然后在每次 ajax 调用之前，我相应地调用上述方法。这样，我只为那些需要的 ajax 调用显示微调器。

于 2012-08-22T13:06:42.887 回答
0

我不确定您是否应该将ajaxStop事件绑定到微调器的 div 上。

您尝试做的事情可以通过使用.ajaxError()和/或.ajaxComplete()来完成。

于 2012-08-22T12:33:33.073 回答