[Ajax][jQuery] Problème de slideToogle()
Bonjour,
Je vais essayer d'être le plus clair possible.
Sur mon site, dans le dashboard,
la supression d'une note se passe en Ajax. J'ai réalisé un effet avec un slideToogle qui efface la note et fait apparaître un texte disant qu'aucune note n'est créée. Or, ce comportement (aucune note créée) ne devraît arriver qu'en cas de suppression de la dernière note seulement. Or, cela arrive à chaque note.
Petits gifs pour montrer ce problème :
Avec seulement 1 note :
Là on voit que tout va bien
Avec 2 notes :
C'est plus problématique. En plus lors de la supression d'une autre note, le message s'enlève !
Voici mon code javascript (jQuery) :
(function($) {
$('.delete').on('click', function(e) {
e.preventDefault();
var $a = $(this);
var url = $a.attr('href');
$a.text('Deleting...');
if (confirm('Do you really want to delete that note? It would be lost, forever.')) {
$.ajax(url)
.done(function(data, text, jqxhr) {
$a.parent('.writing').slideToggle("slow");
var writing = $('.writing');
console.log(writing.length);
if (writing.length = 1) {
$('.no_writing').slideToggle("slow");
console.log(writing.length);
} else {
// Nothing.
}
}).fail(function(jqxhr) {
alert(jqxhr.responseText);
}).always(function() {
$a.text('Delete');
});
} else {
$a.text('Delete');
}
});
})(jQuery);Mon code HTML :
La note :
<div class="writing">
<h3>Title</h3>
<a class="delete" href="delete.php?id=ID" title="Delete that writing">Delete</a>
<p class="preview"><a href="/writing/ID" title="Edit that writing">Texte de la note</a></p>
</div>Pour le message :
<p style="display: none;" class="no_writing">You have no writing. Do you wanna <a href="/write">create one</a>?</p>Voilà, j'espère que quelqu'un saura m'aider.
Pour info, j'ai suivi le tutoriel de Grafikart sur Ajax et j'ai utilisé un max le code de la vidéo
Demandez-moi pour n'importe quelle info supplémentaire
Merci !
9 réponses
Problème résolu, merci à tous !
Voici mon code final si quelqu'un a un jour le même problème que moi
(function($) {
$('.delete').on('click', function(e) {
e.preventDefault();
var $a = $(this);
var url = $a.attr('href');
$a.text('Deleting...');
if (confirm('Do you really want to delete that note? It would be lost, forever.')) {
$.ajax(url)
.done(function(data, text, jqxhr) {
$a.parent('.writing').hide();
$a.parent('.writing').addClass('notDisp');
$a.parent('.writing').removeClass('writing');
}).fail(function(jqxhr) {
alert(jqxhr.responseText);
}).always(function() {
$a.text('Delete');
});
} else {
$a.text('Delete');
}
var writing = $('.writing');
if (writing.length == 1) {
$('.no_writing').show();
} else {
// Nothing.
}
});
})(jQuery);
Après cette modif, le message n'apparaît plus : (
Je pense qu'il s'agit d'un problème de l'asynchronisme (ça ne se dit pas :|) car la cela ne marche pas à la suppression de 2 notes sans rechargement : pour Javascript il ya toujours 2 articles même après la suppression des 2 articles.
Je pense qu'il s'agit d'un problème avec slideToogle car il ne détruit pas l'élément mais le cache. Je vais tester la vérification du display: none pour cela
As tu essayer de vérifier s'il s'agissait du dernier élément ? Un peu à méthode des infinite scroll.
SI c'est le dernier enfant FAIRE ça, SINON faire ça
Je ne pense pas que cela marcherait car comme je l'ai dit, l'élément est simpement caché mais toujours existant jusqu'au rechargement de la page
Bonsoir.
Si ton problème est résolu, marques le comme tel, en cliquant sur l'image s'y reportant sur ta dernière réponse.
Merci.