MW211 EXIT

devlog
jQuery/プルダウン(select)表示名取得
2012年09月27日
┌──────────────────────────────────────┐
│<select id="choice">                                                        │
│  <option value="1">one</option>                                            │
│  <option value="2">two</option>                                            │
│  <option value="3">three</option>                                          │
│</select>                                                                   │
└──────────────────────────────────────┘
みたいなプルダウンにて、選択されているものが二番目だった場合、

「2」を取得したければ、「$('#choice').val()」だけど

「two」を取得したければ、「$('#choice').children(':selected').text()」
なんだね。
分類:jQuery
JavaScript/コールバック関数の変数スコープ
2012年09月20日
以下のようにコールバック関数にグローバル的な変数valueを引き渡すことは
直書きだと可能だ。
┌──────────────────────────────────────┐
│function main() {                                                           │
│    var value = 1;                                                          │
│    $.getJSON(url,                                                          │
│              function(json) {                                              │
│                  alert(value);                                             │
│              }                                                             │
│    );                                                                      │
│}                                                                           │
└──────────────────────────────────────┘

しかし、コールバック関数を外に出すと、引き渡すことはできない。
┌──────────────────────────────────────┐
│function main() {                                                           │
│    var value = 1;                                                          │
│    $.getJSON(url,                                                          │
│              sub                                                           │
│    );                                                                      │
│}                                                                           │
├──────────────────────────────────────┤
│function sub(json) {                                                        │
│    alert(value);                                                           │
│}                                                                           │
└──────────────────────────────────────┘

本格的にグローバル変数にしてしまえばなんとでもなるが、
安易な濫用は避けたいところ。

ってことで、妥協案は以下の通りか。
┌──────────────────────────────────────┐
│function main() {                                                           │
│    var value = 1;                                                          │
│    $.getJSON(url,                                                          │
│              function(json) {                                              │
│                  sub(json, value);                                         │
│              }                                                             │
│    );                                                                      │
│}                                                                           │
├──────────────────────────────────────┤
│function sub(json, value) {                                                 │
│    alert(value);                                                           │
│}                                                                           │
└──────────────────────────────────────┘
コールバック関数に長々と記述するのを避けることはできる。

もっといい方法があるんだろうな、きっと。
分類:JavaScript、jQuery
jQuery/append()メソッドの要素指定の罠
2012年09月16日
┌──────────────────────────────────────┐
│.append($('<input>').prop('type','hidden'))                                 │
└──────────────────────────────────────┘
とかで、hidden属性とかを追加する訳だが、
セレクタのタグがいらねぇんじゃね?どうせタグ要素を指定するんだし、
とか思い、タグを取っ払った。
┌──────────────────────────────────────┐
│.append($('input').prop('type','hidden'))                                   │
└──────────────────────────────────────┘
するとsubmit時、他のPOST項目がクリアされてしまった。

大変だこりゃ(もちろん元に戻した)。

どういう仕組みなんだろう?
分類:注意、jQuery
jQuery/値を設定する場合の罠
2012年09月15日
┌──────────────────────────────────────┐
│.append($('<input>').prop('type', 'hidden')                                 │
│                    .prop('name', 'command')                                │
│                    .val(xyz)                                               │
│)                                                                           │
└──────────────────────────────────────┘
上記のような書き方は、以下のような書き方で代用できそうな気がする。
┌──────────────────────────────────────┐
│.html('<input type="hidden" name="command" value="' + xyz + '"/>')          │
├──────────────────────────────────────┤
│.append('<input type="hidden" name="command" value=" + xyz + '"/>')         │
└──────────────────────────────────────┘
こっちの方がHTML文に近いからわかりやすいし…。

実は怖い落とし穴があるのです。

変数xyzに「"」とかが入った場合。

サニタイズしていないので、valueに「"」が入らないのです。

ってことで、前者を使う方がいいみいたい。
但し、変な値が入らない場合は後者の方がわかりやすいかも。
とにかく、valueは文字列結合なんか使わないで、val()を使いましょうって話。
分類:注意、jQuery
jQuery/[0]を使ってなんとかやってたよ改善集(4)
2012年09月14日
┌──────────────────────────────────────┐
│$('tbody')[0].rows.length                                                   │
└──────────────────────────────────────┘
  ↓
┌──────────────────────────────────────┐
│$('tbody').children('tr').length                                            │
└──────────────────────────────────────┘
テーブルの行数を取得するには、children()を使うといいかも。
「tbody」の直下は「tr」しかないから、「children()」だけでもいいのかもね。
分類:jQuery
jQuery/[0]を使ってなんとかやってたよ改善集(3)
2012年09月13日
┌──────────────────────────────────────┐
│$('#セレクタ').scrollTop($('#セレクタ')[0].scrollHeight);                   │
└──────────────────────────────────────┘
  ↓
┌──────────────────────────────────────┐
│$('#セレクタ').scrollTop($('#セレクタ').prop('scrollHeight'));              │
└──────────────────────────────────────┘
末尾までスクロールするために、スクロール縦幅を取得するのはprop()で。
attr()だと取得できない(undefined)ので、ご注意を。
分類:jQuery
jQuery/[0]を使ってなんとかやってたよ改善集(2)
2012年09月12日
┌──────────────────────────────────────┐
│if ($('#セレクタ')[0]) {                                                    │
│    $('#セレクタ')[0].focus();                                              │
│}                                                                           │
└──────────────────────────────────────┘
  ↓
┌──────────────────────────────────────┐
│$('#セレクタ').focus();                                                     │
└──────────────────────────────────────┘
フォーカスをあてるのは、別に先頭要素にしなくてもよかったのね。
分類:jQuery
jQuery/[0]を使ってなんとかやってたよ改善集(1)
2012年09月11日
┌──────────────────────────────────────┐
│if ($(this).find(':hidden')[0])                                             │
└──────────────────────────────────────┘
  ↓
┌──────────────────────────────────────┐
│if ($(this).find(':hidden').length)                                         │
└──────────────────────────────────────┘
存在チェック。
ま、先頭の要素があるか否かで判断できるのですが、要素数を見た方がスマートかも。

なお、もっと、わかりやすく書けばこうです。
┌──────────────────────────────────────┐
│if ($(this).find(':hidden').length > 0)                                     │
└──────────────────────────────────────┘
分類:jQuery
jQuery/リアルタイムAjax表示のエラー
2012年09月06日
AjaxでJSON形式のデータを取得し、表示中の内容を書き換える処理を
断続的に行ったりすると、エラーが発生する。
どうも「TypeError」が発生するようなのだが、なんでだろう。
┌──────────────────────────────────────┐
│function autoFunc() {                                                       │
│    $.getJSON('AjaxURL',                                                    │
│              function(json) {                                              │
│                  try {                                                     │
│                      if (json) {                                           │
│                          $('#this').text(json.data);                       │
│                      }                                                     │
│                  } catch (e) {                                             │
│                      if (e.name == 'TypeError') {                          │
│                          throw e;  // エラーを握り潰す                     │
│                      } else {  // 他エラーを調査                           │
│                          alert(e.name);                                    │
│                          alert(e.message);                                 │
│                      }                                                     │
│                  }                                                         │
│              }                                                             │
│    );                                                                      │
│    setTimeout(autoFunc, 1000);  // 1秒でリロード                           │
│}                                                                           │
└──────────────────────────────────────┘
ま、こんな感じで調査してみる。
分類:jQuery
jQuery/closest()は便利
2012年08月30日
まずは、それぞれが指し示すもののおさらい。
  ①$(this).parent().parent('tr')
  ②$(this).parents('tr')  または$(this).parents().find('tr')
  ③$(this).closest('tr')
┌──────────────────────────────────────┐
│└tr          ←②                                                          │
│  └td                                                                      │
│    └table                                                                 │
│      └tr    ←①②③                                                      │
│        └td                                                                │
│          └this                                                            │
└──────────────────────────────────────┘
帯に短し(parent()=厳密に指定する必要あり)、
襷に長し(parents()=余計なものも拾ってくる恐れあり)。
closest()さんは便利なのです。

┌──────────────────────────────────────┐
│└tr                                                                        │
│  └某                                                                      │
│    └this                                                                  │
└──────────────────────────────────────┘
なのか
┌──────────────────────────────────────┐
│└tr                                                                        │
│  └某                                                                      │
│    └某                                                                    │
│      └this                                                                │
└──────────────────────────────────────┘
なのか、微妙な時に、parent()じゃ無理だけど、parents()じゃ心もとない。
そんな時にはclosest()さん。
分類:jQuery
前へ 1 2 3 4 5 6 7 8 9 10 次へ