Javascript-forum
JS-Funktion nach Absenden eines Ajax-Formulars nicht mehr aktiv: Wie ändern? - Druckversion

+- Javascript-forum (https://javascript-forum.de)
+-- Forum: Javascript allgemeiner (https://javascript-forum.de/forumdisplay.php?fid=16)
+--- Forum: jQuery (https://javascript-forum.de/forumdisplay.php?fid=17)
+--- Thema: JS-Funktion nach Absenden eines Ajax-Formulars nicht mehr aktiv: Wie ändern? (/showthread.php?tid=2316)

JS-Funktion nach Absenden eines Ajax-Formulars nicht mehr aktiv: Wie ändern? - pyretta - 18.04.2023

Hallo,
ich versuche einem in Wordpress angelegten Filter mittels Javascript eine bessere optische Führung zu verpassen. Die jeweiligen Filtergruppen sollen ähnlich eines Akkordeons funktionieren. Beim ersten Pageload klappt das auch wunderbar, aber sobald ein Filter ausgewählt und damit das Formular mittels Ajax abgesendet wurde, wird meine Funktion ignoriert und die Akkordeons verschwinden. Wie kann ich es schaffen, dass auch nach Absenden des Formulars die Funktion aufgerufen wird? Ich habe versucht in den "submit" Event irgendwie hinein zu gelangen, aber alle versuchten Methoden schlugen fehl.

Code:
jquery(document).on('submit','#search-filter-form-6474',function(e){

console.log('form submitted');

});

jquery('#search-filter-form-6474').on('submit',function(e){

console.log('form submitted');

});

jquery('#search-filter-form-6474').submit(function(e){

console.log('form submitted');

});

jquery('#search-filter-form-6474').submit(function(e){

e.preventDefault();

var form = jquery(this);

var actionUrl = form.attr('action');

jquery.ajax({

type: "POST",

url: actionUrl,

data: form.serialize(),

dataType: "json",

success:function(data){

console.log('form submitted');

}

});

});

Mein aktuell verwendeter Code für die "Akkordeon-Funktion" sieht wie folgt aus, der wie gesagt ausschließlich beim ersten Pageload funktioniert, nach Filter-Auswahl nicht mehr:
Code:
var filterexpand = function(){
    jQuery('li.sf-field-taxonomy-member-stakeholder-expertise ul').addClass('filtercontent');
    jQuery('li.sf-field-taxonomy-members_functional_expertise ul').addClass('filtercontent');
    jQuery('li.sf-field-taxonomy-members_process_expertise_tools ul').addClass('filtercontent');
    jQuery('li.sf-field-taxonomy-member-location ul').addClass('filtercontent');
    
    jQuery('li.sf-field-taxonomy-member-stakeholder-expertise h4').css('cursor','pointer').addClass('filterexpander');
    jQuery('li.sf-field-taxonomy-members_functional_expertise h4').css('cursor','pointer').addClass('filterexpander');
    jQuery('li.sf-field-taxonomy-members_process_expertise_tools h4').css('cursor','pointer').addClass('filterexpander');
    jQuery('li.sf-field-taxonomy-member-location h4').css('cursor','pointer').addClass('filterexpander');
    
    
    if(jQuery('li h4.filterexpander').find('i').length == 0){
        jQuery('li h4.filterexpander').append('<i class="fa-solid fa-caret-down"></i>');
    }    
    
    jQuery('li.sf-field-taxonomy-member-stakeholder-expertise h4').on('click', function(){
        var _this = jQuery(this);    
        var list = _this.closest('li.sf-field-taxonomy-member-stakeholder-expertise').find('ul');
        
        if(_this.hasClass('active')){
            list.hide();
            _this.removeClass('active');
            _this.find('i').removeClass('fa-caret-up').addClass('fa-caret-down');
        }else{
            _this.addClass('active');
            list.show();
            _this.find('i').removeClass('fa-caret-down').addClass('fa-caret-up');        
        }
    });    
    
    jQuery('li.sf-field-taxonomy-members_functional_expertise h4').on('click', function(){
        var _this = jQuery(this);    
        var list = _this.closest('li.sf-field-taxonomy-members_functional_expertise').find('ul');
        
        if(_this.hasClass('active')){
            list.hide();
            _this.removeClass('active');
            _this.find('i').removeClass('fa-caret-up').addClass('fa-caret-down');
        }else{
            _this.addClass('active');
            list.show();
            _this.find('i').removeClass('fa-caret-down').addClass('fa-caret-up');            
        }
    });
    
    jQuery('li.sf-field-taxonomy-members_process_expertise_tools h4').on('click', function(){
        var _this = jQuery(this);    
        var list = _this.closest('li.sf-field-taxonomy-members_process_expertise_tools').find('ul');
        
        if(_this.hasClass('active')){
            list.hide();
            _this.removeClass('active');
            _this.find('i').removeClass('fa-caret-up').addClass('fa-caret-down');
        }else{
            _this.addClass('active');
            list.show();
            _this.find('i').removeClass('fa-caret-down').addClass('fa-caret-up');            
        }
    });
    
    jQuery('li.sf-field-taxonomy-member-location h4').on('click', function(){
        var _this = jQuery(this);    
        var list = _this.closest('li.sf-field-taxonomy-member-location').find('ul');
        
        if(_this.hasClass('active')){
            list.hide();
            _this.removeClass('active');
            _this.find('i').removeClass('fa-caret-up').addClass('fa-caret-down');
        }else{
            _this.addClass('active');
            list.show();
            _this.find('i').removeClass('fa-caret-down').addClass('fa-caret-up');            
        }
    });
}

jQuery(document).ready(function(e) {
    filterexpand();
    jQuery('li.sf-field-taxonomy-member-stakeholder-expertise ul').hide();
    jQuery('li.sf-field-taxonomy-members_functional_expertise ul').hide();
    jQuery('li.sf-field-taxonomy-members_process_expertise_tools ul').hide();
    jQuery('li.sf-field-taxonomy-member-location ul').hide();    
});

Damit Ihr das Euch selbst einmal in Aktion ansehen könnt, hier die betreffende Seite: https://www.healthcareshapers.com/member-filters

Könnt Ihr mir hier weiterhelfen, so dass die Akkordeon-Funktion "filterexpand()" auch nach Filterauswahl greifen kann?
Vielen Dank schon mal im Voraus.

Hinweis: Bitte Antworten hier im Forum, nicht an die angegebene Mobilnummer oder E-Mail. Danke.

RE: JS-Funktion nach Absenden eines Ajax-Formulars nicht mehr aktiv: Wie ändern? - rzscout - 18.04.2023

Hi pyretta,
ich habe mal dein Thread zu jQuery verschoben. Da es sich hauptsächlich um jQuery(Framework/Bibliothek) handelt, passt das gut in diese Sparte hinein. Ich werde für dich eine Lösung suchen.

Viele Grüße

rzscout

RE: JS-Funktion nach Absenden eines Ajax-Formulars nicht mehr aktiv: Wie ändern? - rzscout - 19.04.2023

Hi pyretta,
ich habe mir das ganze genau angeschaut und finde es etwas komisch. Warum müssen Inhalte komplett neu geladen werden mit dem Filter. Es wäre schlauer wenn alles sowieso einmal geladen wurde einfach bestimmte einfach auszublenden die nicht dem Filtervorgaben entsprechen. Das spart Traffic und Performance. Zudem muss man es sich nicht komplexer machen als es ist. Wenn es sich mehr als um 300 Profile handelt kann man eine andere Lösung nutzen. Und zwar lädt man nur ein Teil und bei Bedienung des Filters werden die Profile die nicht vorhanden sind nachgeladen.

Ich würde dir auch empfehlen auf jQuery zu verzichten, da natives JavaScript schneller ist, man kann damit sauberer arbeiten und jQuery ist in vielen Bereichen überholt. Wenn du weitere Fragen hast wie man das mit nativen Lösungen macht, dann einfach hier in den Thread schreiben.

Viele Grüße

rzscout