2

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>

1 件の回答 1

1
.done(function(data) {
  if (data = '') {
    $btn.html('no more list');

if の中で data = '' と書かれていますが、この場合比較ではなく代入になってしまいます。

  • data'' が代入される
  • '' を Boolean に変換すると false なので、 if(false) と同義

よって、 $btn.html('no more list'); が実行されることはありませんし、var nextObj = $(data); とする頃には data'' になっている、ということになります。

比較を行う場合、 = ではなく == (もしくは ===)を使います。

参考 等価演算子 - 演算子 - JavaScript入門

1
  • ありがとうございました。 無事に解決する事が出来ました。 すごく初歩的な問題でして改めて基本に忠実に学習していく大切さを学ばせていただきました。
    – user76333
    2015年7月23日 2:02

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。