jQuery.uploadプラグインで親要素のonsubmitを起動させない対処

jQuery.uploadプラグインで親要素のonsubmitを起動させない対処

Posted at February 18,2013 12:03 AM
Tag:[jQuery, Plugin, upload]

以前紹介した「jQuery.uploadプラグイン」で、onsubmitを起動しない対処方法を紹介します。

1.「jQuery.uploadプラグイン」について

「jQuery.uploadプラグイン」はAjaxによるファイルのアップロードが行えるようにするためのプラグインです。

jQuery.upload

jQuery.upload

2.問題点

元のフォームにonsubmitなどのイベントがある場合、jQuery.uploadでファイルをアップロードするとonsubmitまで起動してしまいます。

具体的には、jQuery.uploadで選択したファイルをサーバにアップロードして、そこからファイル情報をJSONで取得してブラウザに表示させ、その内容がOKであれば本来のフォーム送信やファイルアップロードを行いたいのですが、最初のファイルアップロードでフォーム情報が送信されてしまいます。

元のフォームのonsubmitが起動される理由は、jQuery.uploadのファイルアップロードでは一時的にアップロード用のフォームを作成し、そこにsubmitを実行する仕組みになっているのですが、そのsubmitが親のform要素にあるonsubmitに伝播してしまうためです。

3.対処方法

この挙動で小1時間ほど悩んでいたのですが、配布サイトのコメント欄に対処方法があるのをみつけて無事解決しました。

ということで、本エントリーでも紹介しておきます。

「jQuery.upload 1.0.2」の場合、以下の赤色部分を追加してください。

…前略…
form.submit(function(event) {
    iframe.load(function() {
        var data = handleData(this, type),
            checked = $('input:checked', self);
 
        form.after(self).remove();
        checkbox.removeAttr('checked');
        checked.attr('checked', true);
        if (inputs) {
            inputs.remove();
        }
 
        setTimeout(function() {
            iframe.remove();
            if (type === 'script') {
                $.globalEval(data);
            }
            if (callback) {
                callback.call(self, data);
            }
        }, 0);
    });
    event.stopPropagation();
}).submit();
…後略…

「jQuery.upload 1.0.2(圧縮版)」の場合、以下の赤色部分を追加してください。最後の行の「event」の直前もセミコロンも忘れずにつけてください。

…中略…
i='<form target="'+h+'" method="post" enctype="multipart/form-data" />';if(b.isFunction(d)){c=a;a=d;d={}}j=b("input:checkbox",this);h=b("input:checked",this);i=f.wrapAll(i).parent("form").attr("action",e);j.removeAttr("checked");h.attr("checked",true);g=(g=m(d))?b(g).appendTo(i):null;i.submit(function(event){k.load(function(){var l=o(this,c),q=b("input:checked",f);i.after(f).remove();j.removeAttr("checked");q.attr("checked",true);g&&g.remove();setTimeout(function(){k.remove();c==="script"&&b.globalEval(l);
a&&a.call(f,l)},0)});event.stopPropagation()}).submit();return this}})(jQuery);

4.event.stopPropagation()について

3項で追加した「event.stopPropagation()」は、イベントのバブリングを停止するためのメソッドで、jQueryのAPIとして用意されています。

「イベントバブリング」とは、イベントを発生させた要素から親要素へ伝播することを指します。

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)