Question

I'm using this jQuery script to show search results. Everything works fine, but when search results have more than one page and I'm browsing pages via paging then every page loading is gradually getting slower. Usually first cca 10 pages loads I get quickly, but next are getting avoiding loading delay. Whole website get frozen for a little while (also loader image), but browser is not yet. What should be the problem?

function editResults(def) {
    $('.searchResults').html('<p class=\'loader\'><img src=\'images/loader.gif\' /></p>');
    var url = def;
    var url = url + "&categories=";
    // Parse Categories
    $('input[name=chCat[]]').each(function() {    
        if (this.checked == true) {
            url = url + this.value + ",";
        }
    });
    url = url + "&sizes=";
    // Parse Sizes
    $('input[name=chSize[]]').each(function() {    
        if (this.checked == true) {
            url = url + this.value + ",";
        }
    }); 
    url = url + "&prices=";
    // Parse Prices
    $('input[name=chPrice[]]').each(function() {    
        if (this.checked == true) {
            url = url + this.value + ",";
        }
    });
    $('.searchResults').load('results.php'+url);
    $('.pageLinks').live("click", function() {
        var page = this.title; 
        editResults("?page="+page);
    });
}
$(document).ready(function(){
    editResults("?page=1");
    // Check All Categories
    $('input[name=chCat[0]]').click(function() {
        check_status = $('input[name=chCat[0]]').attr("checked");
        $('input[name=chCat[]]').each(function() {    
            this.checked = check_status;    
        });
    });
    // Check All Sizes
    $('input[name=chSize[0]]').click(function() {
        check_status = $('input[name=chSize[0]]').attr("checked");
        $('input[name=chSize[]]').each(function() {    
            this.checked = check_status;    
        });
    });
    // Edit Results
    $('.checkbox').change(function() {
        editResults("?page=1");
    });
    // Change Type
   $(".sort").change(function() {               
        editResults("?page=1&sort="+$(this).val());
   });          
});
Was it helpful?

Solution

$('.pageLinks').live("click", function() {
    var page = this.title; 
    editResults("?page="+page);
});

just a wild guess but... wouldn't this piece of code add a new event handler to the click event instead reaplacing the old one with a new one? causing the click to call all the once registered handlers.

you should make the event binding just once

var global_var = '1';

function editResults(def) {
    // all your code
    global_var = 2; // what ever page goes next
};

$(document).ready(function() {
    // all your code ...
    $('.pageLinks').live("click", function() {
        var page = global_var;
        editResults("?page="+page);
    });
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top