Discussion :

[Lprofessionnelle]

Bonjours, je débute en JS et surtout en Jquery et j'aimerais qu'on m'indique une petite chose pour mon code, car je n'arrive pas a tous faire marcher en même temps:

Voila le code PHP:

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="CheckBoxes texte">
<p class="gras">Liste de course(<?=count($donnees).' produit'.string_extends::pluriel(count($donnees));;?>):</p>
<?php
    foreach ($donnees as $key => $value)
    {
$checked = (!empty($value['checked'])) ? 'checked ' : '';
?>
<p>
    <input type="checkbox" class="css-checkbox" id="liste_<?=$value['id'];?>" name="liste_<?=$value['id'];?>" value="<?=$value['id'];?>" data-liste-nom="<?=$value['nom'];?>" <?=$checked;?>>
    <label for="liste_<?=$value['id'];?>" class="css-label"><?=$value['nom'];?></label>
</p>
<?php
    }
?>
</div>

et le code JS:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
$(document).ready(function(){
 
$(function(){
var loader = "http://data.***.fr/images/loader.gif";
    $( "div.CheckBoxes" ).addClass( "texte" ); // On ajoute la class au div
    $('div.CheckBoxes input[type=checkbox]').click(function(){
        cochee = $(this).is(':checked'); // Si checkbox cochée ou non
        name=$(this).attr("name"); // Attibut name de l'input
        id = $(this).val(); // Contenu de ce qui est dans le value de l'input
        data_nom = $(this).data("liste-nom"); // On récupère le nom dans le data-* de l'input
 
        if (cochee == true) { // Si le checkbox est choché
            $(function(){
                $("label[for='"+name+"']").fadeOut(500).fadeIn(800).html('<img src="'+loader+'" title="Chargement..." alt="Chargement...">&nbsp;Chargement...'); // On affiche un petit message de chargement pendant la requête Ajax qui va suivre
                // On envoie la requête Ajax pour faire la mise à jour au script PHP:
                $.ajax({
                    url: 'post.php',
                    type: 'GET',
                    timeout: 5000, // Après 5 seconde on arrête si c'est trop long
                    dataType: 'json',
                    data: {'id': id, 'checked': cochee},
                    success: function(json) {
                        $("label[for='"+name+"']").html(data_nom+': '+json.reponse); // On met à jour le label avec la réponse
                        // On recharge le label avec un fondu pour enlevé la réponse du serveur après 3 secondes:
                        setTimeout( 
                            function() { 
                                $("label[for='"+name+"']").fadeOut(500).fadeIn(800).html(data_nom);
                            }
                        , 3000);
                    },
                    error: function(XMLHttpRequest,textStatus, errorThrown){
                        $("#reponse_"+id).html('Erreur:<br>'+name+': '+errorThrown);
                    },
                });
                return false;
            });
        }
        else { // Si le checkbox est pas choché
            $(function(){
                $("label[for='"+name+"']").fadeOut(500).fadeIn(800).html('<img src="'+loader+'" title="Chargement..." alt="Chargement...">&nbsp;Chargement...'); // On affiche un petit message de chargement pendant la requête Ajax qui va suivre
                // On envoie la requête Ajax pour faire la mise à jour au script PHP:
                $.ajax({
                    url: 'post.php',
                    type: 'GET',
                    timeout: 5000, // Après 5 seconde on arrête si c'est trop long
                    dataType: 'json',
                    data: {'id': id, 'checked': cochee},
                    success: function(json) {
                        $("label[for='"+name+"']").html(data_nom+': '+json.reponse+'.'); // On met à jour le label avec la réponse
                        // On recharge le label avec un fondu pour enlevé la réponse du serveur après 3 secondes:
                        setTimeout( 
                            function() { 
                                $("label[for='"+name+"']").fadeOut(500).fadeIn(800).html(data_nom);
                            }
                        , 3000);                        
                    },
                    error: function(XMLHttpRequest,textStatus, errorThrown){
                        $("#reponse_"+id).html('Erreur:<br>'+name+': '+errorThrown);
                    },
                });
                return false;
                });
        } 
 
    });
    });
 
});

Donc en gros ce que ça fait: le but faire une sorte de "liste de course ou de chose à faire"

Le code PHP est une boucle qui liste des données de ma BDD dans des input de type checkbox coché ou non et le nom de la chose à faire dans le label. Ensuite on coche se qu'on a prit/fait.

Ensuite le code JS regarde si les input de type checkbox sont coché ou décoché et si on en coche un ou décoche un alors on lance une requête ajax pour enregistrer le changement en BDD et j'affiche dans le label si ça à marché, puis au bout de 3 seconde je remets le label comme avant.

Bref la ça fonctionne.

Ce que j'aimerais réussir à pouvoir faire c'est pouvoir mettre le code PHP données plus haut dans une autre page et l'appeler en ajax après chaque modification une fois que le label est remit à jour. Ca me permettrait de re-trier les données de ma table SQL pour affiché les checkbox pas coché en premier ou l'inverse ce qui ferait gagner de la lisibilité sur ce qui reste à faire par exemple.

Dans mon setTimeout qui me permet de remettre à jour mon label, j'ai essayer de mettre la requête Ajax qui met à jour le div, ça fonctionne, MAIS ensuite quand je recoche quelque chose ça ne fonctionne plus du tout sauf si je recharge la page. Donc en gros ça ne fonctionne qu'une fois.

J'ai ensuite essayer de mettre le contenu rechargé dans un autre div et la aucun problème, mais dans le même aucun moyen:

Comme on peut le voir dans le second cadre c'est le contenu reclassé après avoir coché des choses.

Est ce que c'est une sorte de de problème de fonction qu'on appelle callback ? C'est ce que je trouverais logique. Si quelqu'un sait comment faire, j'arrive pratiquement à me débrouiller, mais je bloque sur ça.

PS: j'apprends le JS sur le tat grace à mes bases de PHP qui m'aide un peut sans trop de tuto, soyez indulgent.

[NoSmoking]

Bonjour,
pas bien vu le pourquoi de la duplication de la fonction suivant le checked/no checked de l'INPUT, pas plus que l’encapsulage dans un $(function(){...});.

...pour affiché les checkbox pas coché en premier ou l'inverse ce qui ferait gagner de la lisibilité sur ce qui reste à faire par exemple.

pas sûr que cela ne soit pas plus déroutant qu'un ajout de lisibilité !

[Lprofessionnelle]

J'ai essayé d'enlever certaine parties comme la condition ou les $(function(){}); et le comportement à l'air différent quand je coche mes input.
Sinon, tu sais comment je peux faire ? pour que ça fonctionne ? car à chaque fois que le div recharge dans le premier div, ça ne fonctionne plus.

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$(document).ready(function(){
 
$(function(){

l'un étant le raccourci de l'autre ... pourquoi utiliser les deux ?

[Lprofessionnelle]

Pour la simple et bonne raison que je ne savais pas^^.

Sinon personne sait comment réglé mon problème ? JE ne sais pas ou est le problème, car tout fonctionne et dès que le div est mit à jour ça marche pu

[NoSmoking]

Il te faut faire une utilisation "classique" de l'Ajax dans ce cas
- requête avec les paramètres qui vont bien
- traitement coté serveur des données reçues
- formatage de la réponse suivant ton besoin, ici c'est plutôt du code HTML
- retour coté client et injection de la réponse.

Une remarque quand même on trouve dans ton code dataType: 'json', mais as tu du json en retour ?

Je maintiens que le tri des checkbox ne me parait pas opportun !