将内容类型更改为JSON时，从数据库加载更多内容不起作用

i am trying to stop my 'load more' button from displaying once there is no more results to show.

So, my plan was that once the load more button was clicked and the query ran on the database, i would do a rowcount and then if that number was less than what was requested in the LIMIT claus then i would return that information.

So currently my js script looks like this:

$(document).ready(function(){
    var pageIndex = 1;
    $('#loadmorebuilds-div').click(function() {
        $('#buildcontainer').imagesLoaded( function(){
        $.ajax({
           url: 'includes/loadmorebuilds.php?type=follow&pageIndex=' + pageIndex,
           success: function(html) {
              var el = jQuery(html);
              jQuery("#buildcontainer").append(el).masonry( 'reload' );
              $("#loadmorebuilds-div").stop();
              pageIndex++;
              $("#buildcontainer").masonry()
           }

        });

    });

});
});

This works fine, but i wanted to put a JSON return in my loadmorebuilds.php page.

So the plan was to do e.g.

// check if the results count is less than requested
if ($checkforlast < 8) {
    $return['noMore'] = true;
    echo json_encode($return);
}

I would then change my js to look like so:

$(document).ready(function(){
    var pageIndex = 1;
    $('#loadmorebuilds-div').click(function() {
        $('#buildcontainer').imagesLoaded( function(){
        $.ajax({
           url: 'includes/loadmorebuilds.php?type=follow&pageIndex=' + pageIndex,
           success: function(html) {
              var el = jQuery(html);
              jQuery("#buildcontainer").append(el).masonry( 'reload' );
              $("#loadmorebuilds-div").stop().fadeOut();
              pageIndex++;
              $("#buildcontainer").masonry()

              if (response.correctKey === true) {
                DO SOMETHING TO REMOVE BUTTON
              }

           }

        });

    });

});
});

The problem comes when i change the content type:

header('Content-Type: application/json');

Because thats changing how the data i send back is (i think?). Changing the content type results in no new content being shown and nothing happens on the load more button being clicked.

is there another way to send the databack to the ajax call if there is less results than requested and without changing the content type?

Hope this makes sense!

I agree with @palpatim that string parsing is probably not the best way to go here. But this solution could work as well, and wouldnt require you building your html from json on the client:

$(document).ready(function(){
  var pageIndex = 1;
  $('#loadmorebuilds-div').click(function() {
    $('#buildcontainer').imagesLoaded( function(){
      $.ajax({
        url: 'includes/loadmorebuilds.php?type=follow&pageIndex=' + pageIndex,
        success: function(html) {
          var el = jQuery(html),
              rowCount = el.find('tr').length;

          jQuery("#buildcontainer").append(el).masonry( 'reload' );
          $("#loadmorebuilds-div").stop().fadeOut();
          pageIndex++;
          $("#buildcontainer").masonry();

          if (rowCount < 8) {
            DO SOMETHING TO REMOVE BUTTON
          }
       }
    });
});
});

I used 'tr' here to denote the element you're using to hold each result in markup.

If you're returning JSON, then you can't expect to simply append the JSON to the DOM as you were previously doing. Consider your success handler:

success: function(html) {
  var el = jQuery(html);
  jQuery("#buildcontainer").append(el).masonry( 'reload' );
  $("#loadmorebuilds-div").stop().fadeOut();
  pageIndex++;
  $("#buildcontainer").masonry()

  if (response.correctKey === true) {
    DO SOMETHING TO REMOVE BUTTON
  }

}

Change the success handler's argument from html to json or even better data, textStatus, jqXHR. Also consider using jQuery's getJSON() method as a shorthand. http://api.jquery.com/jquery.getjson/

Then you can use the data to populate your presentation as appropriate, and inspect the noMore attribute using data.noMore.