jQuery: ajaxして表示したコンテンツでプラグイン等のオプションが読み込めない場合の対処

jQuery自体は読み込んでいるけれども、ajaxによって読み込まれたページなどでは、プラグイン等のオプションが読み込めなかったりします。

読み込む内容の中に、オプションが書いてあったとして、ajaxの場合はリロードすれば読み込んだページがクリアされますが、pjaxの場合は残ったりします。残るというよりは本来読み込むべきhtmlが入っているということなんですけれども、その中にオプションが書いてあったりした場合は重複してオプションが読み込まれたりする場合があったりして、表示に不具合が出る場合もあります。

そういう時に、どのように対処するかですが、例えばイメージスライドをjQueryにより、何かしらのclassに読み込むような場合を考えてみます。

bxSliderなどであると、

このような感じで、.sliderの部分にオプションの設定でイメージスライドを展開します。しかし、ajaxやpjaxでは、読み込むページにこのオプションがある場合、重複して読み込むわけです。

bxSlider_pjax

上の部分が重複して読み込まれたスライダー、下が正常な状態。ぱっと見あまりわからないようですが、左右の矢印が二重になっていたり、.sliderをラップする部分が二重になっていたりしていました。このような表示になることがあるわけです。

こうなるのがどのような場合かと言うと、index.phpには、bxSliderを含めその他プラグイン等のオプションが書いてあります(読み込ませているjs内)。ajaxさせないページはこのオプションでイメージスライダが展開されます(正常表示)。
ajaxやpjaxの場合は読み込むページにこれらがないとオプションが効かないので、読み込むファイルの中に<script></script>でオプションで書いておこうと言うような場合です。

pjaxであれば先にも書いたように、F5リロードすればどこかしらにオプションが書いてあるわけですから読み込めます。ただし、indexにも元々読み込むファイルに書いてあるのでこれらが重複します。この重複を何とかできないかと言うのが今回のテーマです。またajaxやpjaxの場合は、遷移先のページにオプションの記述があっても正しく読めない場合があります。

状況としては、bxSliderの場合、上記の例で言えばslider部分に読み込んでclassを囲むようにbx_wrapperとbx_viewportと言うブロックを作ります。slider部分は無くならないので、重複するとこれらがそれぞれに適用されて、

こんな感じになるんじゃないかと思います(想像)。なので、それに対応するべく考慮すると、index.phpで読み込んだ(この話の流れでは)bxSliderは、読み込むページ(遷移先のページ)に書いても動作しないか、あるいは重複して読み込んでしまうと言う結論になります。

解決方法

2015/7/9追記
いろいろ考えてみると遷移が完了してからではダメだと思ったりして、始まった時に送ってみようとか、現在色々と試しています。
最適な答えが見つかるかどうかはテスト次第ですが、今しばらく以下は、ふーんってなぐらいで読む感じでおねがいします。

ajaxにもpjaxにもcompleteがあります。この(ajaxで言えば).ajaxComplete()を調べてその中に、$.getScript()でプラグインのスクリプトを読み込み、callbackでオプションを書くと言うような感じでイケルんじゃなかろうかと思うわけです。

例えば、bxSliderのみを利用する場合

このような感じでしょうか。

もしかすると、

こういうのとか、pjaxの場合、

こんな感じで行けそうです。

うまく動作するかは色々試してみないとわからない部分もあるのですが、ajaxなどによるページ遷移後のプラグインの読み込み等はこんな感じでイケるんじゃないでしょうか?
色々お試し下さい。

スポンサーリンク

シェアする

フォローする