Ajaxform & jQuery Dialog - Form Submitted Twice

Question

Here's the scenario - I have a page, within which there is a link to open a jQuery UI Dialog. Within the dialog is a small form (to upload an image). The 'action' page processes and returns the image, which is intended to be returned to the dialog.

Now, this all works as expected - however, it's being processed twice for some reason. Visually, there's nothing to show it's being submitted and processed twice (I only know because I'm using Firebug, and I was trying to figure out why it was taking longer to process than anticipated).

Looking at previous answers here, the suggestion is that the jQuery code should be outside the dialog - but it already is. I've exhausted every avenue I can think of now. I'm new to JS/jQuery, so it's entirely possible I'm missing something simple. Either way, pointers appreciated! My code below...

 <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>

[... rest of the page ....]

 <!-- 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

You .ajaxForm is used to prepare form for being sent with ajax. One you use it - each submit of that form will be done with AJAX. So, you must move code below outside click

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

(Also, you do not need .submit() call in click handler, as it already cause submit) Or, you may change your code like this:

$('#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();
});

Where e.preventDefault() (well, never tried such thing, maybe you will need to do also e.stopPropagation(), but I do not think so) will stop browser from executing default action which is submit. But the best would be here to do the first thing.

Also, there is .ajaxSubmit() which accept the same options as ajaxForm, but it also cause submit immediately. But if you will use it - you will need to remove .submit and e.preventDefault is still required.

Answer 2

Thanks Lee. Mine was posting multiple times in IE. Got mine working in IE too now. Posting some of my 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();
});
}