Question

I have a complicated question, so I will try and keep it as short as possible.

My use-case is building an RSS feed for a mobile website. The interface will be similar to Pulse reader only browser based.

I am doing the heavy lifting with PHP for connecting to the XML API and pulling in the initial data on page load. I am trying to build an AJAX call with jQuery that will modify my URI query string on click() and pull in a fresh set of results and append them to my existing elements.

My URI looks something like this:

http://www.domain.com/request.php?subcategoryId=1&page=1

I am running a PHP foreach() loop to populate my page:

<?php // Collect Subcategories and Titles
 foreach ($phpObjects->SubcategoryResult as $SubcategoryResult) { ?>

<?php // Callback to subcategoryArticleRequest() to recieve article data
 $subcategoryObjects = subcategoryArticleRequest($SubcategoryResult->subcategoryId); ?>

<div class="subcategory">
  <h2><?php echo $SubcategoryResult->subcategoryName; ?></h2>
  <div class="articleFeed overthrow">
    <table>
      <tr>
        <?php foreach ($subcategoryObjects->articleResult as $articleResult) { ?>
        <td>

          <!-- ARTICLE CONTENT POPULATED HERE -->

        </td>
        <?php } ?>

        <td data-subcategoryId="<?php echo $SubcategoryResult->subcategoryId; ?>" onClick="page++">
          <a class="loadMore" href="#">Load More</a>
        </td>

      </tr>
    </table>
  </div><!-- .articleFeed -->
</div>
<?php } ?>

The main area of focus would be this element I am appending to the table after the foreach runs. I will be using this link to click and load more articles through AJAX (I have hard-coded data-subcategoryId here):

<td data-subcategoryId="1">
  <a class="loadMore" href="#">Load More</a>
</td>

In essence when someone clicks this button, it will make an AJAX call and retrieve &page=2 and so on.

Here’s my JavaScript:

var page = 1;

$('.loadMore').click(function() {
  page++;
  var subcategoryId = $(this).parent().attr('data-subcategoryId');
  var url = 'http://www.domain.com/request.php?subcategoryId='+subcategoryId+'&page='+page;

  console.log(url);
});

The issue I keep running into is that when I click on the .loadMore link, it will increment the page variable, but it will do it globally. If I try moving the var page = 1; inside the click function, it will only increment once to 2.

Once I get this function right, I can pass the url variable to my AJAX function for pulling in the fresh content.

Ive set up a JSFiddle just in case, though it keeps showing subcategoryId as undefined:

JSFiddle

Answer 1

So it sounds like each element should have its own page variable.

An easy solution is to use .each() to assign the handlers, and create the page variable inside the each callback.

$('.loadMore').each(function() {

    var page = 1;

    $(this).click(function() {
      page++;
      var subcategoryId = $(this).parent().attr('data-subcategoryId');
      var url = 'http://www.domain.com/request.php?subcategoryId='+subcategoryId+'&page='+page;

      console.log(url);
    });

});

Because JavaScript functions are closures, each .click handler has been created in its own fresh variable environment, and each handler will always have reference to the variables that were in scope at the time of creation.

This means that each handler has its own personal page variable to increment.

Another solution would be to use “event data”. You can associate data with a particular element via the event object.

$('.loadMore').each(function() {
    $(this).bind("click", {page:1}, loadMoreHandler);
});

function loadMoreHandler(e) {
  e.data.page++;
  var subcategoryId = $(this).parent().attr('data-subcategoryId');
  var url = 'http://www.domain.com/request.php?subcategoryId='+subcategoryId+'&page='+e.data.page;

  console.log(url);
}

Since a closure is no longer taken advantage of, I used a named function for the handler for the sake of function object reuse. You can change it back to an anonymous function if it doesn’t matter to you.