へっぽこ開発室 » Ajax

prototype.js Ajax.PeriodicalUpdaterのIE対応策

admin — Fri, 10 Sep 2010 06:27:07 +0000

prototype.jsのAjax.PeriodicalUpdaterがIEで正しく動かなかったので対応メモ。

Ajax.PeriodicalUpdateは定期的に実行する関数ですが
JSONPを定期的に投げて更新していくプログラム中、
更新がなかったときに止まってしまって非常に悩んだ。

null値などの判別で止まるのかと思いきや
ブラウザがキャッシュをしてリクエストをしてくれなくなるらしいことが判明。

対応策として以下のサイトのように
クエリーパラメーターにランダム要素を加えて対応した。

dummy : Math.random();

参考：
prototype.jsのAjax.PeriodicalUpdaterをIEでも正しく動かす方法:phpspot開発日誌

Javascript ループ中にイベントリスナーを登録する最も簡単な方法

admin — Sat, 27 Feb 2010 16:45:59 +0000

今回はJavaScriptネタです。
こっち系はほとんど素人でぜんぜん得意ではありませんが、自分なりに考えてとってもナイスな方法を披露しちゃいます。

例えばこんな単純な処理
ちょっと文法があっているかどうかはわからんがこんなイメージ。

<ul id="hoge"></ul>

ここに動的に要素を足して、足された文字をクリックでその文字がアラートされる

 
var Kudamono = new Array("りんご","いちご","ばなな");
var ulElem = document.createElement('hoge');
for(var i = 0; i < Kudamono.length; i++){
  var liElem = document.createElement('li');
  liElem.innerHTML = Kudamono[i];
  liElem.onclick = function() { alert(Kudamono[i]);}
 
 ulElem.appendChild(liElem);
}

意図とすればリストタグが3つ追加され、
クリックするとアラートでその名前が表示されて欲しい。

だけど実際動かしてみると、全部最後の要素またはundefinedになる。
まったくもって意図した動作ではなくなる。

これは定義したときに動作がきまるのではなくて、動かしたときの変数が有効になるため。
クリックされたときは既にiが最後の値まで達しているのでそれを参照してしまうらしい。

そこでどんな回避策があるかといろいろ調べてみた。
http://d.hatena.ne.jp/hi_c_mayu/20090704/1246641410
http://labs.unoh.net/2006/05/post_11.html
http://cesare.seesaa.net/article/18007870.html

うーーん。。どれも素人の俺には使いにくい・・・。
そこでfunctionやパラメータを使うのではなく要素自身のなんらかの値を使ってしまうのがもっとも見やすくて簡単だと思った。

var Kudamono = new Array("りんご","いちご","ばなな");
var ulElem = document.createElement('hoge');
for(var i = 0; i < Kudamono.length; i++){
  var liElem = document.createElement('li');
  liElem.innerHTML = Kudamono[i];
  liElem.onclick = function() { alert(this.innerHTML);}
  ulElem.appendChild(liElem);
}

innerHTMLと値を明らかに変えたい場合は

  liElem.innerHTML = i + '番目の要素 ' +Kudamono[i]+'って美味しいよねー';
  liElem.title = Kudamono[i];
  liElem.onclick = function() { alert(this.title);}
  ulElem.appendChild(liElem);

ってな感じはどーだろうか。
自分ではナイスアイディアだと思うが（笑）

IE「このページは表示できません」

admin — Tue, 29 Dec 2009 14:46:51 +0000

javascriptでたまーーにIEのみ「このページは表示できません」とアラートされて読み込み中のページがキャンセルされてしまうときがある。
どうやら原因はDOM構築途中にDOM書き換えようとするとこのエラーがでるらしい。

IEしか出ないからIEのバグなんだろうか。

解決方法としては
htmlに直接javascriptを埋めてある場合は
window.onload=function(){}などで表示後に実行といった段階でやったほうがいいらしい。

と、ここまではたどり着いたが、
今組んであるのをどーやってそのように実行させたらわからねぇ（笑）

prototype scriptaculous.jsを使ったドラッグできるソート処理

admin — Wed, 04 Nov 2009 12:20:56 +0000

scriptaculous.jsを使ったドラッグできるソート処理を書くよ。

下準備。
まずはprototype.js と scriptaculous.jsを呼び出す。

<script src="/js/prototype.js" type="text/javascript">script>
<script src="/js/scriptaculous/scriptaculous.js" type="text/javascript">script>

でHTMLソースはこんな感じを想定。

<div id="sortResult">ここに結果</div>
<ul id="sortList">
 <li id="elem_a"><span class="handle">ドラッグ</span>A</li>
 <li id="elem_b"><span class="handle">ドラッグ</span>B</li>
 <li id="elem_c"><span class="handle">ドラッグ</span>C</li>
 <li id="elem_d"><span class="handle">ドラッグ</span>D</li>
</ul>

ソートさせたらその状態をすぐに保存する場合。

   Sortable.create('sortList',{
        constraint:'vertical',
        handle:'handle',
        onUpdate:function(){
           var params = 'order=' + Sortable.serialize('sortList');
           new Ajax.Request('sort.php',
             {
               method: 'post',
               onComplete: getResponse,
               parameters: params
             }
           );
 
           function getResponse(req){
             $('sortResult').innerHTML = req.responseText;
           }
        }
     }
   );

オプションにhandleを指定しているので「ドラッグ」をつまみに使います。
constraintは移動方向制限。’vertical’は垂直方向のみ。
他にもオプションはいっぱいあります。
onUpdateにfunction登録しているのでドラッグ後にsort.phpにPOSTでorderパラメーターに順番が渡されます。

sort.php

foreach ($_POST['order'] as $key => $value){
  //保存処理
  //$key 順番
  //$value エレメント要素
}
echo '変更しました。';

ここでechoした内容がsortResultエレメントに表示されるよ。
成功とか失敗とかアナウンスに使うと良いでしょう。

loadingアイコンの表示

admin — Thu, 08 Oct 2009 02:36:10 +0000

ajaxで通信中はユーザーにわかりにくいのでloadingアイコンでも表示させようと思った。
prototypeのElement.showとhideを使えば楽勝じゃんって思っていたのにちょっとハマったのでメモ。

初期は非表示で通信中だけ表示ってやりたかったのさ。

スタイルで

#icn-loading{display:none;}

HTMLで

showとhideメソッドはどうやらタグに直接利くようなのでスタイルシートで定義してあるとこれは維持されたままらしい。

なので

style=”display: none;” />
が正しいようです。

Ajax.Requestを使った例

    new Ajax.Request(
        'json.php',
        {
            methotd: 'post',
            parameters: params,
            onLoading : function(ev){
                Element.show('icn-loading');
            },
            onSuccess: getResponse,
            onLoaded : function(ev){
                Element.hide('icn-loading');
            }
        }
    );
 
    //通信成功時に処理
    function getResponse(req,e)
    {
 
    }

javascript テーブル trの入れ替え

admin — Thu, 01 Oct 2009 08:57:03 +0000

javascriptでテーブルで並べられたデータの順番を入れ変えようと思った。
prototype.jsで動くscriptaculous.jsでsortableを使おうと思ったけど、
処理が重いのか動きが鈍すぎて使い物にならない。
とりあえずボタンクリックで上に移動、下に移動が実現できれば良しとした。

順番の保存はテーブル内にhiddenタグを入れてpostされた順番をそのまま取得すれば、良さそうだ。

HTML

<table id="imglist_table" >
<thead>
  <tr class="head">
    <td width="100px">画像</td>
    <td>あげる</td>
    <td>さげる</td>
  </tr>
</thead>
<tbody>
 <tr id="tr1">
  <td><em>画像</em></td>
  <td><a title="順番を上げます" onclick="itemUp('tr1');return false;" href="#"></td>
  <td><a title="順番を下げます" onclick="itemDown('tr1');return false;" href="#"></td>
 </tr>
 <tr id="tr2">
  <td><em>画像</em></td>
  <td><a title="順番を上げます" onclick="itemUp('tr2');return false;" href="#"></td>
  <td><a title="順番を下げます" onclick="itemDown('tr2');return false;" href="#"></td>
 </tr>
 <tr id="tr3">
  <td><em>画像</em></td>
  <td><a title="順番を上げます" onclick="itemUp('tr3');return false;" href="#"></td>
  <td><a title="順番を下げます" onclick="itemDown('tr3');return false;" href="#"></td>
 </tr>
</tbody>
</table>

javascript（prototype.js使用）

function itemUp(thisElem)
{
    var tbleElem = $('imglist_table');
    var tbodyElem = tbleElem.getElementsByTagName("tbody")[0];
 
    if ( $(thisElem).previousSibling){
        tbodyElem.insertBefore( $(thisElem) , $(thisElem).previousSibling );
    }
}
 
function itemDown(thisElem)
{
    var tbleElem = $('imglist_table');
    var tbodyElem = tbleElem.getElementsByTagName("tbody")[0];
 
    if ($(thisElem).nextSibling){
        tbodyElem.insertBefore( $(thisElem).nextSibling , $(thisElem) );
    }
}

ざっくり書くとこんな感じになった。
子ノードを追加するappendChildと指定エレメントの上部に挿入するinsertBeforeがあるけど、順番を下げる場合は、指定の下に挿入が無くて困った。
よーーく悩んでみれば、下のエレメントを上部に挿入でいけるじゃんって思いついた。
俺ってすげーｗ

tableにtbodyを使っているのはIE対策。

上の要素、下の要素を確認するためif(Elem)を使っているけど
もしかしたらブラウザによってダメな場合があるかも？

あとは、改良して、瞬間移動されるのをエフェクトを使って移動しましたーって
ビジュアル的にわかりやすくするとか必要かもね。

後から調べたらここをよく読んでおけばよかったかも＾＾；
http://d.hatena.ne.jp/uupaa/20080130

フォームタグの内容をjavascriptに渡す

Fou — Thu, 06 Mar 2008 05:42:31 +0000

テキストボックスの内容をEnterキーでもJavascriptに渡せるようにする。

<form onsubmit="showSearch(this.search.value); return false">
 <input type="text" name="search" value="" />
 <button title="検索">検索</button>
</form>
 
 
以前のやり方は
<input type="button" value="検索"  onclick="showSearch(this.search.value); return false"/>
こんなんだったのでボタンを押さないとjavaに渡せなかった。

Highlight image hover effect (opacity or borderize)

admin — Tue, 30 Oct 2007 12:25:19 +0000

ちょっと変わったhoverイベントの書き方をしていたののがあったのでメモ

Highlight image hover effect (opacity or borderize)

こちらの