更好的方法来暂时禁用ajaxForm插件上的ajax提交 [英] Better way to temporarily disable ajax submission on ajaxForm plugin

问题描述

我在表单上使用jQuery malsup ajaxForm插件。我有一堆POST变量被提交并且工作正常，我想使用相同的后置变量来执行导出到文件选项。这意味着对两种提交类型使用相同的表单。

由于您无法通过AJAX提交下载文件，我正在使用 .unbind（'submit'）。submit（） code>，以防止先前分配的ajax事件处理程序被触发。



发生这种解除绑定后，我必须在运行时重新运行ajaxForm构造函数用户希望使用AJAX更改过滤器（不用于导出）。

在我花更多时间修复边缘案例和一些错误之前，我想知道是否有一个更干净的方法来做到这一点？ 使用自定义事件和触发器（）

首先，在表单上放一个单选按钮，让用户在AJAX /导出到文件之间切换。假设这个字段的名称是 submitAction

第二，您的提交侦听器仅用于决定下一步发生什么取决于 submitAction 收音机的值。这是您触发自定义事件的地方（我们在步骤3中定义它们）：

  $（'form.specialform'）。 on（'submit'，function（e）{
 e.preventDefault（）; 
 var checked = $（this）.closest（'[name =submitAction]'）。filter（' （'checked'）; 
 if（checked.val（）=='ajax'）{// ajax！
 $（this）.trigger（'submitAJAX'）; 
} else { / export to file！
 $（this）.trigger（'submitExport'）; 
} 
}）; 
  

第三，使用两个事件侦听器定义您的自定义事件：
$ b （'submitAJAX'，function（e）{
// do AJAX call here
））$ b

  $（'form.specialform'）。 ; （'submitExport'，function（e）{
 // do file export here 
}）; 
 $ b $（'form.specialform'）。 
  

正如您所看到的，这样做可以避免解除绑定和重新绑定的混乱事件处理程序一堆。

这有帮助吗？

I'm using the jQuery malsup ajaxForm plugin on a form. I've got a bunch of POST vars that get submitted and this is working fine, I want to use the same post vars to perform an Export to file option. This means using the same form for both submission types.

Because you can't download Files through an AJAX submission, I'm using .unbind('submit').submit() on the form to prevent the previously assigned ajax event handlers from firing.

After this unbinding occurs, I then have to re-run the ajaxForm constructor when the user wants to change the filters using AJAX (not for the export).

Before I invest more time in fixing the edge cases and a couple of bugs, I wondered if there was a cleaner way to do this?

解决方案

Use custom events and trigger()!

First, put a radio button on your form to allow the user to switch between AJAX/Export to file. Let's say the name of this field is submitAction

Second, your submit listener acts only to decide what happens next based upon the value of the submitAction radio. This is where you fire the custom events (we define them in step 3):

$('form.specialform').on('submit',function(e){
    e.preventDefault();
    var checked = $(this).closest('[name="submitAction"]').filter(':checked');
    if(checked.val() == 'ajax'){ //ajax!
        $(this).trigger('submitAJAX');
    } else { //export to file!
        $(this).trigger('submitExport');
    }
});

Third, define your custom events with two event listeners:

$('form.specialform').on('submitAJAX',function(e){
    //do AJAX call here
});

$('form.specialform').on('submitExport',function(e){
    //do file export here
});

As you can see, doing it this way allows you to avoid the mess of unbinding and rebinding the same event handlers a bunch of times.

Does that help?

这篇关于更好的方法来暂时禁用ajaxForm插件上的ajax提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！