Wczoraj kodowałem komentarze w PHP, HTML i AJAX. Część AJAX daje mi możliwość usunięcia komentarza bez odświeżenia strony. Sposób, w jaki to robię, jest to, że daję każdy komentarz (div) unikalny identyfikator za pomocą bazy danych. Więc daj nam przykład, że w mojej bazie danych MySQL jest to jak wygląda komentarz:
Username: blabla<br>
Comment: haha this is so funny<br>
id: 52
Zostanie to wydrukowane na stronie HTML lubi to na przykład:
<div class="commentStyle" id="<?php echo $commentid; ?>">
This comment will now have the id of 52
<div class="deleteComment">Delete the comment here!</div>
</div>
I WTEDY!
Przychodzi część ajax, która jest zakodowana w ten sposób:
$(document).ready(function(){
$(".deleteComment").click(function(){
//Getting the id of comment
id = $(".deleteComment").attr("id");
$.ajax{
Type: 'GET',
url: 'deletecomment.php',
data: "id=" + id,
success: function(){
$("#" + id).hide();
}
}
});
});
Działa dobrze, przy usuwaniu pierwszego komentarza. Ale to nie pozwoli mi usunąć innych komentarzy, chyba że odświeżę stronę>. <. Pierwszy komentarz może być doskonale usuwany bez odświeżenia strony, ale kiedy chcę usunąć inne komentarze, muszę odświeżyć stronę wiele razy.
Jak to rozwiązać?
3 odpowiedzi
Kod w zdarzeniu gotowości dokumentu działa prawidłowo tylko do pierwszego kliknięcia. Aby uzyskać tę pracę, musisz mieć zdarzenie na kliknięciu zarejestrowanej w tagu. Przykład:
<div class="deleteComment" onclick="DeleteMe(id)">Delete the comment here!</div>
</div>
function DeleteMe(id)
{
$.ajax{
Type: 'GET',
url: 'deletecomment.php',
data: "id=" + id,
success: function(){
$("#" + id).hide();
}
}
});
}
Jeśli kliknięcie Div nie działa, zamiast tego możesz użyć znacznika kotwiczenia (usunąć tutaj).
Wygląda na to, że musisz najpierw uzyskać identyfikator z elementu macierzystego, a następnie skierować dziecko, element kliknął, aby ukryć komentarz z niego po żądaniu AJAX zwróci sukces:
$(".deleteComment").click(function(){
var id = $(this).parent().attr("id");
var child = $(this);
$.ajax({
type: 'GET',
url: 'deletecomment.php',
data: "id=" + id,
success: function(){
child.hide();
// or if you want to delete the entire element with the id of X
// child.parent().hide();
}
});
});
Istnieje kilka zmian, które należy wykonać w swoim kodzie.
Przede wszystkim Dodaj znacznik ID do wewnętrznego div.
<div class="commentStyle" id="<?php echo $commentid; ?>">
This comment will now have the id of 52
<div class="deleteComment" id="<?php echo $commentid; ?>">Delete the comment here! </div>
</div>
Po drugie użyj to
id = $(this).attr("id");
Zamiast...
id = $(".deleteComment").attr("id");
Po trzecie zmień taką jak połączenie Ajax:
$.ajax({
Type: 'GET',
url: 'deletecomment.php',
data: "id=" + id
}).done(function(){
$("#" + id).hide();
});
Mam nadzieję, że to dla ciebie działa, jeśli nie tylko odpowiedz.