Ajaxform 和 jQuery 对话框 - 表单提交两次答案

【问题标题】：Ajaxform & jQuery Dialog - Form Submitted TwiceAjaxform 和 jQuery 对话框 - 表单提交两次
【发布时间】：2012-09-17 20:00:49
【问题描述】：

这是场景 - 我有一个页面，其中有一个链接可以打开一个 jQuery UI 对话框。对话框中有一个小表单（用于上传图像）。 “动作”页面处理并返回图像，该图像旨在返回给对话框。

现在，这一切都按预期工作 - 但是，由于某种原因，它被处理了两次。从视觉上看，没有任何迹象表明它被提交和处理了两次（我只知道是因为我使用的是 Firebug，并且我试图弄清楚为什么它的处理时间比预期的要长）。

在这里查看以前的答案，建议 jQuery 代码应该在对话框之外 - 但它已经在。我已经用尽了我现在能想到的所有途径。我是 JS/jQuery 的新手，所以我完全有可能遗漏了一些简单的东西。无论哪种方式，指针表示赞赏！下面是我的代码...

 <head[...]>
 <script>
 $(function() {
 $('#submitImage').bind('click', function(){
    $(".preview").html('');
    $(".preview").html('<img src="/images/elements/loaders/103.png" alt="Uploading...." style="text-align:center;"//>');
    $("#imgadd").ajaxForm({
    clearForm: 'true',
    target: '.preview'
    }).submit();
});
});
 </script>

[...页面的其余部分 ....]

 <!-- Dialog -->

 <div id="customDialog" class="customDialog" title="Upload or Insert Image">

 <form id="imgadd" action="a_blogimgupload.cfm" method="post" enctype="multipart/form-data">
 <input type="file" class="fileInput" name="blogimg" />&nbsp;<input type="submit" id="submitImage" value="Upload" /></form>

 <div class="preview">
 <ul>
 <li><img src="imgthumb.png" alt="" /><a href="javascript:;" title="Insert" onclick="addImage('imgfull.png');return false;">Insert</a></li>
</ul> 
</div>

【问题讨论】：

标签： jquery ajaxform

【解决方案1】：

您.ajaxForm 用于准备表单以使用ajax 发送。您使用它的一个 - 该表单的每次提交都将使用 AJAX 完成。因此，您必须将代码移到点击外部下方

$("#imgadd").ajaxForm({
    clearForm: 'true',
    target: '.preview'
    })

（另外，您不需要在点击处理程序中调用 .submit()，因为它已经导致提交）或者，您可以像这样更改代码：

$('#submitImage').bind('click', function(e){
    $(".preview").html('');
    $(".preview").html('<img src="/images/elements/loaders/103.png" alt="Uploading...." style="text-align:center;"//>');
    $("#imgadd").ajaxForm({
    clearForm: 'true',
    target: '.preview'
    }).submit();
    e.preventDefault();
});

e.preventDefault() 的位置（嗯，从未尝试过这样的事情，也许您还需要执行 e.stopPropagation()，但我不这么认为）将阻止浏览器执行默认操作，即提交。但最好是在这里做第一件事。

另外，.ajaxSubmit() 接受与 ajaxForm 相同的选项，但它也会导致立即提交。但是如果你要使用它 - 你需要删除 .submit 并且 e.preventDefault 仍然是必需的。

【讨论】：

谢谢！我让你的第二个例子在第一次尝试中工作。非常感谢！

【解决方案2】：

谢谢李。我的在 IE 中多次发帖。我现在也在 IE 中工作。发布我的一些 javascript....

$(document).ready(function () {
$("#uploadSubmit").button().click(function (e) {
    submitUploadForm();
    e.preventDefault();
    return false;
});

});

function submitUploadForm() {
$(function () {
    $('#reportOptions').ajaxForm({
        success: SubmitSuccesful,
        error: AjaxError,
        type: 'post',
        cache: false,
        url: baseHref() + 'Upload'
    }).submit();
});
}

【讨论】：