Undefined Variable

I've got a click handler on a button to run a JavaScript pagination feature. For some reason I'm getting error filterSet not defined.

At the top of my php page:

echo '<script>
        var search = new Search();
         search.setSearch('. '\'' . urldecode($_GET['search']) . '\''  .');
                           
         $(document).ready(function(){
                                   
                   $( "#loadmore" ).click(function() {
                              search.fetchSearch();
                     });
                                   
          });
    </script>';

Code (markup):

JavaScript Class

function Search()
{
    this.ID = 0;
    this.filter = "highest plays";
    this.page = 1;
    this.search = "";
   
    this.fetch = function()
    {
       
        var filterSet = this.filter;
        var pageSet = this.page;
        this.page = this.page + 1;
       
        $.ajax({
                  method: "POST",
                  url: "php/fetch_search_js.php",
                  dataType: 'json',
                  data: { filter: filterSet, pageVal:pageSet}
                }).done(function( data ) {
                   
                // the returned data will be the needed ID for pagination
                // will fetch highest ID from query based on filter
               
                if(data.message == "success")
                {
                   
                    $('#searchresults').append(data.html);
                   
                }
                   
        });
       
    }
   
    this.fetchSearch = function()
    {
       
        alert("fetch search");
       
    }
   
    this.setFilter(filterSet)
    {
       
        this.filter = filterSet;
       
    }
   
    this.setSearch(searchSet)
    {
       
        this.search = searchSet;
       
    }

// end class       
}

Code (markup):

 

I don't see Search.fetch() being called, but if you are doing so from an event handler remember that object.this points at the FUNCTION, not the parent object in those cases. More often than not -- even with the train wreck of developer ineptitude and ignorance that is jQuery -- that is the leading cause of a variable declared on an object not existing in one of that object's methods.

Pretty much when you try to set "filterSet = this.filter" the FUNCTION doesn't even have a 'filter' property.

Usually you can get around this by just using locals on the parent object instead of assigning them as properties.