konto usunięte

Temat: jquery - nieaktualna zawartość DOM?

Poniższy kod ma zwijać / rozwijać diva i dodatkowo zmieniać tekst jednego linku, który go wywołuje:

<script type="text/javascript">
$(document).ready(function () {
$("#comments_edit_box_button").click(function(event) {
$("#comments_edit_box_hiddenable").slideToggle()
if ($("#comments_edit_box_hiddenable").is(':visible'))
text = "Zwiń"
else
text = "Napisz komentarz 22"
$("#comments_edit_box_button").text(text)
event.preventDefault()
})
}
)

</script>

Nie wiem czemu, ale dla warunku ($("#comments_edit_box_hiddenable").is(':visible')) cały czas jest podstawiana wartość jaka miała miejsce przy ładowaniu strony, bez uwzględnienia zmian wywołanych dynamicznie, choćby linia wyżej. Co może być tego przyczyną i jak to rozwiązać? Domyślam się, że to pewnie jakiś mój głupi błąd, ale jaki?

pozdrawiam,

Piotr
Michał Ławicki

Michał Ławicki dostawca zadowolenia

Temat: jquery - nieaktualna zawartość DOM?

spróbuj może osiągnąć efekt w inny sposób, bądź to po prostu


if ( $( "#comments_edit_box_hiddenable" ).css( "display" ) == "none" )


albo html() == "Zwiń"

:)

konto usunięte

Temat: jquery - nieaktualna zawartość DOM?

Wielkie dzięki Michał za cenne sugestie. Podeszłem trochę dalej i mam kolejny problem.

Ładuje sobie kawałek strony na ajaksie i jak się on załaduje, jest wywoływana poniższa funkcja:


function commentsEditBox(url) {
$(document).ready(function () {
$("#comments_edit_box_button").click(function(event) {
if (commentsEditBoxLoaded == null) {
$("#comments_edit_box_button").text("Ładowanie, proszę czekać...")
$.ajax({
url: url,
type: 'GET',
async: true,
dataType: 'script',
success: function () {
commentsEditBoxLoaded = 1
commentsEditBoxToggle()
}
})
}
else
commentsEditBoxToggle()

event.preventDefault();
})
}
)
}


A w tym kawałku strony jest link o id=comments_edit_box_button. Jednak jak się na niego kliknie, wtedy przeglądarka idzie za linkiem a nie wykonuje to co ma zapisane dla zdarzenia kliknięcia. Sprawdzałem i ta funkcja jest wykonywana podczas sukcesu załadowania tego przez ajax, dlaczego więc nie działają określone w niej reguły?Piotr Misiurek edytował(a) ten post dnia 02.07.09 o godzinie 07:25
Marcin Gościcki

Marcin Gościcki Front-end
webdeveloper

Temat: jquery - nieaktualna zawartość DOM?

Może return false; zadziała?

konto usunięte

Temat: jquery - nieaktualna zawartość DOM?

Dzięki Marcinie za sugestie. Jak rozumiem ma one sugerować, że kod js przewidziany dla kliknięcia wykonuje się, ale nie widać tego bo strona biegnie za linkiem. Otóż nie wykonuj się on, bo sprawdzałem choćby głupim alertem i ustawieniem linku na href="x", a rolę return false doskonale spełnia

event.preventDefault();


Tzn. spełniałoby, gdyby w ogóle kliknięcie w link wywoływało te akcje JSa, które zdefiniowałem.

Ktoś ma sugestie, czemu to nie działa i jak zrobić żeby to działa w sposób zgodny z jquery-way. No bo owszem mogę napisać funkcje z ciałem

if (commentsEditBoxLoaded == null) {
$("#comments_edit_box_button").text("Ładowanie, proszę czekać...")
$.ajax({
url: url,
type: 'GET',
async: true,
dataType: 'script',
success: function () {
commentsEditBoxLoaded = 1
commentsEditBoxToggle()
}
})
}
else
commentsEditBoxToggle()

event.preventDefault();


i ją podać przy onclick linku i to działa. Ale to jest brzydkie

Temat: jquery - nieaktualna zawartość DOM?

Piotr Misiurek:
Wielkie dzięki Michał za cenne sugestie. Podeszłem trochę dalej i mam kolejny problem.

Ładuje sobie kawałek strony na ajaksie i jak się on załaduje, jest wywoływana poniższa funkcja:


function commentsEditBox(url) {
$(document).ready(function () {

A to document ready to po co Ci? Jeśli odpalasz tą funkcję jako callback wywołania ajaksowego, to tym kodem dodajesz callback do zdarzenia ready dokumentu, które już nigdy się nie odpali, więc i dopisanie do linku również się nie odpali.Rafał Nowak edytował(a) ten post dnia 02.07.09 o godzinie 13:39

konto usunięte

Temat: jquery - nieaktualna zawartość DOM?

Dzięki Rafał za sugestie. Też myślałem tak jak ty, ale to $(document).ready jest wywoływane, bo jak tam wrzuce alerta, to mi go wyświetli. Zresztą, jak zostosuje się do Twojej rady i od razu wrzuce definicje tego, co ma się dziać po kliknięciu w ten link, bez tego $(document).ready, to nadal nie działa.

Już zacząłem podejrzewać się o jakąś literówkę, ale ten sam kod będący od razu w ciele strony, bez ajaksa, śmiga jak trzeba. Ktoś jeszcze ma jakieś sugestie jak to rozwiązać?Piotr Misiurek edytował(a) ten post dnia 02.07.09 o godzinie 17:23
Janusz Skudrzyk

Janusz Skudrzyk Członek zarządu,
weblabs.pl

Temat: jquery - nieaktualna zawartość DOM?

Hmmm ... możesz zdefiniować funkcję, która będzie wykonywana po kliknięciu

function klik_w_button() {
// blablabla
}

w .click() wstawiasz odwołanie do niej i po odbiorze danych z ajaxa i wstawieniu na stronę:

$('#comments_edit_box_button').bind('click', klik_w_button);

konto usunięte

Temat: jquery - nieaktualna zawartość DOM?

Dzięki wszystki za podpowiedzi i sugestie. W końcu, w dużej mierzy dzięki nim, udało mi się dojść do sedna sprawy i w pełni rozwiązać mój problem. Ponieważ zajeło mi to trochę czasu i temat ten nie jest zbyt szeroko opisany, aby ułatwić sprawę ludziom, którzy w przyszłości będą mieć problmy, założyłem blog na który wrzuciłem krótką notką z rozwiązaniem: http://kubionrails.blogspot.com/2009/07/ajax-i-zdarzen...

Następna dyskusja:

jQuery czy Prototype




Wyślij zaproszenie do