Question

Im getting an Uncaught RangeError: Maximum call stack size exceeded when ever I get to the 4th time calling my paging function getCollection(), I’m not exactly sure why the problem is happening.. if I commet out the following line:

jQuery('#card ul').append(template.render(data));

And uncomment the alert below it (for sanity), it seems to run fine past page 4.

I’m using jQuery 1.7.1 and Boris Moore’s jsrender library and have never had trouble before rendering even larger data sets asynchronously.

var myCollection = {
  data: null,
  count: 0,
  page: 0,
  pageSize: 24
}
function getCollection(collection) {
  if (collection.length > 0) {
    var values = "",
    template = jQuery('#template');
    for (var i = myCollection.page * myCollection.pageSize; i <= ((myCollection.page + 1) * myCollection.pageSize) - 1; i += 1) {
    if (i != ((myCollection.page + 1) * myCollection.pageSize) - 1) {
        values += collection[i].card + ",";
    } else {
        values += collection[i].card;
    }
  }
  jQuery.ajax({
    url: '/api/cards?key=id&value=' + values,
    dataType: 'json',
    success: function (data) {
        if (data) {
            jQuery('#card ul').append(template.render(data));
            //alert(myCollection.page);
        }
    }
  });
  myCollection.page++;
}

Any help is greatly appreciated!!

Answer 1

As @Dhaivat Pandya suggested, template is a registered keyword. Thanks for the help!