1 pièce(s) jointe(s)
Recharger un div après modification
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:
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:
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..."> 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..."> 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:
Pièce jointe 148024
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.
