Question

这是场景 - 我有一个页面，其中有一个链接可以打开一个jQuery UI对话框。在对话框中是一个小表单（上传图像）。 'action'页面处理并返回图像，该图像将返回到对话框中。

现在，这一切都按预期工作 - 但是，由于某种原因，它会被处理两次。在视觉上，没有什么可以显示它被提交和处理两次（我只知道因为我正在使用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>

Answer 1

您.ajaxForm用于准备与ajax一起发送的表单。一个你使用它 - 该表单的每个提交将使用AJAX完成。因此，您必须将代码移到外面点击

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

（另外，你不需要在click处理程序中调用.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。

Answer 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();
});
}

Ajaxform＆amp; jQuery对话框 - 表单提交两次

2 个答案: