GoldenLine
Zaloguj się

konto usunięte

Temat: Django i jquery, a dynamiczne menu

Cześć od kilku dni już siedzę nad pewnym problemem i nie mogę sobie z tym poradzić, a męczy mnie to niesamowicie.

Mianowicie tworze sobie stronę internetową, w której pozycje menu są ładowane w pliku html za pomocą pętli:
{% for item in menu_items %}
<li><a href="/nowakpawel/{{ item.url }}">{{ item.title }}</a></li>
{% endfor %}

I to działa poprawnie, ale teraz chcę zrobić za pomocą jquery dodawanie klasy "active" :
$(document).ready(function() {
$("#menu li").children().click(function() {
//$(this).append("test");
$(this).addClass("active");
});
});

I tu zaczynają się schody...doszedłem do tego, że kiedy zbuduje sobie menu na sztywno w dokumencie html, to ta klasa się dodaje, ale kiedy menu wyciągane jest z bazy to klasa ta natychmiast po dodaniu jest z powrotem kasowana - zbadałem to przy pomocy funkcji 'append' - do menu był dodawany tekst, ale natychmiast znikał.
Bardzo proszę o pomoc, zależy mi na tym, a nie wiem już, z której strony to ugryźć.Ten post został edytowany przez Autora dnia 09.12.13 o godzinie 15:13
Link do wypowiedziLink
Piotr Maliński

Piotr Maliński Programista
Python/Django

Temat: Django i jquery, a dynamiczne menu

Nie masz tam jakiegoś innego JavaScriptu, który sobie działa? Albo popsuty HTML przez dynamiczne dane zawierające znaki specjalne.? Zamiast $("#menu li").children() możesz też spróbować użyć np. $("#menu a")
Link do wypowiedziLink

konto usunięte

Temat: Django i jquery, a dynamiczne menu

Rozumiem, że po kliknięciu anchora przechodzisz na inną stronę, nie ładujesz jej przez ajaxa (czy inne).
Stąd Twój "active" jest dodawany i od razu odejmowany.
Explain : w momencie clicka Twój jQuery dodaje classe, lecz po przejściu wczytujesz całego DOM'a od początku więc jest usuwany (I tak w kółko).
(Nie mam pojęcia w jaki sposób masz różnice w działaniu : sztywny html / menu ładowane z bazy, przecież to tylko różnica rendera, w ogóle nie powinno działać :) )
Jeżeli chcesz dodać classe do anchora dla current position, a Twoja appka opiera się na return to response, spróbuj napisać swojego template tag, tutaj masz kawałek kodu : https://snipt.net/jonbiddle/simple-navigation-template-...
Mam nadzieję, że pomoże :)
Link do wypowiedziLink

konto usunięte

Temat: Django i jquery, a dynamiczne menu

Dzięki za odpowiedź, a czy możesz podać jeszcze jakiś link gdzie te template tag jest umówione szczegółowo? Chciałbym sobie to przerobić ?
Dzięki z góry :)
Link do wypowiedziLink
Piotr Maliński

Piotr Maliński Programista
Python/Django

Temat: Django i jquery, a dynamiczne menu

Własnych tagów należy unikać o ile to możliwe. Są trudniejsze do debugowania i nie zawsze potrzebne. Do oznaczania w menu danej podstrony jako aktywnej można użyć IFa albo bloków - dodając klasę gdy warunek zostanie spełniony.
Link do wypowiedziLink

konto usunięte

Temat: Django i jquery, a dynamiczne menu

Ok, chyba jestem o krok dalej. Mój skkrypt wygląda teraz tak:
$(document).ready(function() {
$("#menu li a").click(function() {
$("#menu").removeClass("active");
$(this).addClass("active");
return false;
});
});

Dodałem linijkę 'return false;'(chociaż nie do końca rozumiem czemu to ma służyć), w każdym razie klasa się dodaje - menu item staje się aktywny, ale teraz problem jest taki, że po kliknięciu linku strona nie przechodzi do urla, ani klasa z pozostałych, klikniętych już odnośników nie jest usuwana.
Macie jakieś sugestie?
Link do wypowiedziLink

konto usunięte

Temat: Django i jquery, a dynamiczne menu

Paweł N.:
[...]
Dodałem linijkę 'return false;'(chociaż nie do końca rozumiem czemu to ma służyć),
Poczytaj o jquery... warto jednak takie rzeczy wiedzieć.
Macie jakieś sugestie?
Zobacz jak to jest zrobione w bootstrapie. Weź jakieś demo, poprzerabiaj tak, żeby robiło to co chcesz... Potem odpal jakiegoś debugera i prześledź co tam się dzieje pod spodem. Pogrzeb i spróbuj zrobić od jquery - sam. Zobacz jakie są problemy i jak rozwiązują inni np. ten bootstrap.
W ten sposób machniesz coś fajnego, a nikt nie będzie fuczeć, że grupa prowadzi Ciebie za rączkę. Chociaż - ruchu nie ma, więc zawsze to lepiej taki ruch niż cisza kompletna.
Link do wypowiedziLink
Artur Kwiatkowski

Artur Kwiatkowski Front-end developer

Temat: Django i jquery, a dynamiczne menu

Może tak:

$(document).ready(function() {

$("#menu li a").click(function(){
$(this).parent().siblings().find("a").removeClass('active');
$(this).addClass("active");
return false;
});

});

http://jsfiddle.net/jEybq/

Tu masz działającego fiddla.
Pamiętaj, że ten kod musi być wykonany dopiero w momencie kiedy menu jest już wygenerowane w 100%.
On dom ready powinno załatwić sprawę aczkolwiek kolejność wykonania skryptów też może być istotna.

Edit: nie chcę krytykować Michała ale nie polecam zabawy w wygrzebywanie z Bootstrapa menu i jego funkcjonalności. O ile pamiętam i jeśli to się nie zmieniło Bootstrap wcale nie ma takiego dobrego javascriptu - w tym projekcie zawsze był to jeden wielki zlepek czegoś co akuratnio działa. Jak już chcesz się podszkolić z jquery to polecam żebyś formułował poprawnie zapytania do Googla albo na Stackoverflow, również sama dokumentacja jquery powinna być wystarczająca jeśli wiesz czego mniej więcej szukasz: http://api.jquery.com/category/traversing/tree-traversal/Ten post został edytowany przez Autora dnia 11.12.13 o godzinie 08:09
Link do wypowiedziLink

konto usunięte

Temat: Django i jquery, a dynamiczne menu

Ok, temat już nieważny, dzięki wszystkim za sugestie - błąd był zarówno w skrypcie javascript jak i w CSS - coś namieszałem z tagami. Zrobiłem wg tego poradnika -> http://www.itworld.com/development/351097/setting-acti....
Wnosek mam taki, że muszę się douczyć jquery ;)
Link do wypowiedziLink
« Wróć do tematów
Odpowiedz

Podobne tematy


Następna dyskusja:

Instalacja django bez praw ...




Wyślij zaproszenie do
Anuluj