Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [HTML][Java]Funkcja modyfikująca DOM działa, gdy uruchamiana jest po pewnym czasie
stellatus
post 27.03.2020, 21:15:59
Post #1





Grupa: Zarejestrowani
Postów: 196
Pomógł: 0
Dołączył: 9.03.2017

Ostrzeżenie: (0%)
-----


Wstawiłem działającą funkcję JS modyfikującą DOM na stronę w WordPressie. Nie działa. Jednak gdy odpalam ją po jakimś czasie (za pomocą setTimeout albo ręcznie w konsoli) to wtedy działa. Rozumiem, że to nie jest dobre rozwiązanie. Jak zatem uruchomić ją poprawnie?
Go to the top of the page
+Quote Post
trueblue
post 27.03.2020, 21:40:14
Post #2





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


Zależy czy elementy, które modyfikujesz są ładowane wraz z kodem strony czy Ajax'em.
Jeśli to pierwsze, to modyfikacje należy przeprowadzić kiedy drzewo DOM jest załadowane - zdarzenie DOMContentLoaded. Jeśli to drugiej, to albo trzeba dostać się do funkcji, która uruchamia się po wykonaniu żądania Ajax, albo można użyć MutationObserver.


--------------------
Go to the top of the page
+Quote Post
stellatus
post 1.04.2020, 09:28:47
Post #3





Grupa: Zarejestrowani
Postów: 196
Pomógł: 0
Dołączył: 9.03.2017

Ostrzeżenie: (0%)
-----


OK, dzięki. Sprawdzę to i dam znać jak będę gotów.

Na stronie https://www.freuciv.com/ po naciśnięciu przycisku "Tags" otwiera się flyout z listą uporzadkowaną alfabetycznie. Każda grupa słów zaczynających się na tę samą literę ma nagłówek składający się z tej litery. Powoduje to skrypt uruchomiany wraz z naciśnięciem przycisku "Tags". Jednak, gdy naciśnięmy którykolwiek z checkboxów, nagłówki znikają. Źeby nie znikały to wraz z naciśnięciem checkboxa skrypt także powinien być uruchamiany, zgadza się? Napisałem więc coś takiego:

Kod
function addEventToCheckboxes() {

    let list = document.querySelectorAll(".flyout-item .facetwp-checkbox")
    console.log(list)

    list.forEach(function(element) {
        element.addEventListener("click", tagsEvents)
    })

}
addEventToCheckboxes()


Funkcja tagsEvents() do dodawania nagłówków:

Kod
function firstLettersRemove() {

    let list = document.querySelectorAll("div.facetwp-facet-tags > h4")
    list.forEach(function(element) {
        element.remove()
    })
}


function firstLetters() {
    const list = document.querySelectorAll("div.facetwp-facet-tags > div.facetwp-checkbox")
    const parent = document.querySelector("div.facetwp-facet-tags")
    let letterToCompare = ""

    list.forEach(function(element) {
        let firstLetter = element.textContent.charAt(0)
        let firstLetterUC = firstLetter.toUpperCase()
        let firstLetterHeaderText = document.createTextNode(firstLetterUC)

        if (letterToCompare != firstLetterUC) {
            let firstLetterHeader = document.createElement("h4")
            firstLetterHeader.appendChild(firstLetterHeaderText)
            parent.insertBefore(firstLetterHeader, element)
        }

        letterToCompare = firstLetterUC
    })
}

function tagsEvents() {
    firstLettersRemove()
    firstLetters()
        console.log("Hello tagsEvents!")
}


Zdarzenie dodaje się poprawnie, ale funkcja tagsEvents() odpowiadająca za dodawanie nagłówków nie działa. Rozumiem, że to dlatego, że uruchamia ona się zanim skończy się wyszukiwanie, bo console.log("Hello tagsEvents!") wyświetla się poprawnie. Tutaj zastosowany jest AJAX, prawda? Więc co dalej? Piszesz, że "trzeba dostać się do funkcji, która uruchamia się po wykonaniu żądania Ajax, albo można użyć MutationObserver"? Gdzie znajdę tę funkcję? Mam pierwszy raz do czynienia z AJAX-em i nie bardzo wiem jak się do tego zabrać. O tym Mutation Observer muszę jeszcze poczytać, bo na razie wiem o nim niewiele.

Do nawigacji facetowej używam wtyczki FacetWP. Tutaj jest trop: https://facetwp.com/documentation/developer...facetwp-loaded/
Kod
    (function($) {
    $(document).on('facetwp-loaded', function() {
        tagsEvents()
        console.log("Hello facetwp-loaded!")
     });
})(jQuery);

Gdy uruchomię tę funkcję to tagsEvents() będzie się uruchamiała zawsze po zakończeniu jakiegokolwiek wyszukiwania poprzez FacetWP, a ja chciałbym, żeby urchamiała się tylko po kliknięciu któregokolwiek z checkboxów. Nie znam za bardzo jQuerry. Takie coś nie działa:
Kod
    (function($) {
    $(".facetwp-checkbox").on('facetwp-loaded', function() {
        tagsEvents()
        console.log("Hello facetwp-loaded!")
     });
})(jQuery);


Ten post edytował stellatus 1.04.2020, 18:05:32
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 29.03.2024 - 05:58