Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Wywołaj funkję po zmianie adresu URL
Forum PHP.pl > Forum > XML, AJAX
Bart123
Wszystko opisałem w tytule. ostatnio spotykam się z takimi problemami, że już dawno powinienem to pytanie zadać.

Ponieważ nigdy tego nie robiłem i to będzie mój pierwszy raz (niczym u prawiczka hahaha ), proszę od razu o przykład.

Chodzi mi konkretnie o addClass kiedy zmieni się adres url strony. Bez żadnego klikania. Niech skrypt patrzy w adres url i jeżeli się zmienił, niech funkcja zadziała.
Damonsson
Jeżeli zmieni się URL, to strona załaduje się od nowa i wszystkie Twoje dynamiczne addClass itp. szlag trafi.
Bart123
Nie ponieważ używam wtyczki do ajaxowania linków. W związku z tym, strona ładuje się bez przeładowania takiego fizycznego.

Konkretnie: Ajaxify Wordpress Site.

I w tym momencie zmiana klas działa ale dopiero po kliknięciu na link. Żeby móc dodać do tego paginację, musi to działać na bazie adresu URL właśnie albo w jakikolwiek inny sposób, którego ja nie znam.

Klikam na zmianę strony na następną - link jest nad stopką. A menu mam w header . W momencie kiedy kliknę na następną stronę u dołu, chcę żeby u góry zmieniała się klasa aktywnego linku. Nie wiem czy to jasno opisuję.

trueblue
Pisał o rozwiązaniu w Twoim poprzednim temacie.
Bart123
Rozwiązanie .on("popstate" - być może przez wordpress - kompletnie nie działa więc podpowiedź mi nie pomogła. Stąd postanowiłem czekać w nowym temacie na inne pomysły, zadając konkretne pytanie.
trueblue
Jak wygląda obecnie budowa adresu (w pasku przeglądarki), z hashem czy bez?
Bart123
Obecnie już bez bo skoro nie zadziałało, wróciłem do starego rozwiązania.

http://Adres/edukacja

Bo w tej chwili zmiany klass w menu działają po kliknięciu w link w headerze w menu głównym - tak jak było.

Natomiast paginacja tylko przerzuca strony ale już nie zmienia klas. Paginacja wtyczkowa oczywiście bo życie sobie należy ułatwiać wink.gif
trueblue
Spróbuj podpiąć tak:
window.onpopstate = function(e){
//
}
lub:
window.addEventListener("popstate", function(e) {
//
});
Bart123
[JAVASCRIPT] pobierz, plaintext
  1.  
  2. $(window).load(function () {
  3. var tutaj = jQuery('.wrapper').offset().top;
  4. jQuery('html, body').animate({scrollTop: tutaj}, 'slow');
  5.  
  6.  
  7. });
  8.  
  9. jQuery(document).ready(function(){
  10.  
  11. window.onpopstate = function(e){
  12. $('.current-menu-item').removeClass("current-menu-item");
  13. $("a[href*='" + location.pathname + "']").addClass("current-menu-item"); });
  14.  
  15. });
  16.  
  17. jQuery(document).ready(function(){
  18.  
  19. $('.home').click(function() {
  20. $('.current-menu-item').removeClass("current-menu-item");});
  21. });
  22.  
[JAVASCRIPT] pobierz, plaintext


To jest mój dokument w całośći. Po wpisaniu tego co podałeś - DRUGA CZĘŚĆ - żaden ze skryptów nie działa więc pewnie ja coś źle wpisałem? pierwszy zawsze działał bezbłędnie.

ROZWIĄZANIE DRUGIE:

[JAVASCRIPT] pobierz, plaintext
  1.  
  2. jQuery(document).ready(function(){
  3.  
  4. $(window).addEventListener("popstate", function(e) {
  5. $('.current-menu-item').removeClass("current-menu-item");
  6. $("a[href*='" + location.pathname + "']").addClass("current-menu-item"); });
  7.  
  8. });
  9.  
  10.  
[JAVASCRIPT] pobierz, plaintext


Ta część pozostaje kompletnie bez reakcji. Tak, jakby jej nie było.
trueblue
Linia 13: });
powinno być }

P.S. Używaj narzędzie developerskich w przeglądarce. Ułatwi Ci sporo.
Bart123
Zwykle używam. Teraz już po prostu w akcie desperacjii chcę tą stronę skończyć i zostawić ją w cholerę heheh smile.gif

Ej! Działa! Jesteś wielki! Normalnie dać mu browara smile.gif Teraz muszę tylko włączyć anulowanie klas w momencie, kiedy strona dochodzi do home. Ale to mała poprawka. Zaraz będzie.

Trueblue - BiG Respect smile.gif Thx.
trueblue
Nie przyłączaj addEventListenter do $(window), ale bezpośrednio do obiektu window.

Chce się upewnić, czy adres w pasku zmienia się bez przeładowania strony?
Bart123
Trueblue zmienia się bez przeładowania. Ajaxem z gifem. Z tym że ja użyłem tego.

[JAVASCRIPT] pobierz, plaintext
  1.  
  2. jQuery(document).ready(function(){
  3.  
  4. window.onpopstate = function(e){
  5. $('.current-menu-item').removeClass("current-menu-item");
  6. $(".nav-menu li a[href*='" + location.pathname + "']").addClass("current-menu-item"); };
  7.  
  8. });
  9.  
[JAVASCRIPT] pobierz, plaintext



Tylko jakoś nie mogę wyłączyć klas przy zmiana adresu na adres strony głównej. Ale do tego zaraz dojdę znając życie.
trueblue
Upewnij się, że ta funkcja jest wywoływana przy zmianie adresu, wrzuć do środka jakiś alert.

P.S. Ten sposób nie jest najlepszy, bo jeśli wcześniej w kodzie jest przypięta obsługa zdarzenia na onpopstate, ta metoda nadpisze handlery.
Bart123
Tu jest tylko jedna taka funkcja więc nie ma problemu.

Alert się wyświetla. Nie wyświetla się tylko wtedy, kiedy ręcznie zmienię adres, wpisując go do paska, ale tu niie o to chodzi więc wszystko gra chyba.

No nie do końca, bo chyba chcąc dodać remove class dla wszystkich a, kiedy jestem na stronie głównej, będę musiał dwa razy użyć tego samego?
trueblue
Nie do końca rozumiem co masz na myśli, ale może chodzi Ci o tzw. initial state, który dotyczy nie tylko strony głównej, ale ogólnie wejścia na jakąkolwiek podstronę bez ajaxa.

http://blog.jonabrams.com/post/25435115993...html5-pushstate
Punkt 4.
Tam też powinieneś obsłużyć zaznaczanie/odznaczanie linków.
Bart123
Opiszę jaśniej.

Dodawaj klasę do aktualnego linku - czyli to co zrobiliśmy - ale nie dodawaj jej wtedy, kiedy jesteś na stronie głównej. Wtedy, usuwaj klasę z aktualnego linku i niech wszystkie będą bez klasy.

NP. WTEDY - KIEDY PRZY POMOCY PAGINACJI WRÓCIŁEŚ DO PIERWSZEJ STRONY.

Dlatego, że wtedy dodaje klasę do wszystkich linków. Tak jakby będąc na stronie głównej, był na wszystkich podstronach jednocześnie.

Pójdę coś zjeść i poczytam. Coś czuję, że wreszcie skończę dziś to badziewie:)

Próbowałem to zrobić tak, ale niestety tak prosto nie będzie:

[JAVASCRIPT] pobierz, plaintext
  1. jQuery(document).ready(function(){
  2. if (location.href !="Pierwsza strona"){
  3. window.onpopstate = function(e){
  4. $('.current-menu-item').removeClass("current-menu-item");
  5. $(".nav-menu a[href*='" + location.pathname + "']").addClass("current-menu-item");
  6. };
  7. };
  8. });
[JAVASCRIPT] pobierz, plaintext
trueblue
Warunek powinieneś dodać w środku zdarzenia i nie taki.

Czy główna strona ma link w .nav-menu?
Bart123
Nie no główna strona faktycznie ma link home. Ale to w ogóle chyba jest źle.

Chodziło mi o to - dodawaj klasy w nav-menu jeżeli aktualny url nie równa się i tu mój adres strony głównej.

Już włożyłem warunek do środka ale to nie działa. Nadal jeżeli url zmienia się na główny adres, to klasa dodaje się do wszystkich linków w nav-menu. A ja bym chciał, żeby ona w tym momencie stamtąd zniknęła.

Bo sam link home nie zaznacza się w żaden sposób - klikamy na logo i tyle.
trueblue
Pytałem czy jest tag <a> w .nav-menu, który odpowiada stronie głównej.

Jeśli jest, to musisz zrobić warunek na href odpowiadający jej, pewnie będzie to:
  1. if(location.pathname!=="/")
  2. $(".nav-menu a[href*='" + location.pathname + "']").addClass("current-menu-item");

Możesz, jeśli masz taką możliwość dodać do niego klasę np. home i wtedy:
  1. $(".nav-menu a[href*='" + location.pathname + "']:not(.home)").addClass("current-menu-item");


Bart123
Sorki bo ja trochę zamotałem. Jeszcze raz -

W nagłówku jest logo, które ma link do strony głównej. I to jest logo - zupełnie oderwane od nawigacji. Ten link do strony głównej ma klasę home właśnie.

A osobną jakby częścią nagłówka jest .nav-menu gdzie mamy wszystkie podstrony.

Teraz chyba jaśniej trochę.
trueblue
No, to jeśli nie ma w .nav-menu, to nie doda klasy current-menu-item, a wyczyści wszystkim <a> w menu.
I to przy wejściu na główną powinno działać jak oczekujesz.
Bart123
Ale to mam zrobić to co ostatnio podałeś?


Ja właśnie nie potrafię zrozumieć jednej rzeczy. Dlaczego kliknięcie w home oznacza dla niego zaznaczenie wszystkich linków w nav menu. Głupota.
trueblue
Tak, mieszasz:)

Jeśli tak jest, to obydwa rozwiązania, które podałem powinny zadziałać poprawnie (pierwsze pod warunkiem, że pathname dla głównej, to "/").
Bart123
Oto i jest cały zapis pliku, nad którym siedziałem dobry tydzień. Trueblue - dzięki Tobie nie siedziałem kolejny tydzień. Wielkie dzięki bo już byłem gotów zrezygnować smile.gif Czasem warto być upartym smile.gif

[JAVASCRIPT] pobierz, plaintext
  1.  
  2. $(window).load(function () {
  3. var tutaj = jQuery('.wrapper').offset().top;
  4. jQuery('html, body').animate({scrollTop: tutaj}, 'slow');
  5.  
  6.  
  7. });
  8.  
  9.  
  10.  
  11. jQuery(document).ready(function(){
  12.  
  13. window.onpopstate = function(e){
  14. if(location.pathname!=="/") {
  15. $('.current-menu-item').removeClass("current-menu-item");
  16. $(".nav-menu a[href*='" + location.pathname + "']").addClass("current-menu-item");
  17. };
  18.  
  19. if(location.pathname=="/") {
  20. $('.current-menu-item').removeClass("current-menu-item");
  21. };
  22. };
  23. });
  24.  
[JAVASCRIPT] pobierz, plaintext


trueblue
A tu masz prościej (druga część kodu). Wstawianie do .ready nie jest potrzebne:

  1. window.onpopstate = function(e){
  2. $('.current-menu-item').removeClass("current-menu-item");
  3. if(location.pathname!=="/")
  4. $(".nav-menu a[href*='" + location.pathname + "']").addClass("current-menu-item");
  5. };
Bart123
trueblue - dzięki. Ja wiem tylko, że jak miałem wszystko razem, to się gubiłem.

Jak zaczynasz takie zabawy, to lepiej stawiać małe kroczki z rozłożonym kodem wink.gif

Ale oczywiście poprawkę wprowadzę bo jest jak zwykle trafna smile.gif

Kolejnba rzecz, której się nauczyłem : Javascript to nie PHP - nawiasy po warunku if są niepotrzebne wink.gif
com
z tym if to chyba żartujesz, w każdym języku jak masz 1 linie w warunku to nie potrzebujesz nawiasów, ale jak chcesz więcej to już Ci nie zadziała wink.gif
Bart123
Ok w takim razie ja jakoś z przyzwyczajenia zawsze używałem nawiasów.

To chyba nie jest jakiś szczególnie zły nawyk na szczęście smile.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.