Javascript property accessing issues

I have the following javascript class and for some reason the current property is not being set to -1 when i'm done loading the records (or i'm not able to access the property correctly from an instance of the class). I'm new to javascript so any help would be appreciated.

var MyLib = function () {
this.current = 0;

MyLib.prototype.loadMore = function (id, loadingDivId, url) {
    if (this.current > -1) {
        this.current++;
        $(loadingDivId).html("<h3>Loading more 开发者_如何学Gorecords please wait...</h3>");
        $.get(url + this.current, function (data) {
            if (data != '') {
                $(id).append(data);
                $(loadingDivId).empty();
            } else {
                this.current = -1; // seems like this isn't being set
                $(loadingDivId).html("<h3><i>-- No more results -- </i></h3>");
            }
        });
    }
}

};

Here's how i'm calling it

<script type="text/javascript">
     $(function () {
         var lib = new MyLib();

         $('#loadMore').click(function () {
             if (lib.current > -1) {
                 lib.loadMore("#results", "#loading", '/home/search/');
                 if (lib.current == -1) { 
                     // Having problems getting into this portion
                     $("#loadMore").hide();
                 }

             }
             return false;
         });

     });

</script>

While @Gnostus is correct about the prototype placement, you have an issue because you're making an asynchronous request, but are attempting to use the response immediately after sending the request.

In other words, the code after your loadMore() call runs before the response is received.

Change your prototype to accept a function to be used in the callback.

   // accept a function to call upon success ---------------v
MyLib.prototype.loadMore = function (id, loadingDivId, url, fn) {
    if (this.current > -1) {
        this.current++;
        $(loadingDivId).html("<h3>Loading more records please wait...</h3>");
        $.get(url + this.current, function (data) {
            if (data != '') {
                $(id).append(data);
                $(loadingDivId).empty();
            } else {
                this.current = -1; 
  // ------------v------call the function
                fn();
                $(loadingDivId).html("<h3><i>-- No more results -- </i></h3>");
            }
        });
    }
}

Then pass in the functionality that relies on the response.

$('#loadMore').click(function () {
     if (lib.current > -1) {

             // pass in your function -----------------------------v
         lib.loadMore("#results", "#loading", '/home/search/', function() {
                  // This if() statement could be removed, since it will
                  //    always be "true" in the callback. 
                  // Just do the $("#loadMore").hide();
              if (lib.current == -1) { 
                    $("#loadMore").hide();
              }
         });
     }
     return false;
 });

Or if this will be standard functionality, you could add the function to the prototype of MyLib, and just have it accept the relevant arguments. Then your loadMore can simply call it from this.

prototypes go out side the function declaration

var MyLib = function () {
this.current = 0;
};

MyLib.prototype.loadMore = function (id, loadingDivId, url) {
    if (this.current > -1) {
        this.current++;
        $(loadingDivId).html("<h3>Loading more records please wait...</h3>");
        $.get(url + this.current, function (data) {
            if (data != '') {
                $(id).append(data);
                $(loadingDivId).empty();
            } else {
                this.current = -1; // seems like this isn't being set
                $(loadingDivId).html("<h3><i>-- No more results -- </i></h3>");
            }
        });
    }
}