0

シナリオは次のとおりです。ページがあり、その中にjQueryUIダイアログを開くためのリンクがあります。ダイアログ内には小さなフォームがあります（画像をアップロードするため）。「アクション」ページは、ダイアログに返されることを目的とした画像を処理して返します。

現在、これはすべて期待どおりに機能しますが、何らかの理由で2回処理されています。視覚的には、送信と処理が2回行われていることを示すものは何もありません（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>
4

2 に答える 2

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必要です。

于 2012-09-17T20:08:03.943 に答える
1

リーありがとう。私は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();
});
}
于 2013-03-29T15:11:57.727 に答える