ajax, pjaxで変化させた要素を注視させるべく背景色をアニメーションさせる part2

前回はstack overflowのアレを実現するべくスクリプトを組んでみました。

で、結論としては

pjaxで実装する場合はどうすればよいかですが、例えば、

このようにして、pjax:completeのように、完了を待って実行すればよいのではないかと思います。

こんなふうに書きました。

ajax, pjaxで変化させた要素を注視させるべく背景色をアニメーションさせる
タイトルでは、ajax, pjaxと入れましたが、別に普通にjQueryで変化させたい所には適用できるかと思います。 いつもながら、意...

しかし、チョット待てーいと言う声が聞こえてきたわけです。というのは、pjax:complete(ajaxならajaxComplete()、あるいは.always() )だと、ajaxの通信が終わるたびに実行するじゃないか、とか、他のajaxが完了した時も反応するんじゃないの?みたいな声があったりなかったり。

と、言うことで任意のセレクタがクリックされた時にだけ動作するように改良してみたいと思います。

$(document).on(‘pjax:complete’, function(){…});の function部分に例えば、

のように書きます。するとweb開発環境(F12キー)のconsoleに「event: 何かしらごにょごにょ」として表示されると思います。もちろん何かしらクリック等をしてpjaxなりajaxが動作した時なんですけれども。

別にeventじゃなくてもeでもdataでも何でも良いです。自分がわかりやすい名前を付けておいてください。

例としては、

event: ▶n.Event {type: “pjax:complete”, relatedTarget: a.クラス名, timeStamp: 1436507248471, jQuery214019093791604973376: true, isTrigger: 3…}

こんな感じになっていると思います(chromeの場合)。
ここのrelatedTargetと言うのは、どこから発信されたかを示しています。例えば「ギターを弾き語れ!」であれば、画面上部のメニューをクリックすると、relatedTarget: a.smenuと表示されます。これは、画面上部のメニューのaタグが以下のように書かれているからです。

このclassの部分と要素名が表示されているわけです。
実際この値を取得しようとすると、event: ▶n.Event {type: “pjax:complete”, …の部分をクリックするかすると、その内容がズラリと表示されます。
その中から、relatedTargetを探しまた展開します。すると、aタグの構成にもよりますがclassの場合はclassNameと言うのが該当します。idであればidですね。これを取得できれば、どこから発信されたのかがわかるので、それ以外は動作させないと言う処理が可能です。

よって、上記のように書けば、pjax(ajax)のやりとりが完了して「発信元のaタグのクラス名」の場合のみ「背景色を変化させたいセレクタ」をstack overflowのアレみたいに変えることが可能なわけです。

これら(event部分)はとても有用な情報が詰まっており、例えば$(event.target.innerHtml).find(“探してるセレクタ”)みたいな感じのものを入れれば、

if ( $(event.target.innerHtml).find(“探してるセレクタ”).length ){
//…処理…
}

とすることで、取得したデータのhtmlの中で、探しているセレクタがあった場合と言うようなものを検出することができます。そうすると単純にデータを遷移なく更新するだけではなくて、背景の色を変えたり、サイズを変えたりといろいろと加工ができるということになります。

あまりやり過ぎると、何をしているのかわからなくなってしまう場合もあるので、ほどほどにajax等で取得したデータを加工するにあたって、任意の箇所から発信されたのを検出して、不要な場合は処理させないと言う事が可能になります。

ajaxCompleteあるいは、alwaysは基本的に、ajaxが完了するごとに行われる処理なので、本来は、ajaxStart()に例えばloadingを表示させる処理を書き、ajaxCompleteあるいは、alwaysの部分で完了したものからloadingを消していくような場合に利用するのが通常かと思います。

そういった処理と並列して一部のリンクから表示されたものは、また別の何かしらをするということが可能になるので、とても応用が効くのではないかと思います。

まぁ他にも色々とやり方はあるんですけれども、ひとまずこれで良いかなぁと思ったりしました。

スポンサーリンク

シェアする

フォローする