Append / text ne fonctionne pas

Par Benjamin Derepas, il y a 12 ans


Bonjour,
je bloque sur une fonction de jquery qui m'empêche de dormir ...
J'ai créer une todo-list avec CI et jQuery (ajax) .
Lorsque les données sont insérées en BDD, j'aimerais que le contenu envoyé apparaisse dans ma liste .
J'ai donc tester avec un append et même un text , mais rien n'y fait ... Auriez vous une solution ? Une piste ?

Voilà le code HTML :

<div id="empty_todo" class="item">
    <div class="item-left">
        <span class="todo_delete"><i class="icon-remove-sign icon-4x"></i></span>
    </div>
    <div class="item-right"> <!-- le contenu doit être ici --></div>
    </div>

Et le jQuery :

var info_todo = $("#info-todo");
        info_todo.hide();
        $("#empty_todo").hide();

        $("#addTodo").click(function(){
            description_to = $("#todo_add_task").val();
            if(description_to.length < 10 || description_to.length > 200)
            {
                    info_todo.append("La description doit être comprise entre 10 et 200 caractères !");
                    info_todo.addClass("error")
                    info_todo.slideDown().delay(2000).slideUp('fast');
                    return false;
            }
            else
            {
                $.post('admin/add_todo/',{descr:description_to},
                    function(data)
                    {
                        info_todo.append("Une nouvelle tâche à été ajoutée à votre liste !");
                        info_todo.addClass("success");
                        info_todo.slideDown().delay(1300).slideUp('fast');
                        $("#empty_todo item-right").text(description_to);
                        $("#empty_todo").slideDown('medium');
                    }
                    );
            }
            return false;
        });

Cordialement,

10 réponses

soohikei, il y a 12 ans

Bonjour,

Est ce que vous avez vérifier ce que retourne data ?

puis dans le $.post l'URL est incomplète je pense ==> admin/add_todo/ <== il manque le fichier php ou qui devrais effectuer les traitements non ?

essayez ce qui suis pour voir si ce que data retourne :

$.post('admin/add_todo/fichier.php',{descr:description_to},
            function(data)
            {
                alert(data); //ou console.log(data);
            }
Benjamin Derepas, il y a 12 ans

l'alert data m'affiche ... tout mon code HTML .
Et l'url est bonne, je travail sous CI donc add_todo correspond à la fonction add_todo du controller admin

soohikei, il y a 12 ans

peut-être essayer de mettre ".show()" a la place des slides pour voir si cela fonctionne

var info_todo = $("#info-todo");
info_todo.hide();
$("#empty_todo").hide();

$("#addTodo").click(function(){
    description_to = $("#todo_add_task").val();
    if(description_to.length < 10 || description_to.length > 200)
    {
            info_todo.append("La description doit être comprise entre 10 et 200 caractères !");
            info_todo.addClass("error"); // <==== ici manquait le ";"
            info_todo.show();
            return false;
    }
    else
    {
        $.post('admin/add_todo/',{descr:description_to},
            function(data)
            {
                info_todo.append("Une nouvelle tâche à été ajoutée à votre liste !");
                info_todo.addClass("success");
                info_todo.show();
                $("#empty_todo item-right").text(description_to);
                $("#empty_todo").show();
            }
            );
    }
    return false;
});
Benjamin Derepas, il y a 12 ans

J'ai déjà essayé rien n'y fait .
Ce qui m'etonne c'est que les données insérées en Base de données sont bonnes, mais impossible de les récupérer après leur injection.
J.ai peut être fait un erreur dans mon code côté navigateur, je ne suis pas un expert (loin de la, j'apprend) en JavaScript / jquery

soohikei, il y a 12 ans

Je suis un peu dans la même situation je suis assez novice mais aider les autres m'apprends aussi :D

le problème est que vous récupérez bien le data. Avez vous regarder dans la console du navigateur vous devriez avoir une ligne au moment du click vous devriez avoir une ligne avec "+ post url". cliquez sur le + et vous avez plusieurs onglet :

Paramètres | En-têtes | Réponse | HTML | Cookies

essayer de regarder ce que cela vous renvoie dans ces fenêtres

Est ce que dans la page add_todo il n'y a qu'une requete ?

Benjamin Derepas, il y a 12 ans


Le contenu de la variable descr est bien présent, en revenche je ne comprend pas le content-length = 0 dans le "response header"

soohikei, il y a 12 ans

ah on avance un peu !! :) et dans reponse ? qu'est ce qui s'affiche ?

Benjamin Derepas, il y a 12 ans

Toute ma page HTML =D

soohikei, il y a 12 ans

la requête essayer je suppose qu'elle est geré avec une condition du genre if else, à la fin du if essayez de rajouter un echo "1";

et dans le js mettre une condition dans le $.post

$.post('admin/add_todo/',{descr:description_to},
            function(data)
            {
                if (data == 1){ 
                    info_todo.append("Une nouvelle tâche à été ajoutée à votre liste !");
                    info_todo.addClass("success");
                    info_todo.show();
                    $("#empty_todo item-right").text(description_to);
                    $("#empty_todo").show();
                }else{....}
            }
            );
    }

j'ai essayer de le faire, j'ai fait ma requête dans une page a part et dans cette page il n'y a que ma requête voila le résultat et cela fonctionne

if (isset ($_POST) && !empty ($_POST'guest']) && !empty ($_POST'mail']) && !empty ($_POST'com'])){
    mysql_connect("localhost", "root", "");
    mysql_select_db("test");
    $n = mysql_real_escape_string($_POST'guest']);
    $m = mysql_real_escape_string($_POST'mail']);
    $c = mysql_real_escape_string($_POST'com']);
    $sql = "INSERT INTO livreor VALUES (NULL,'$n','$m','$c')";
    $ret = mysql_query($sql) or die ("Impossible d'envoyer votre requête");

    mysql_close();
    echo'1';
}else{
    echo'Une erreur est survenue. Veuillez réessayer dans quelques instant !';
}

en faisant ainsi normalement cela devrais fonctionner.

par contre avant de faire cela a la place du append essayez le ".load()"

Benjamin Derepas, il y a 12 ans

Non, cela ne fonctionne pas non plus.
J'avoue ne pas comprendre d'où l'erreur peut provenir !