TopJavaScriptjQueryプラグイン > 2013年2月
2013年2月18日

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

February 18,2013 12:03 AM
Tag:[, , ]
Permalink

以前紹介した「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として用意されています。

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

Comments [0] | Trackbacks [0]
2013年2月 1日

スマホのマルチタッチジェスチャーを判断できるjQueryプラグイン「Hammer.js」

February 1,2013 12:33 AM
Tag:[, ]
Permalink

スマホでのタップやスワイプなど、マルチタッチジェスチャーを判断できるjQueryプラグイン「Hammer.js」を紹介します。

Hammer.js
Hammer.js

1.機能

このプラグインを利用すれば、スマホなどのタッチデバイスで、

  • タップ
  • ダブルタップ
  • スワイプ
  • 長押し
  • トランスフォーム(ピンチイン・ピンチアウト)
  • ドラッグ

のイベントを判断できるようになります。

(クリックで拡大)
Hammer.js

2.プラグインのダウンロード

公式サイトにある「DOWNLOAD SOURCE」をクリック。

DOWNLOAD SOURCE

3.使い方

jQueryと、ダウンロードアーカイブに含まれるhammer.jsおよびjquery.hammer.jsを読み込みます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="hammer.js"></script>
<script src="jquery.hammer.js"></script>

イベントを受け取りたい要素に対して次のように記述します。このサンプルでは、「foo」の部分をタップすればアラートを表示します。

<div id="container">foo</div>
<script>
$('#container')
    .hammer({
        // 初期設定
    })
    .on('tap', function(ev) {
        // タップ時の動作を実装
        alert(ev);
    });
</script>

注:script要素はイベントを受け取りたい要素より後方に記述しないと動作しないようです。

イベントは次のものが用意されています。

  • dragstart:ドラッグ開始
  • drag:ドラッグ
  • dragend:ドラッグ終了
  • swipe:スワイプ
  • tap:タップ
  • doubletap:ダブルタップ
  • hold:長押し
  • transformstart:トランスフォーム開始
  • transform:トランスフォーム
  • transformend:トランスフォーム終了
  • release:リリース

すべてのイベントの動作については、以下のサイトが参考になります。

hammer.js マルチタッチ

初期設定については、公式サイトのgithubの以下のページを参照してください。

github - hammer.js#defaults

4.jQueryを用いない場合の使い方

jQueryを使わない場合は、次のような書き方で動作します。

<div id="container">foo</div>
<script src="hammer.js"></script>
<script>
var hammer = new Hammer( document.getElementById('container') );
hammer.ontap = function(ev) {
    // タップ時の動作を実装
    alert(ev);
};
</script>

イベントは次のものが用意されています。

  • ondragstart:ドラッグ開始
  • ondrag:ドラッグ
  • ondragend:ドラッグ終了
  • onswipe:スワイプ
  • ontap:タップ
  • ondoubletap:ダブルタップ
  • onhold:長押し
  • ontransformstart:トランスフォーム開始
  • ontransform:トランスフォーム
  • ontransformend:トランスフォーム終了
  • onrelease:リリース
Comments [0] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3