Signaler

Ajax - faire apparaître les éléments au fur et à mesure [Résolu]

Posez votre question Cybermate 209Messages postés samedi 25 juillet 2015Date d'inscription 19 juillet 2017 Dernière intervention - Dernière réponse le 16 févr. 2017 à 22:50 par Cybermate
Bonjour,

je suis en train de coder un système de sticky-notes/pense-bête.
Une page en PHP génère des div correspondant chacune à une note.
Via ce code je récupère le contenu et je l'affichage sur ma page :

function displaySticky() {
$.ajax({
url: "../../ajax/display-sticky-notes.php",
success: function(html) {
$("#sticky-notes").html(html);
}
});
}

$(function() {
displaySticky();//on charge dès l'arrivée sur la page
setInterval(function() {
displaySticky()
}, 10000);// toutes les 10 secondes on actualise
});


Je n'ai aucun souci jusque là mais voyez-vous j'ai une autre fonction qui permet de supprimer ces notes, qui fonctionne sans aucun souci si ce n'est qu'il n'y a pas d'animation douce.
Voyez par-vous même :


$(document.body).on("click", "a.delete", function() {
var id = $(this).attr("id");
$.ajax({
type: "POST",
url: "../../ajax/delete-sticky-notes.php",
data : "note=" + id,
success: function(data) {
if(data == "OK") {
displaySticky();//On force le réaffichage pour voir la suppression en direct
}
else {
alert("Erreur lors de la suppression de la note.");
}
}
});
});


J'aimerais qu'à la suppression (et si possible au chargement), que chacune des div retournées apparaissent avec un effet de fondu au fur et à mesure.
Je suis allé voir du côté de FadeIn mais à vrai dire je ne sais pas trop l'appliquer à chacun des éléments, je sais le faire que sur le bloc qui contient les div. Je rappelle que je ne suis pas super doué en JavaScript.

Avez-vous une piste ?

Merci d'avance
Afficher la suite 
Utile
+1
plus moins
Bonjour,

Ton souci .. c'est que tu génères tes notes directement dans ton ajax côté PHP .....
Hors... il est préférable que ton PHP ne retourne qu'un Array ... que tu parcours ensuite côté Javascript pour créer tes notes et y appliquer, alors, l'animation de ton choix...

Ta seconde erreur... c'est de vouloir forcer le réaffichage après une suppression .... alors qu'il est plus simple de simplement retirer l'élément de ta page (avec une animation en plus si tu le souhaites...)
Pour ça.. il te faut juste faire un REMOVE
$(document.body).on("click", "a.delete", function() {
    var id = $(this).attr("id");
    $.ajax({
        type: "POST",
        url: "../../ajax/delete-sticky-notes.php",
        data : {note:id},
        success: function(data) {
            if(data == "OK") {
                $("#"+id).fadeOut(500, function() { $(this).remove(); });// suppression en direct
            } else {
                alert("Erreur lors de la suppression de la note.");
            }
        }
        });
});



Cette réponse vous a-t-elle aidé ?  
Cybermate 209Messages postés samedi 25 juillet 2015Date d'inscription 19 juillet 2017 Dernière intervention - 29 janv. 2017 à 18:06
Merci de ton aide, je comprends un peu mieux du coup.
Je vais voir ça et te dire ce que ça donne.
Répondre
Donnez votre avis
Utile
+0
plus moins
Rebonjour,

je me suis documenté sur le json et voici ce que j'ai produit côté JS pour afficher :
function displaySticky() {
$.ajax({
type: 'GET',
url: "../../ajax/display-sticky-notes-new.php",
data: { get_param: 'value' },
dataType: 'json',
success: function (data) {
$.each(data, function(index) {
setTimeout(function(){
var note = $('<div class="fan">' + data[index].id + ', ' + data[index].couleur +'</div>');
$('#sticky-notes').append(note);
note.hide();
note.fadeIn();
}, 1500*(index +1));
})
},
error: function (xhr, ajaxOptions, thrownError){
if(xhr.status==404) {
$('#sticky-notes').append(
'<div class="jumbotron">'+"<h1>Erreur interne</h1><p>Suite à une erreur interne, nous ne pouvons afficher vos pense-bêtes.</p></div>"
);
}
}
});
}


Je m'occupe maintenant de la suppression !
jordane45 18157Messages postés mercredi 22 octobre 2003Date d'inscription ModérateurStatut 23 août 2017 Dernière intervention - 13 févr. 2017 à 08:16
C'est mieux :-)
Par contre il ca falloir que tu mettes un attribut ID à tes div de notes pour pouvoir les supprimer... si tu souhaites pouvoir le faire en cliquant dessus par exemple.
var note = $('<div class="fan div_note" id="'+data[index].id+'">' + data[index].id + ', ' + data[index].couleur +'</div>');
                    $('#sticky-notes').append(note);
                    note.hide();
                    note.fadeIn();
                }, 1500*(index +1));
Répondre
Cybermate 209Messages postés samedi 25 juillet 2015Date d'inscription 19 juillet 2017 Dernière intervention - 13 févr. 2017 à 20:45
En effet :


$(document.body).on("click", "a.delete", function(e) {
e.preventDefault();
var id = $(this).attr("id");
$.ajax({
type: "POST",
url: "../../ajax/delete-sticky-notes.php",
data : "note=" + id,
success: function(data) {
if(data == "OK") {
$("li#"+id).fadeOut(500, function() { $(this).remove(); });
}
else {
alert("Cette note n'existe plus.");
}
},
error: function (xhr, ajaxOptions, thrownError) {
if(xhr.status == 404) {
alert("Une erreur interne s'est produite.");
}
},
complete:
function (refresh) {
updateSticky()
}
});
});




function displaySticky() {
$.ajax({
type: "GET",
url: "../../ajax/display-sticky-notes.php",
dataType: "json",
success: function (data) {
if (data.length != 0) {
$("#sticky-notes").append('<ul class="notes"></ul>');
$.each(data, function (index) {
setTimeout(function () {
var note = $(
'<li id="' + data[index].id + '">'+'<div class="rotate-'+data[index].rotation+' '+data[index].couleur+'-bg noteScroll"><small>'+data[index].date+'</small><h4>'+data[index].titre+'</h4><p>'+data[index].contenu+'</p>'+'<a href="#" rel="nofollow noopener noreferrer" target="_blank" class="delete text-danger pull-right" id="'+data[index].id+'"><i class="fa fa-trash-o"></i></a></div></li>'
);
$(".notes").append(note);
note.hide();
note.fadeIn();
}, 500 * (index + 1));
})
}
else
{
$("#sticky-notes").append(
'<div class="jumbotron">'+"<h1>Aucun pense-bête</h1><p>Vous n'avez encore créé aucun pense-bête.</p></div>"
);
}
},
error: function (xhr, ajaxOptions, thrownError) {
if(xhr.status == 404) {
$("#sticky-notes").append(
'<div class="jumbotron">'+"<h1>Erreur interne</h1><p>Suite à une erreur interne, nous ne pouvons afficher vos pense-bêtes.</p></div>"
);
}
}
});
}


J'ai dû utiliser preventdefault car sinon le lien pour supprimer m'emmenait en haut de page.
et le complete c'est pour gérer le cas où la personne a supprimé toutes ses notes d'un coup.

Ca m'ouvre plein de possibilités maintenant que je maîtrise légèrement.
J'essaie de voir comme je peux optimiser ça et sécuriser.

Par-contre, j'ai dû feinté car pour faire simple mes notes sont des <li>, donc il y a un ul parent qui englobe toutes les notes.
Je créais initialement le <ul> de départ, puis je faisais ma boucle pour créer les <li> puis je fermais l'ul </ul>.
Or j'obtenais ça :

<ul></ul>
<li>note...</li>
<li>note...</li>
<li>note...</li>
<li>note...</li>

Sans doute à cause du fait que le each s'exécute avec un délai. donc le l'ul se ferme et les li se créent en dehors?
Répondre
Donnez votre avis
Utile
+0
plus moins
Humm
$(document.body).on("click", "a.delete", function(e) {
    e.preventDefault();
    var id = $(this).attr("id");
    $.ajax({
        type: "POST",
        url: "../../ajax/delete-sticky-notes.php",
        data : "note=" + id,
        success: function(data) {
            if(data == "OK") {
                $("li#"+id).fadeOut(500, function() { $(this).remove(); });
            }
            else {
                alert("Cette note n'existe plus.");
            }
        },
        error: function (xhr, ajaxOptions, thrownError) {
            if(xhr.status == 404) {
                alert("Une erreur interne s'est produite.");
            }
        },
        complete:
            function (refresh) {
                updateSticky()
            }
        });
});

Le complete est en trop .... vu que tu fais déjà le remove ... pas besoi de réactualiser la liste ....
c'est pour ça que tu te retrouvais en haut ...
Retire le !


Pour ce qui est des LI mal placé .. c'est bizarre...
Essaye ça:
 success: function (data) {
          var stickyNote = $("#sticky-notes");
          if (data.length != 0) {
            stickyNote.append('<ul class="notes" id="liste_notes"></ul>');
            $.each(data, function (index,elm) {
              setTimeout(function () {
                    var note = '<li id="' + elm.id + '">'
                               +'<div class="rotate-'+elm.rotation+' '+elm.couleur+'-bg noteScroll">'
                                +'<small>'+elm.date+'</small><h4>'+elm.titre+'</h4><p>'+elm.contenu+'</p>'
                                +'<a href="#" rel="nofollow noopener noreferrer" target="_blank" ' +' ' +' ' +'class="delete text-danger pull-right" ' +'id="'+elm.id+'">'
                                 +'<i class="fa fa-trash-o"></i>'
                                +'</a>'
                               +'</div>'
                              +'</li>';
                              
                     $("#liste_notes").append(note);
                     note.hide();
                     note.fadeIn();
                  }, 500 * (index + 1));
              })
          } else {
              stickyNote.append( "<div class='jumbotron'><h1>Aucun pense-bête</h1><p>Vous n'avez encore créé aucun pense-bête.</p></div>");
          }
    }
Cybermate 209Messages postés samedi 25 juillet 2015Date d'inscription 19 juillet 2017 Dernière intervention - 16 févr. 2017 à 11:41
Au départ il n'y avait pas de complete, mais prenons ce cas.
J'ai 3 notes, je les supprime toutes. J'ai donc 0 note. Mon ul est donc vide puisque toutes les notes se sont vues appliquer le remove.

Or, j'affiche d'ordinaire un message "vous n'avez pas de note" quand la personne n'a pas de note.
Je force l'update (sans animation fadein sinon c'est sale) après le remove au cas où la personne n'aurait plus de notes, pour afficher ce message.
Autrement dit le remove permet l'animation et l'update est là pour afficher le message. Ce n'est sans doute pas optimisé.
Je pourrais delete l'ul (comme il est désormais vide), et append mon message.


Le e.preventDefault(); ne me fait plus aller en haut.

Pour ce qui est des <li> j'ai fait autrement. Je créé d'abord l'ul avec une classe.
Puis j'append les <li> dans l'ul qui porte la classe en question. C'est exactement ce que tu me proposes en fait.

Merci de ton aide,
Répondre
jordane45 18157Messages postés mercredi 22 octobre 2003Date d'inscription ModérateurStatut 23 août 2017 Dernière intervention - 16 févr. 2017 à 12:29

Je force l'update (sans animation fadein sinon c'est sale) après le remove au cas où

Il suffirait de compter le nombre de notes "encore affichées" ... et si ce nombre est de zero...là tu fais une actualisation... Sinon...ben tu ne fais rien vu que pas utile.

En gros ...
if($("ul#liste_notes").length>0){
 updateSticky();
}

Répondre
Cybermate 209Messages postés samedi 25 juillet 2015Date d'inscription 19 juillet 2017 Dernière intervention - 16 févr. 2017 à 13:10
Ah pas bête en effet. Je testerai ça.
Répondre
Cybermate 209Messages postés samedi 25 juillet 2015Date d'inscription 19 juillet 2017 Dernière intervention - 16 févr. 2017 à 22:50

if($("ul#liste_notes").length == 1){
updateSticky();
}


ce code fonctionne bien. En fait il faut mettre 1 car je supprime la dernière en fait, donc au moment de la vérification le remove n'est pas encore effectué. Il en reste une.
Répondre
Donnez votre avis

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !