jQuery Ajax - Filterfunktion - Doppelte Inhalt

B

BlackPMetall

Grünschnabel
Hallo :),

Ich arbeite gerade an eine Filterfunktion für ein Online-Shop. Dabei wird die Änderung sofort von Javascript und jQuery erfasst und die Parameter werden mit jQuery/Ajax an die PHP Seite weitergeleitet. Es funktioniert so, dass der DIV, wo die ganze Produkte drin sind, gelöscht wird und dann ein neue DIV mit den neuen Produkten (angepasst an die Filtersuchanfrage) wird neu gebildet.

Es funktioniert alles super. Problem nur, wenn manchmal eine Anfrage länger dauert und bevor es zu Ende ist die Filterfunktion geändert wird, dann habe ich 2 bzw. mehrere DIVS mit dem gleichen Inhalt hintereinander.

Ich habe leider nicht soviel Erfahrung mir jQuery. Am besten wäre, wenn eine neue Anfrage gestartet wird, währen die alte Anfrage noch läuft, dann soll die alte Anfrage gestoppt bzw. gelöscht werden und nur die neue Anfrage angezeigt werden. Ist das überhaupt möglich?

Hier meine Javascript Code:

Bei jeder Änderung wird subQuery gerufen und diese checkt erstmal alle eingestellte Parameter in der Filterbereich und dann gibt sie alle weiter an PHP. Da wird die Anfrage generiert und der neue DIV kommt wieder zurück zum Funktion und wird ausgegeben.

Javascript: 
function subQuery(elament){   
    $('.response').fadeOut(500, function() {
                    $(this).remove();                                
    });
    //if(elament == 'msiza') $("#sizecc").val(99);
   
    if(elament == 'paga') var page = $("#pag").val(); else var page = 1;
       
        var cPath = $('#cpeth_o').val();
        if(cPath == "")
        var cPath = $('#cpeth').val();
   
            var long1 = $("#long-from").val().replace("<","");
            var long2 = $("#long-to").val().replace(">","");
            var width1 = $("#width-from").val().replace("<","");
            var width2 = $("#width-to").val().replace(">","");
       
            var preis1 = $('#price-from').val().replace("<","");
            var preis2 = $('#price-to').val().replace(">","");
           
            var proseite = $('#proseite').val();
            var sorti = $('#sorti').val();
           
            var sCarpetnr = $('#myhiddeninput').val();
                       
            var multi = "";    var cream = ""; var red = ""; var blue = ""; var green = ""; var yellow = ""; var braun = ""; var black = "";
            var eckig = ""; var quadrat = ""; var rund = ""; var runner = ""; var oval = "";            
           
            if( $('.all2').is(':checked')) {
            var multi = "noshowfa";    
                 } else {
            if( $('#multi').is(':checked'))  var multi = "showfa";    
            if( $('#cream').is(':checked')) var cream = "showfa";
            if( $('#red').is(':checked')) var red = "showfa";
            if( $('#blue').is(':checked')) var blue = "showfa";
            if( $('#green').is(':checked')) var green = "showfa";
            if( $('#yellow').is(':checked')) var yellow = "showfa";
            if( $('#braun').is(':checked')) var braun = "showfa";
            if( $('#black').is(':checked')) var black = "showfa";            
            }
           
            if( $('.all').is(':checked')) {
            var eckig = "noshowfo";    
                 } else {
            if( $('#eckig').is(':checked')) var eckig = "showfo";    
            if( $('#quadrat').is(':checked')) var quadrat = "showfo";
            if( $('#rund').is(':checked')) var rund = "showfo";
            if( $('#runner').is(':checked')) var runner = "showfo";
            if( $('#oval').is(':checked')) var oval = "showfo";
            }   
           
            var keywords = $("#keywords2").val();
           
                       
           
            subAjax(long1,long2,width1,width2,cPath,sCarpetnr,preis1,preis2,multi,cream,red,blue,green,yellow,braun,black,eckig,quadrat,rund,runner,oval,sorti,proseite,page,keywords);
}

function subAjax(long1,long2,width1,width2,cPath,sCarpetnr,preis1,preis2,multi,cream,red,blue,green,yellow,braun,black,eckig,quadrat,rund,runner,oval,sorti,proseite,page,keywords){
   
            $.ajax({
               type: 'POST',
               url: 'process.php',
               data: 'long1=' + long1 + '&long2=' + long2 + '&width1=' + width1 + '&width2=' + width2 + '&cPath=' + cPath + '&sCarpetnr=' + sCarpetnr + '&preis1=' + preis1 + '&preis2=' + preis2 + '&multi=' + multi + '&cream=' + cream + '&red=' + red + '&blue=' + blue + '&green=' + green + '&yellow=' + yellow + '&braun=' + braun + '&black=' + black + '&eckig=' + eckig + '&quadrat=' + quadrat + '&rund=' + rund + '&runner=' + runner + '&oval=' + oval + '&sorti=' + sorti + '&proseite=' + proseite + '&page=' + page+ '&keywords=' + keywords,
              
               success: function(response){                  
                 $('#productsh').fadeIn(1000, function() { 
                 $(this).append('<div class="response" >' + response + '</div>');
                 });
                 $("#topbereich").fadeOut(100);
   
                 if ( $( ".cycle-gallery" ).length ) {
                    $('.cycle-gallery').fadeOut(100, function() {
                        $(this).remove();
                        $('html, body').animate({ scrollTop: ($('.holder').offset().top)}, 900);                            
                    });
                 } else {
                     $('html, body').animate({ scrollTop: ($('.holder').offset().top)}, 900);
                 }
                 subHash(long1,long2,width1,width2,cPath,sCarpetnr,preis1,preis2,multi,cream,red,blue,green,yellow,braun,black,eckig,quadrat,rund,runner,oval,sorti,proseite,page,keywords);
               }                   
              
            });    
}

function subHash(long1,long2,width1,width2,cPath,sCarpetnr,preis1,preis2,multi,cream,red,blue,green,yellow,braun,black,eckig,quadrat,rund,runner,oval,sorti,proseite,page,keywords){
   
                hashi = 'long1=' + long1 + '&long2=' + long2 + '&width1=' + width1 + '&width2=' + width2 + '&preis1=' + preis1 + '&preis2=' + preis2 + '&multi=' + multi + '&cream=' + cream + '&red=' + red + '&blue=' + blue + '&green=' + green + '&yellow=' + yellow + '&braun=' + braun + '&black=' + black + '&eckig=' + eckig + '&quadrat=' + quadrat + '&rund=' + rund + '&runner=' + runner + '&oval=' + oval + '&sorti=' + sorti + '&proseite=' + proseite + '&page=' + page + '&keywords=' + keywords + '&sCarpetnr=' + sCarpetnr;
               
                window.location.hash = hashi;
}

Hat jemand eine Idee?

Vielen Dank in Voraus.
 
Danke für den Hinweis. Ich habe bisschen alles durchgelesen und rum probiert. Leider kann ich aufgrund meiner fehlenden Erfahrung in jQuery damit nicht umgehen. :( ... Kann mir jemand einen Hinweis geben, wie ich das umsetzen kann?
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück