MW211 EXIT

devlog
jQuery/POSTパラメータを追加
2012年01月06日
idが「フォーム」のformで(POSTで)submitした時に、
「$_POST['キー'] = '値'」みたいなのが渡されるようにしたい場合、
submit前にhidden属性のinputタグを追加すればいい。

┌──────────────────────────────────────┐
│$('#フォーム').append('<input type="hidden" name="キー" value="値"/>');     │
└──────────────────────────────────────┘
こんな感じ。
で、submit。
┌──────────────────────────────────────┐
│$('#フォーム').submit()                                                     │
└──────────────────────────────────────┘

もう少し、jQueryぽっく書くと以下のような感じなのだろうか。
┌──────────────────────────────────────┐
│$('<input />')                                                              │
│    .attr('type' , 'hidden')                                                │
│    .attr('name' , 'キー'  )                                                │
│    .attr('value', '値'    )                                                │
│  .appendTo('#フォーム');                                                   │
└──────────────────────────────────────┘

ベタだけど前者の方が楽っぽいな。
もっといい方法があるのかもしれないけど。
分類:jQuery
jQuery/Ajax入門のつまづき
2012年01月05日
前出の通り、
┌──────────────────────────────────────┐
│$(function() {                                                              │
│  setInterval(function(){                                                   │
│      $("#a").parent().load("ajax.php #a");                                 │
│    },                                                                      │
│    3000  // 3秒でリロード                                                  │
│  );                                                                        │
│});                                                                         │
└──────────────────────────────────────┘
だったり
┌──────────────────────────────────────┐
│$(function() {                                                              │
│  setInterval(                                                              │
│    function(){                                                             │
│      $.get(                                                                │
│        "ajax.php",                                                         │
│        function(data){                                                     │
│          $("#a").html($("#a", data).html());                               │
│        }                                                                   │
│      );                                                                    │
│    },                                                                      │
│    3000  // 3秒でリロード                                                  │
│  );                                                                        │
│});                                                                         │
└──────────────────────────────────────┘
だったりして、簡単にreload的なことができる。
#「ajax.php」ってところが、自身のファイル名になる。

基本reloadだからレイアウトもまったく一緒で簡単簡単、…なんて思っていたら
大きな落とし穴に嵌ってしまった。
(しかも、IEだけ現象が発生するというタチの悪いパターン)

結論から言うとメモリリーク。
自身を呼び出すのだが、その自身は自身を呼び出す為のAjaxタイマを実装してるわけだ。
子が孫を呼び、孫が曾孫を呼ぶ。
そりゃメモリリークもするかもね。

ってことで、自身を迂闊にAjaxタイマではreloadしちゃダメなんだね。

こういう時には、従順なそれ用のphpファイルを呼ぶようにしなきゃってことさ。
分類:注意、jQuery
jQuery/Ajaxまだまだ序の口
2012年01月01日
┌──────────────────────────────────────┐
│$time = date('s');                                                          │
│<span id="a">{$time}</span>                                                 │
└──────────────────────────────────────┘
とりあえず、上記みたいな感じで、
表示内容が刻々と変化するphpファイル(ajax.php)を用意する。
#刻々と変化するDBの値を取得したりするのを想定したダミーです。

で、jQueryは以下のような感じ。
┌──────────────────────────────────────┐
│$(function() {                                                              │
│  setInterval(function(){                                                   │
│      $("#a").parent().load("ajax.php #a");                                 │
│    },                                                                      │
│    3000  // 3秒でリロード                                                  │
│  );                                                                        │
│});                                                                         │
└──────────────────────────────────────┘
「id=a」という範囲をloadして、「id=a」の一つ上の階層に読み出す。
すると、「id=a」に吐き出される。
そんな感じなのでしょうか。

「$.get」で書くとこんな感じ。
┌──────────────────────────────────────┐
│$(function() {                                                              │
│  setInterval(                                                              │
│    function(){                                                             │
│      $.get(                                                                │
│        "ajax.php",                                                         │
│        function(data){                                                     │
│          $("#a").html($("#a", data).html());                               │
│        }                                                                   │
│      );                                                                    │
│    },                                                                      │
│    3000  // 3秒でリロード                                                  │
│  );                                                                        │
│});                                                                         │
└──────────────────────────────────────┘
汎用性が高いかも。

「id=a」がtdタグ中のspanだったりして、tdタグの背景色が変わる場合は
以下のようなのをhtml()の行の部分に置き換えれ(追加すれ)ばいいみたい。
┌──────────────────────────────────────┐
│$("#a").parent().css("background-color",                                    │
│                     $("#a", data).parent().css("background-color"));       │
└──────────────────────────────────────┘
分類:jQuery
jQuery/幅をパーセントで指定
2011年12月31日
①「$("識別").style.width = 値」と②「$("#識別").width(値)」の違い。
①の「$」は以下の定義。①は一般的なJavaScript、②はjQueryってことで。
┌──────────────────────────────────────┐
│function $(id) {return document.getElementById(id);}                        │
└──────────────────────────────────────┘

値を取得したい場合は、②の場合「$("#識別").width()」と引数を空にすればよい
…ってのは、初歩の初歩だが、他に以下の違いがある。

CSS等で初期値を設定している場合、
①はJavaScript的に値を代入していなければ、値は「」となるが、
②はJavaScript的に値を代入していなくても、値を返してくれる。

①の解決方法としてはwindow.onloadで値を代入してしまえばよい。
(というのが妥当かはちょっと不安)

で、本題。
幅とかは数値ではなく比率でも指定してできるが、
①はそのままだけど、②は親階層に比率を掛けて数値にしてくれる。
例えば50%を指定した場合、一つ上の階層(外側)の幅が「200px」だった場合
①は「50%」のまま、②は「100」になる。
┌──────────────────────────────────────┐
│$("識別").style.width = "50%"                                               │
│$("識別").style.width → 「50%」                                            │
├──────────────────────────────────────┤
│$("#識別").width("50%")                                                     │
│$("識別").style.width → 「100」                                            │
└──────────────────────────────────────┘
ただね、この掛け算、小数点以下はなくなるのだけど
ブラウザにより、切り捨て、四捨五入とか若干異なるみたい。
分類:jQuery
jQuery/jQuery三段活用
2011年12月29日
┌──────────────────────────────────────┐
│function $(id) {return document.getElementById(id);}                        │
└──────────────────────────────────────┘
みたいな定義をしてしまえば、「prototype.js」っぽく記述ができる。
これを「レベル0」とする。
これに「#」と「[0]」をつければ「jQuery」っぽく記述ができる。
これを「レベル1」とする。
┌──────────────┬────────────────┐
│          レベル0          │            レベル1            │
├──────────────┼────────────────┤
│$("識別").value             │$("#識別")[0].value             │
├──────────────┼────────────────┤
│$("識別").value = 値        │$("#識別")[0].value = 値        │
├──────────────┼────────────────┤
│$("識別").style.height = 値 │$("#識別")[0].style.height =  値│
├──────────────┼────────────────┤
│$("識別").style.width = 値  │$("#識別")[0].style.width = 値  │
└──────────────┴────────────────┘
さらに「jQuery」特有な形にすれば「レベル2」である。
┌────────────────┬───────────┐
│            レベル1            │       レベル2       │
├────────────────┼───────────┤
│$("#識別")[0].value             │$("#識別").val()      │
├────────────────┼───────────┤
│$("#識別")[0].value = 値        │$("#識別").val(値)    │
├────────────────┼───────────┤
│$("#識別")[0].style.height =  値│$("#識別").height(値) │
├────────────────┼───────────┤
│$("#識別")[0].style.width = 値  │$("#識別").width(値)  │
└────────────────┴───────────┘
「レベル2」を覚えれば、最大限「jQuery」っぽくなるが
わかんなくなったら「レベル1」でも潰しが効きそうだ。
分類:jQuery
jQuery/disabledの動的変更
2011年12月26日
ボタンを押せる・押せない、チェックボックスをチェックできる・できない、など
要素の有効無効は「disabled="disabled"」(これは無効化)で指定するが
JavaScriptやjQueryで動的に変更する場合について。

まず、JavaScriptでの有効無効の設定は以下の通り。
┌──────────────────────────────────────┐
│document.getElementById("a").disabled = true;                               │
│document.getElementById("b").disabled = true;                               │
├──────────────────────────────────────┤
│document.getElementById("a").disabled = false;                              │
│document.getElementById("b").disabled = false;                              │
└──────────────────────────────────────┘

これをjQuery流にアレンジすると以下。
┌──────────────────────────────────────┐
│$("#a")[0].disabled = true;                                                 │
│$("#b")[0].disabled = true;                                                 │
├──────────────────────────────────────┤
│$("#a")[0].disabled = false;                                                │
│$("#b")[0].disabled = false;                                                │
└──────────────────────────────────────┘

そして、jQuery流を貫き通すと以下。
┌──────────────────────────────────────┐
│$("#a,#b").attr("disabled", "disabled");                                    │
├──────────────────────────────────────┤
│$("#a,#b").removeAttr("disabled");                                          │
└──────────────────────────────────────┘
分類:jQuery
jQuery/セレクトのOR条件
2011年12月15日
以下のように同じ処理を複数のセレクタに同じように書いているのを…。
┌──────────────────────────────────────┐
│$("#a").click(function() {                                                  │
│  alert("該当しました");                                                    │
│});                                                                         │
│$("#b").click(function() {                                                  │
│  alert("該当しました");                                                    │
│});                                                                         │
└──────────────────────────────────────┘

以下のようにまとめられるのであった。
┌──────────────────────────────────────┐
│$("#a,#b").click(function() {                                               │
│  alert("該当しました");                                                    │
│});                                                                         │
└──────────────────────────────────────┘

OR条件は「,」なのだね
分類:jQuery
セレクタの灯台もと暗し
2011年12月09日
こういう階層になってて…
┌──────────────────────────────────────┐
│<div id="a">                                                                │
│  <div id="aa">                                                             │
└──────────────────────────────────────┘
「ID="a"」の子セレクタ「ID="aa"」を指定したいって時に出くわした。

┌──────────────────────────────────────┐
│#a > #aa                                                                    │
└──────────────────────────────────────┘
とかかな?と悩んだが…

IDって親だろう子だろうが全体で一意なので
┌──────────────────────────────────────┐
│#aa                                                                         │
└──────────────────────────────────────┘
で、いいんです。

こんな単純なことだが、いろいろやってると混乱してしまうのだ。
手を読みすぎて二歩を犯してしまったり、合併の繰り返しで
自社株を大量に保有してしまうようなもんだ。(例えがわかりにくい?)
分類:CSS、注意、jQuery
jQuery/Ajax入門(2)前回の訂正
2011年11月30日
自分で自分の一部をリロードする場合、以下のようにと書いたが認識が間違っていた。
┌──────────────────────────────────────┐
│$("#ajax").load("index.php #ajax");                                         │
└──────────────────────────────────────┘

入力側(右の#ajax)はそれ自身を示すが、出力側(左の#ajax)はそれ自身にではなく
それの中身つまり内側に出力するように指示する命令なのだ

つまり、リロードを繰り返していくと、以下のようなイメージとなり
入れ子が重なりブラウザがおかしくなってしまう。
┌──────────────────────────────────────┐
│<div id="ajax">                                                             │
│  <div id="ajax">                                                           │
│    <div id="ajax">                                                         │
│      <div id="ajax">                                                       │
│        :                                                                  │
└──────────────────────────────────────┘

なので、以下のように初期状態で段差をつけて定義してあげて…。
┌──────────────────────────────────────┐
│<div id="ajax_in">                                                          │
│  <div id="ajax_out">                                                       │
└──────────────────────────────────────┘
以下のように、出力側(左)が入力側(右)より一段上になるようしてあげねばならない。
┌──────────────────────────────────────┐
│$("#ajax_in").load("index.php #ajax_out");                                  │
└──────────────────────────────────────┘
こうすれば「#ajax_in」の一段下、つまり「#ajax_out」に
「#ajax_out」が上書されるので想定通りとなる。
分類:jQuery
jQuery/チェックしましたね
2011年11月28日
┌──────────────────────────────────────┐
│if (!$("input:checked[type=checkbox][name^=xxxx]")[0]) {                    │
│  alert("チェックしてください。");                                          │
│  return false;                                                             │
│}                                                                           │
└──────────────────────────────────────┘
先日、チェックしていない時に警告ダイアログを出す方法に触れたが、
逆にチェックした場合に警告を出したいケースもある。
「チェックしたけど、本当に更新していいの?」みたいな確認。

やり方は簡単、先の条件式を反転させるだけ。
┌──────────────────────────────────────┐
│if ($("input:checked[type=checkbox][name^=xxxx]")[0]) {                     │
│  alert("チェックしてください。");                                          │
│  return false;                                                             │
│}                                                                           │
└──────────────────────────────────────┘
分類:jQuery
前へ 1 2 3 4 5 6 7 8 9 10 次へ