Sujet Précédent Sujet Suivant

Ajax - faire apparaître les éléments au fur et à mesure

Résolu/Fermé
Cybermate Messages postés 222 Date d'inscription samedi 25 juillet 2015 Statut Membre Dernière intervention 27 octobre 2018 - 28 janv. 2017 à 11:27
Cybermate Messages postés 222 Date d'inscription samedi 25 juillet 2015 Statut Membre Dernière intervention 27 octobre 2018 - 16 févr. 2017 à 22:50
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
A voir également:

3 réponses

Réponse 1 / 3
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
29 janv. 2017 à 03:39
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.");
            }
        }
        });
});


1
Cybermate Messages postés 222 Date d'inscription samedi 25 juillet 2015 Statut Membre Dernière intervention 27 octobre 2018 21
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.
0
Réponse 2 / 3
Cybermate Messages postés 222 Date d'inscription samedi 25 juillet 2015 Statut Membre Dernière intervention 27 octobre 2018 21
Modifié par Cybermate le 12/02/2017 à 22:14
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 !
0
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
Modifié par jordane45 le 13/02/2017 à 10:15
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));
0
Cybermate Messages postés 222 Date d'inscription samedi 25 juillet 2015 Statut Membre Dernière intervention 27 octobre 2018 21
Modifié par Cybermate le 13/02/2017 à 20:49
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?
0
Réponse 3 / 3
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
Modifié par jordane45 le 13/02/2017 à 23:16
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>");
          }
    }
0
Cybermate Messages postés 222 Date d'inscription samedi 25 juillet 2015 Statut Membre Dernière intervention 27 octobre 2018 21
Modifié par Cybermate le 16/02/2017 à 12:06
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,
0
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650 > Cybermate Messages postés 222 Date d'inscription samedi 25 juillet 2015 Statut Membre Dernière intervention 27 octobre 2018
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();
}
0
Cybermate Messages postés 222 Date d'inscription samedi 25 juillet 2015 Statut Membre Dernière intervention 27 octobre 2018 21
16 févr. 2017 à 13:10
Ah pas bête en effet. Je testerai ça.
0
Cybermate Messages postés 222 Date d'inscription samedi 25 juillet 2015 Statut Membre Dernière intervention 27 octobre 2018 21
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.
0

Discussions similaires

Bibliothèque
cosjac85 -
renard bleu -

3 réponses
problème à l'ouverture de yahoomail
mouhot -
epicuroad -

17 réponses
suggestion d'amis: comment apparaitre?
earl_grey -
Bene -

7 réponses
Qui sont les personnes dans mon ajout rapide de Snapchat ?
lobino68 -
m_manolo25 -

21 réponses
Facebook comment apparaître en suggestion ami
veli010 -
jackeB -

4 réponses