JQuery Call Function Outside of Ajax on Ajax Success?

Question

Hey all, I currently have created a pagination js class that will automatically paginate comments when you get more than 10 to a page. This works fine, but I'd like to set some css properties only if there are more than 10 comments on the page (add space for the buttons to switch between pages). This COULD be done in the ajax success, but I want to keep the paginate.js so that its usable by the rest of my app (other parts of the app do not need padding added), and not with a bunch of if's and else's to add padding only in one scenario. So, is there any way that I can bind an event to the success of the ajax function externally? For example, my current page includes these files:

pagination.js
detail.js

Pagination runs the ajax call by passing it the following arguments from detail.js:

  p = new paginate({
    table_id: 't1',
    pageselect_max: 7,
    rpp_options: [5,10,25,50],
    rpp: 5,
    columns: [''],
    wildcard: stock_symbol,
    url: 'trader/stocks/ajax/',
    action: 'paginate_comments',
    noresults: false
  });

This is what the ajax looks like inside pagination.js:

  this.get_results = function() {
    oThis = this; // Needed because inside the success function 'this' points to something else
    $.ajax({
      type: "POST",
      url: this.url,
      data: "action="+this.action+"&rpp="+this.rpp+"&page="+this.page+"&sortBy="+this.sortBy+"&sortDir="+this.sortDir+"&wildcard="+this.wildcard,
      dataType: "json",
      success: function(json) {
        if (json.error) {
          alert(json.error);
        }
        else {
          var data = json.data;
          oThis.count = data.count;
          $("#p_count").text(oThis.count);
          var resText = oThis.count == 1 ? "result" : "results";
          $("#p_results").text(resText);
          if (!data.disable_cufon) {
            Cufon.replace('h2');
            Cufon.replace('h1');
          }
          oThis.results = data.results;
          oThis.update_pageselect();
          oThis.display_results();
          oThis.do_rpp();
        }
      },
      error: function(error) {
        alert(error.responseText);
      }
    });
  }

I want to be able to reference the success in detail.js and run this:

if(p.maxPages > 1){
  $("#commentscontainer .cmtgocontainer").css("margin-top","48px");
}

I know this can be accomplished by changing asynchronous property, but that seems like bad practice. Any better methods of doing this without altering pagination.js?

Answer 1

You could make your own callback function and call it in pagination.js:

For example:

//In your success callback:
if (typeof oThis.onPaginateComplete === "function")
    oThis.onPaginateComplete();

You could then write the following in detail.js:

p.onPaginateComplete = function() {
    if (this.maxPages > 1) {
        $("#commentscontainer .cmtgocontainer").css("margin-top","48px");
    }
};