Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
JS-Funktion nach Absenden eines Ajax-Formulars nicht mehr aktiv: Wie ändern?
#1
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.
Zitieren


Nachrichten in diesem Thema
JS-Funktion nach Absenden eines Ajax-Formulars nicht mehr aktiv: Wie ändern? - von pyretta - 18.04.2023, 08:51

Gehe zu:


Benutzer, die gerade dieses Thema anschauen:
1 Gast/Gäste