bxslider - slider.reloadSlider is not a function

Question

<link rel="stylesheet" href="index.css" type="text/css">
<link rel="stylesheet" href="jquery.bxslider.min.css" type="text/css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.bxslider.min.js"></script>
<script type="text/javascript" src="jquery.xdomainajax.js"></script>

<div id="hoge"></div>


<script>
    url = '取得先のURL';
    $.get(url, function (data) {
        var addData = $(data.responseText).find('#hoge').html();
        $('#hoge').html(addData);
    });

    $(document).ready(function () {
        var slider = $('.slider').bxSlider({設定});
        slider.reloadSlider();
    });
</script>

困っております。
クロスドメインでDOMを取得し、取得したDOMの一部要素を追加し、bxsliderを動かそうとしたのですが、
slider.reloadSlider is not a functionで動作せずこまっております。

DOM追加後の記事をネットで探したりしてみたもののうまくいかず・・・宜しくお願い致します。

Answer 1

NatsumiOkiさんの書かれているように、「.slider」が足りないのでは。

<div class="slider"></div>

ある場合：https://jsfiddle.net/b1Ljmcyb/
ない場合：https://jsfiddle.net/b1Ljmcyb/1/

「.slider」を足してもエラーが出るならjsのパスを確認してみてください。

---

処理したい内容にもよりますが、「$('#hoge').html(addData);」では全上書きしてしまいますが、それでいいのでしょうか。（下記コードは未テストです）

var slider;
var url = '取得先のURL';
$.get( url, function( data ) {
	var addData = $( data.responseText ).find( '#hoge' ).html();
	slider.destroySlider(); // 破棄しておく
	$( '.slider' ).append( addData );
	set_slider(); // 再設定
} );
function set_slider() {
	slider = $( '.slider' ).bxSlider( { /* 設定 */ } );
}

$( function() {
	set_slider();
} );

Comments

[drunkdoll]

＞kei344さん
ご返信ありがとうございます。
おかげさまでうまくいきました！！！！

Answer 2

.slider自体がどこにもいませんが、これはaddDataに入ってくる想定なのですか？
このコードだけでは実際にどのようなデータが入ってくるのかわからないのでなんともいえませんが
slider.reloadSlider();というのはどこかのサンプルからもってきたソースですか？
それとも自前の実装でしょうか？

Comments

[kei344]

To: NatsumiOki さん
横から失礼します。
bxslider の PUBLIC FUNCTIONS にある関数だと思います。
https://github.com/stevenwanderski/bxslider-4/blob/master/src/js/jquery.bxslider.js#L1590

[drunkdoll]

>NatsumiOkiさん
回答ありがとうございます

.slider自体がどこにもいませんが、これはaddDataに入ってくる想定なのですか？
⇒記載がたりずすみません。はい、そうです。
addDataでスライドショーに使用するコードの追加をしています。

slider.reloadSlider();というのはどこかのサンプルからもってきたソースですか？
それとも自前の実装でしょうか？
⇒kei344さんに記載いただいた内容になります。

＞kei344さん
補記ありがとうございます！

Answer 3

var url = '取得先のURL';
$.get( url, function( data ) {
    var addData = $( data.responseText ).find( '#hoge' ).html();
    $( '.slider' ).append( addData );
    set_slider(); // 再設定
} );
function set_slider() {
    slider = $( '.slider' ).bxSlider( { /* 設定 */ } );
}