JavaScript初心者です。
以下のようにprototypeを使って様々なページで使える汎用的なプラグインを作ってみたいのですが、どうしてもnextObj
が空になって帰ってきてしまいます。
試しにページネーションを使って(開発はCakePHPを使っています。)普通に出力をしてみた所、問題なく?page=2
で次のページに遷移できましたのでデータはちゃんと入っているようです。
ご教授お願いいたします。
/*
* Ajaxで次のページを読み込むプラグイン
* NexAj($trigger, $contentsToLoad)
*/
function NextAj(el, obj) {
this.initialize(el, obj);
}
NextAj.prototype.initialize = function(el, obj) {
this.$el = el;
this.$obj = obj;
this.$obj.css({
opacity: 0
});
this.counter = 2;
this.handleEvents();
}
NextAj.prototype.handleEvents = function() {
var self = this;
this.$obj.imagesLoaded(function() {
self.$obj.animate({
opacity: 1
});
});
this.$el.on('click', function(e) {
self.loadNext(e);
return false;
});
}
NextAj.prototype.loadNext = function(e) {
var $btn = $(e.currentTarget);
$btn.html('loading....');
$.ajax({
url: '?page=' + this.counter,
type: 'GET',
dataType: 'html',
})
.done(function(data) {
if (data = '') {
$btn.html('no more list');
} else {
var nextObj = $(data);
console.log(nextObj);
$btn.html('Load More');
}
})
.fail(function() {
console.log("error");
});
}
var loadRestaurantCat = new NextAj($('#load-more-list'), $('#listContainer'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="listContainer">
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
</ul>
<a href="javascript:void(0)" id="load-more-list">
Load More
</a>