ajax - reset jquery variable to initial -

i'm creating ajax post load wordpress project.

when scroll down page, page number increased 1 each time. want.

actual problem:

when select category drop down, want reset page variable 1. following code set page number 1 instance called, , when scroll down page increased previous number not 1.

for ex: when open link , inspect in firebug...

- see pagenumber variable set 1. - scroll down page , changed 2. when go , select category filter posts, ,  - inspect page number in firebug showing 1, right.  - if scroll down page pagenumber changed    3 not 2. 

this problem...

// ajaxloop.js jquery(function($){ var $grid = $('.post-area').masonry({       itemselector: '.post-area .box',     }); var page = 1; // initialization var loading = true; var $window = $(window); var $content = $("body.blog #main"); var load_posts = function( page = 1, cat = '', year = '', orderby = '' ){         // if filter applied , page 1         if((cat != '' || year != '' || orderby != '') &&  page == 1){             $content.html('');             page = 1; // think reset page variable 1, not working         }         $.ajax({             type       : "get",             data       : {numposts : 1, pagenumber: page, cat: cat, year: year, orderby: orderby},             datatype   : "html",             url        : "wp-content/themes/theme-name/loophandler.php",             beforesend : function(){                 if(page != 1){                     $content.append('<div id="temp_load" style="text-align:center">\                         <img src="/wp-content/themes/theme-name/images/ajax-loader.gif" />\                         </div>');                 }             },             success    : function(data){                  $data = $(data);                 if($data.length){                     $data.hide();                     $content.append($data);                     $grid.append( $data ).masonry( 'appended', $data );                     $grid.masonry( 'reloaditems' );                     $grid.masonry( 'layout' );                      $data.fadein(500, function(){                         $("#temp_load").remove();                         loading = false;                     });                 } else {                     $("#temp_load").remove();                 }             },             error     : function(jqxhr, textstatus, errorthrown) {                 $("#temp_load").remove();                 alert(jqxhr + " :: " + textstatus + " :: " + errorthrown);             }     }); } $window.scroll(function() {     var content_offset = $content.offset();     console.log(content_offset.top);     if(!loading && ($window.scrolltop() +         $window.height()) > ($content.scrolltop() + $content.height() + content_offset.top)) {             loading = true;             var cat = $('select[name="cat"]').val();             var year = $('select[name="year"]').val();             var orderby = $('select[name="orderby"]').val();             page++;             load_posts( page, cat, year, orderby);     } }); $('select[name="cat"]').on('change', function() {     var cat = $(this).val();     var year = $('select[name="year"]').val();     var orderby = $('select[name="orderby"]').val();     load_posts(1, cat, year, orderby); });  $('select[name="year"]').on('change', function() {     var year = $(this).val();     var cat = $('select[name="cat"]').val();     var orderby = $('select[name="orderby"]').val();     load_posts(1, cat, year, orderby); });  $('select[name="orderby"]').on('change', function() {     var orderby = $(this).val();     var cat = $('select[name="cat"]').val();     var year = $('select[name="year"]').val();     load_posts(1, cat, year, orderby); });  load_posts(); }); 

i think there must easy solution this, not figure out. can guide me in right direction? i'm not ninja jquery...

i think should work you,

remove page parameter load_posts

and in case of change event before calling load_posts function set page value 1