jQueryのkeydown, keyup, keypressのイベント時におかしな値がくるー！ Android Chrome
まぁ基本的にここのブログに詳しく書いてました。
JavaScript : 日本語入力時のキーイベント。 - freefielder.jp
keydown, keyup, keypressでイベントを取っているとAndroidのChromeで挙動が何かおかしい。。。
上記のブログにあるここで確かめたけど・・・あれ？
おかしい値は来てないな～・・・
こうなったら全部吐き出してやろう！
って、自分で上記のkeyCode表示jsみたいな感じのを作ってみました。
その結果わかったことは
なんかkeyCode undefinedが来てやがる・・・
は？
ってことで
if(event.keyCode === undefined){
return;
}
を一番上に入れてやりました。
これってバグじゃね？とか思いながら
※jQuery 1.9使用時なのでそれ意外はわかりません。
jQuery Mobile のpopupが移動してしまうのを防ぐ
jQuery mobile (1.3) のpopupで場所を指定して開いたのにWindowサイズを変更したり、Android端末でスクロールしようとしたりするとpopupが中央に移動してしまいます。
今回の記事ではそれを防ごうってわけです。
まず、Windowサイズを変更した際になぜ中央に移動してしまうのか
知りません。・・・
なんででしょうね。
座標を再計算しないと何かしらの不都合があるのでしょう。
それなのにpopupの後ろに表示しているあいつ(モーダル時)はサイズそのままなんですよね・・・
ま、移動されてしまうわけです。
なので、移動後のイベントが取れるのでそいつを利用します。
ポップアップの要素にイベント追加
$("#myPopup").on("popupbeforeposition", function( e, data ) {
delete data.x;
delete data.y;
data.positionTo = "#myLink";
});
dataに座標が入っているようです。
data.xはx軸座標
data.yはy軸座標
data.positionTo はwindowだとかoriginだとかの情報が入っています。
初めはdata.positionTo = "origin";でいけるんじゃね？と思ったのですがダメでした。
originだとここではどいつを指してるのかわからないですもんねｗ
で、結果としては
data.xを削除
data.yを削除
data.positionToに要素のセレクタを指定してやるとうまくいきました。
座標で表示したい場合は・・・
たぶんdata.xとdata.yを指定してやれば・・・
やってないのでわかりませんｗ
暇があればやっておきますね(←やらないパターン
それではあなたも楽しいpopup生活を！
参考
Popup doesn't take into account positionTo on resize? · Issue #4905 · jquery/jquery-mobile · GitHub
システム開発時に考慮すべき点 その１ 外部コンポーネントなどを使う時
最近、自分の書いたところと違うところでバグが発生します。
この箇所が同じ会社、パートナー会社ならまだよいのですが、外部のコンポーネントをしようして、そのコンポーネント内でバグが発生する際は本当に厄介。
せっかく、無駄な処理をコンポーネントにより排除したのに、余計な手間がかかってしまいます。
簡単なバグならコンポーネントをラップしてやればいいかもしれません。
今後のことも考えると、コンポーネントはできる限りいじらない方法がいいでしょう。
ですが、コンポーネントのコア部分など、どうしてもラップだけでは解決できないようなバグが出てきた場合。
大変です。
本当に。
・原因箇所がわかりにくい
・原因箇所を変えると他の場所も変更しなければならない
（・原因箇所がコア付近に近づくにつれ、影響範囲が大きい）
こいつらは本当に
「簡単だ！」「軽量だ！」「こいつ使えばこれだけのコーディングでこんなリッチなものができる！」
安易に導入するのはよくないですね。
javascriptを扱っている人なら聞いたことはあるであろうjQuery
もしかしたら、javascript=jQueryって思ってる人も・・・思っていなくても、jQuery無しではなかなかコーディングが。。。って人もいるのではないでしょうか？
ですがjQueryでさえバグは潜んでいます。
そんなjQueryを使ったコンポーネントたち。。。さらにバグは増えます。
そして、多機能、高性能っぽいものは中身が複雑なのでどうしてもある程度のバグが・・・
私も、どんどんいろいろなコンポーネントを使用したいです。
なにせ、ゆとり教育真っただ中だったので・・・
まずは、システムの仕様を固めましょう。
本当に細かく、細かく。
そして、コンポーネントを使う際は、
システムの仕様に合ったコンポーネントを複数あげ、１つずつ仕様で決めたことが確実に動くことを確かめてからコンポーネントを選択しましょう。
さらに、そのコンポーネントで使う機能が簡単な処理であれば自作し、コンポーネントの使用を避けましょう。
できる限りバグを避け、期待通りの動作をするシステムを心がけるましょう！ｗｗｗ
ってか、おめーtry chatchしてねーからしろよ！
ってのは冗談でまとまりがなくなってきました。
最後に
外部コンポーネントは便利な反面、見えないバグが隠れ潜んでいることを念頭にして、選定してください。
※仕様はシステムの心臓です
jQuery.upload.js でずっと応答が返ってこないときの対応
この前こんなのを書きました。
IE8も対応？ jquery.upload.js（jQueryプラグイン）でのエラー対策
これだけではダメだったようで、javascriptを取得した後にネットワークが切断された際。
jquery.upload.jsに渡しているCallBackが実行されません。ずっと・・・
なぜかというとjquery.upload.js内でjQueryの.load()をやっているためでした。
こいつはtimeoutがなくて、値が取得できるまで一生(!?)待ち続けます。
そこで対策としては
jquery.upload.jsの
iframe.load(function()
っていう行の上に
var loadTimeout = setTimeout(function(){
}, timeout);
こいつを追加します。(timeout はタイムアウト時間、適当に設定してやって)
そして、こいつの中にエラー処理を追加してやります。
また、先ほどの
iframe.load(function(){
clearTimeout(loadTimeout);
/*省略*/
});
って感じで1行追加しておいてやるのを忘れずに！
私は、
var loadTimeout = setTimeout(function(){
var data = null;
form.after(self).remove();
checkbox.removeAttr('checked');
checked.attr('checked', true);
if (inputs) {
inputs.remove();
}
setTimeout(function() {
iframe.remove();
if (callback) {
callback.call(self, data);
}
}, 0);
}, timeout);
ってな感じで書いて、上位のCallBack内でエラー処理をしています。
ホントはdataになにかしらのデータを突っ込んだ方がよいのでしょうかね。
なにげに.remove()は重要な気がします。
ちなみに.remove()はその用を削除すると同時にイベントも消すという素晴らしい機能を持っているようです。
今回はjquery.upload.jsってよりも、「jQueryの.load()にtimeout処理を追加する」って言った方がいいかもしれませんね。
jQuery flot IE8でのバグか！？
flotは基本canvasを使用しています。
しかし、excanvas.jsを読込むことによりIE8でも表示が可能になります。
excanvas.jsを読込む、ただそれだけ。だった気がする
ですが、古いバージョンではうまく動いてくれないようです。
なんかtrankから読込むといけるよ！ってかいてるけど・・・それって・・・
って感じですね。
今のバージョン(0.8くらい)だと普通に動きます。
ですが、やっぱり完ぺきではないようです。
所々で動作が意図したものと違う
こちらのQAサイトでも見つけました。
jquery - JqueryFlot inconsistent issue IE8 - Stack Overflow
いくつかのポイントでホバーイベントが(Chromeでは動くのにIE8では)動かないようです。
今回は報告まで
PHPのやっかいな比較 0 と null は同じ！？ 0 は empty ！？
①$hikaku = null;
②$hikaku = 0;
③$hikaku = "0";
if($hikaku == 0) {
echo "0だよな？";
} else {
echo "0じゃないよな？";
}
ってものを作ります。
結果は①②③ともに
0だよな？
になります。
はぁ？
私は②と③だけが"0だよな？"になると思っていましたがそうではないようです。
もちろんphpには== と===の演算子があることも知っています。
でもさ・・・
詳細はこちら
ってことで
if($hikaku == "0")
とすることで
0と"0"だけが通る場所を作れそうです。
あ～ややこしい。
他にも
empty(0)
は true だったりとややこしいもんです。
IE8も対応？ jquery.upload.js（jQueryプラグイン）でのエラー対策
ajax通信でファイルをアップロード！
HTML5が使えればいいんですけど、IE8とかあれ何で・・・こいつを使用していました。
最近いろんなサイトのリンクが切れてるみたいです。
（サイトがなくなったのかな？2013年11月とかの記事のリンク切れてたりしてたな）
jQuery.upload | jQuery Plugin Registry
ここから見るとまだあるようですね。。。
ってか、人気ないねｗ
ちなみに私は1.0.2を使っていたのですが、返信形式をjsonにして、timeoutなどの時どうなるのか実験してみました。
そしたら、IEでエラー・・・・（他のブラウザもだったかな？）
おい！
私の場合は 116行目でエラーが発生しましました。（"()" syntax error みたいなの）
jsonじゃないデータが返ってきたときにうまく処理できてないようですね。
jQueryなどをいじるのは面倒なのでjquery.uploadをいじります。
原因
jQueryのajaxでは、sessionが成功時、errorがエラー時といったように分かれていますが、jquery.uploadではわかれていません。
全てが同じところで処理されます。
そのため、jquery.upload内でエラーが発生しているようです。
対策
110行目あたりのswichすべてをtry{}とかで囲んでやって
catch{}内でreturn data;してやればok
ただ、返ってくるところで自分なりに処理をしないといけないですけどね。
ま、jquery.uploadが単純なので自分なりにカスタマイズするのもありかもしれません。
※カスタマイズによるあれやこれやはライセンスを見てくださいね
※追記
上記のことをやっても他の箇所で解決にはならないようで・・・
追加でこんなの書きました。
