Suppression d'un noeud avec JQuery

Version imprimable

19/10/2016, 14h01
Markos22

Suppression d'un noeud avec JQuery
Bonjour,

Sur une page de mise à jour d'une base de données concernant des biens immobiliers, j'ai une liste des biens existant dans la base. J'ai créé une fenêtre modale bootstrap qui s'ouvre lorsque l'on clique sur un bouton "supprimer le bien sélectionné". Un bouton "confirmer" sur cette fenêtre modale permet de confirmer la suppression du bien dans la base de données.

Problème : comme j'ai ouvert une fenêtre modale, la page ne se rafraîchit pas, et le bien supprimé figure toujours sur la liste (alors qu'il est bien supprimé de la base de données).

J'ai donc pensé à supprimer le nœud correspondant, avec du code jquery ! Mais l'affichage de la base est une boucle foreach. Qu'à cela ne tienne, j'ai donc récupéré l'id du nœud en question grâce à l'id du bien dans la base de données, et je le passe en variable à mon script jquery.

L'idée semble bonne, puisque si l'on regarde le code html généré, l'id du nœud à supprimer est bien récupéré...

...Sauf que ça marche pas : la ligne du bien à supprimer est toujours affichée. Voici mon code jquery :
Code:

1 2 3 4 $('#confirmer').click(function(){ var monBien = '<?php echo '#bien-item-'.$_GET['bien']?>'; $(monBien).remove(); });
où GET['bien'] correspond à l'id du bien sélectionné, qui figure dans l'id du nœud à supprimer, qui est un lien vers la même page avec une variable passée dans l'url, ce qui permet de sélectionner le bien en question :

Code:

<a class="list-group-item list-group-item-action" href="form_modif.php?bien=1" id="bien-item-1">

Pourquoi la ligne (la balise <a> cliblée) n'est-elle pas supprimée, alors que le reste du code fonctionne bien (le bien est bien supprimé de la base de données) ?

Merci de vos réponses
19/10/2016, 14h08
SpaceFrog
regarde dasn el code source généré comme le php est interprété
Code:

1 2 3 4 $('#confirmer').click(function(){ var monBien = '<?php echo '#bien-item-'.$_GET['bien']?>'; $(monBien).remove(); });
ça donne quoi dans le code source ?

Elle est bien dans un ready() cette instruction ?
19/10/2016, 14h11
mathieu
Citation:

Envoyé par Markos22

Voici mon code jquery :

affichez avec "console.log" le contenu de la variable pour vérifier que la valeur est celle que vous souhaitez

d'ailleurs affichez aussi le résultat du sélecteur
Code:

1 2 console.log(monBien); console.log($(monBien));

@SpaceFrog,

Le code source généré, je l'ai vérifié :
Code:

1 2 3 4 5 6 7 8 $(document).ready(function(){ $(['data-toggle=modal']).modal(); $('#confirmer').click(function(){ var monBien = '#bien-item-15'; $(monBien).remove(); console.log(monBien); }); });
Donc, la valeur de la variable monBien est bonne. Comme tu le vois, @mathieu, j'ai bien inclus un console.log, mais rien ne s'affiche. A moins qu'il y ait quelque chose qui m'échappe dans la console de Firefox...

19/10/2016, 14h33
SpaceFrog

tu as bien un élément avec id '#confirmer' ?
et un seul ?
19/10/2016, 14h37
Markos22

Oui, il s'agit du bouton submit qui déclenche la suppression en base :

Code:

<input type="submit" class="btn btn-primary" id="confirmer" name="confirmer" value="confirmer">
19/10/2016, 15h15
SpaceFrog

ben oui ... mais ...

c'est un bouton submit !!!
donc tu soumets le form et tu recharges la page !!
19/10/2016, 15h24
Markos22

C'est donc d'autant plus incompréhensible : comment se fait-il que, si la page est rechargée, la ligne concernant le bien supprimé soit toujours présente ?

un return false; comme dernière ligne dans la fonction click résoudra le problème:
Code:

1 2 3 4 5 6 7 $('#confirmer').click(function(){ var monBien = '#bien-item-15'; $(monBien).remove(); console.log(monBien); return false; });

19/10/2016, 15h48
Markos22

Je viens d'essayer : aucun changement. Le résultat est toujours le même.
19/10/2016, 15h53
Markos22

J'ai une piste pour contourner le problème : j'ai remarqué que, si je clique sur un autre lien de la liste (qui renvoie sur la même page avec une variable $_GET[]), la liste se met à jour...
19/10/2016, 16h11
Markos22

Plus étonnant : si pour le bouton submit "confirmer" (qui est donc placé dans un mini-formulaire), je remplace action="#" par action="form_modif.php", le bien n'est pas supprimé de la base de données.
19/10/2016, 16h16
Toufik83

il doit y avoir quelque chose qui cloche dans ton code alors, pour qu'on puisse t'aider, il faut nous montrer TOUT LE CODE html et jquery (ne rien oublier).

Code:

1
2
3
4
5
6
7
 
$('#confirmer').click(function(e){
        e.preventDefautl();	
        var monBien = '#bien-item-15';
	$(monBien).remove();
	console.log(monBien);
    	});

19/10/2016, 16h22
SpaceFrog

A mon avis il faut supprimer coté serveur au moyen d'un ajax, et sur le success faire le remove ...

Citation:

Envoyé par Toufik83

il doit y avoir quelque chose qui cloche dans ton code alors, pour qu'on puisse t'aider, il faut nous montrer TOUT LE CODE html et jquery (ne rien oublier).

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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Modification de données</title>
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <link rel="stylesheet" href="../css/font-awesome.min.css">
 
</head>
<body>
<div class="container">
<a id="retour" href="index.php" title="Retour au sommaire"><span class="fa fa-home fa-3x"></span></a><h1>Modification de données</h1>
        <div class="list-group" id="liste-biens">
            <a class="list-group-item list-group-item-action" href="form_modif.php?bien=18" id="bien-item-18"><strong>bla bla bla...</a>
            <a class="list-group-item list-group-item-action" href="form_modif.php?bien=1" id="bien-item-1"><strong>...</a>
            <a class="list-group-item list-group-item-action" href="form_modif.php?bien=9" id="bien-item-9"><strong>...</a>
            <a class="list-group-item list-group-item-action" href="form_modif.php?bien=2" id="bien-item-2"><strong>...</a>
            <a class="list-group-item list-group-item-action" href="form_modif.php?bien=3" id="bien-item-3"><strong>...</a>
            <a class="list-group-item list-group-item-action" href="form_modif.php?bien=6" id="bien-item-6"><strong>etc.</a>
            <a class="list-group-item list-group-item-action" href="form_modif.php?bien=4" id="bien-item-4"><strong>etc.</a>
            <a class="list-group-item list-group-item-action" href="form_modif.php?bien=8" id="bien-item-8"><strong>etc.</a>
            <a class="list-group-item list-group-item-action" href="form_modif.php?bien=7" id="bien-item-7"><strong>et blablabla...</a>
            <a class="list-group-item list-group-item-action" href="form_modif.php?bien=5" id="bien-item-5"><strong>et blablabla...</a>
        </div>
            <div class="well">
                    <form action="" method="post">
                <div class="form-group row">
                    <label for="type" class="col-form-label">Type de bien : </label>
                    <select name="type" id="type">
                        <option selected="selected"value="bureaux" class="form-control">Bureaux</option>
                        <option value="entrepôt" class="form-control">Entrepôt</option>
                    </select>
                </div>
                <div id="cp-ville" style="height: 59px; margin: 15px 0;">
                    <div class="form-group row" style="float: left;">
                        <label for="code_postal" class="col-form-label">Code Postal : </label>
                        <input type="text" class="form-control" name="code_postal" id="code_postal" value="blabla">
                    </div>
                    <div class="form-group row" style="margin-left: 170px; height: 59px;">
                        <label for="ville" class="col-form-label">Ville : </label>
                        <input type="text" required class="form-control" name="ville" id="ville" value="ICI OU LA">
                    </div>
                </div>
                <div class="form-group row">
                    <label for="voie" class="col-form-label">Emplacement (voie) : </label>
                    <input type="text" required class="form-control" name="voie" id="voie" value="rue Untel">
                </div>
                <div class="form-group row">
                    <label for="superficie" class="col-form-label">Superficie en m² : </label>
                    <input type="number" required class="form-control" name="superficie" id="superficie" value="XXX">
                </div>
                <div class="form-group row">
                    <label for="montant" class="col-form-label">Loyer mensuel en euros (pour la superficie totale) : </label>
                    <input type="number" required class="form-control" name="montant" id="montant" value="XXX">
                </div>
                <div class="form-group row">
                    <label for="description" class="col-form-label">Description (annonce) : </label>
                    <textarea name="description" id="dscription" cols="30" rows="10" class="form-control">blablabla...</textarea>
                </div>
                <input class="btn btn-default" type="submit" value="Valider la modification">
            </form>
            <button class="btn btn-danger" data-toggle="modal" data-target="#confirmation">Supprimer le lot de la base</button>
            <div id="confirmation" class="modal fade">
                <div class="modal-content">
                    <div class="modal-header">
                        <button class="close" data-dismiss="modal" aria-label="close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title">Confirmation</h4>
                    </div>
                    <div class="modal-body">
                        <div>
                            Êtes-vous sûr de vouloir supprimer le lot suivant de la base de données : rue Untel, ICI OU LA ?                        </div>
                    </div>
                    <div class="modal-footer">
                        <form action="#" method="post">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>
                        <!-- <button type="button" class="btn btn-primary">Confirmer</button> -->
                            <input type="submit" class="btn btn-primary" id="confirmer" name="confirmer" value="confirmer">
                        <form>
                      </div>
                </div>
            </div>
        </div>
        <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        <script>
            $(document).ready(function(){
                $(['data-toggle=modal']).modal();
                $('#confirmer').click(function(){
                    var monBien = '#bien-item-18';
                    $(monBien).remove();
                    console.log(monBien);
                });
            });
        </script>

19/10/2016, 16h40
Markos22

Citation:

Envoyé par SpaceFrog

A mon avis il faut supprimer coté serveur au moyen d'un ajax, et sur le success faire le remove ...

Tout à fait d'accord. Je pense que tu as raison, mais je ne connais pas bien ajax, et j'avais voulu essayer autre chose. Mais je comprends bien que c'est incontournable, et que je vais devoir m'y mettre. Cela dit, je ne comprends toujours pas rationnellement pourquoi ça ne marche pas...
19/10/2016, 17h13
SpaceFrog

Le submit recharge la page ...
js ne survit pas à un rechargement.

Sans submit tu n’atteins pas le serveur...
19/10/2016, 19h01
mathieu

avant "$('#confirmer').click..." affichez le résultat de "$('#confirmer')" pour vérifier qu'il soit bien trouvé

$('#confirmer') est bien identifié... Mais il me semblerait que monBien ne le soit pas. Même avant la soumission du formulaire (pendant l'affichage de la modale). Je ne comprends pas bien pourquoi. Ce qui serait idéal, ce serait de récupérer en jquery le sélecteur qui corresponde à la ligne sélectionnée. Elle correspond en php à '<?php echo '#bien-item-'.$_GET['bien']?>'
(...)

Ah ! en plaçant la déclaration de variable en tête, comme ceci :
Code:

1 2 3 4 5 6 7 8 9 10 <script> var monBien = '<?php echo '#bien-item-'.$_GET['bien']?>'; $(document).ready(function(){ $(['data-toggle=modal']).modal(); $('#confirmer').click(function(){ $(monBien).remove(); return false; }); }); </script>
la variable monBien est maintenant reconnue. Mais le script n'est toujours pas exécuté, certainement pour la raison évoquée par SpaceFrog : le rechargement de la page. Mais alors, comment faire ?...

20/10/2016, 10h45
Markos22

Ce que je ne comprends pas, c'est que, s'il y a rechargement de la page, la liste des biens, qui provient de la lecture de la base de données, devrait être mise à jour. Dois-je poster cette question sur le forum PHP ?
20/10/2016, 12h25
mathieu

pourquoi "s'il y a rechargement" ? soit il y a, soit il n'y a pas
regardez dans la console de développement et dit nous ce qu'il se passe parce que nous ne pouvons pas vous aider si vous n'expliquez pas tout
20/10/2016, 18h25
Toufik83

bonsoir,
j'ai travaillé un peu sur ton exemple en créant une base de donnée MySql puis j'ai récupérer toutes les données depuis le serveur en utilisant 2 fichiers php, update.php et delete.php.
il n'y a aucun souci.

puis il faut faire très attention aux caractères spéciaux,

Code:

<option value="entrpôt"></option>

dans ton option, provoque des erreurs a moins que t'utilise urldecode() en php et encodeURIComponent en javascript.
20/10/2016, 19h12
Markos22

Citation:

Envoyé par mathieu

pourquoi "s'il y a rechargement" ? soit il y a, soit il n'y a pas
regardez dans la console de développement et dit nous ce qu'il se passe parce que nous ne pouvons pas vous aider si vous n'expliquez pas tout

Je ne peux pas en dire davantage. Relis le début de ce fil. J'ai donné tout mon code. Apparemment, il n'y a pas rechargement, puisque la lecture de la base de données n'est pas à jour.
20/10/2016, 20h26
Markos22
J'ai trouvé une astuce, pour résoudre le problème, ou plutôt le contourner : au début de la page, j'impose un rechargement si le bouton "confirmer" a été cliqué :
après les vérifications de $_SESSION concernant les token CSRF, j'ai placé le code suivant :
Code:

1 2 3 if(isset($_POST['confirmer'])){ header('Location:form_modif.php'); }
La page, cette fois, est rechargée, et la ligne de l'enregistrement effacé n'apparaît plus.
Merci de votre aide, et à bientôt !
20/10/2016, 21h43
Markos22

Sauf que, du coup, si je fais une simple mise à jour (j'utilise la même page), la mise à jour n'est plus prise en compte. Alors que faire ? Si je fais if (!empty($_POST)){header('Location: form_modif.php')} je pense que je perds les données passées dans le $_POST. Non ?
...
Allons ! Maintenant plus rien ne fonctionne ! J'ai un message m'annonçant que je ne peux pas détruire un enregistrement ayant une clé étrangère. Quelle clé étrangère ? J'utilise des clés étrangères pour les photos, mais ici, je n'ai pas d'attribut photo, et je ne vois pas où je fais appel à la clé étrangère... C'est à n'y rien comprendre !!

Bonjour,

Citation:

Relis le début de ce fil. J'ai donné tout mon code.

si l'on s'en réfère à ton code on trouve des erreurs, de sélecteur et d’absence de suppression d'action par défaut de ton formulaire qui est soumis
Code:

1 2 3 4 5 6 7 8 9 $(document).ready(function(){ $('[data-toggle=modal]').modal(); /* ERREUR dans sélecteur */ $('#confirmer').click(function(e){ e.preventDefault(); /* AJOUT supprime soumission */ var monBien = '#bien-item-18'; $(monBien).remove(); console.log(monBien); }); });
...pour le reste...

27/10/2016, 20h59
Markos22
J'ai testé ton code, il ne marche pas. N'oublie pas que la variable monBien dépend du lien cliqué, donc du contenu de la requête GET. Il est désigné en php :

Code:

<?php echo '#bien-item-'.$_GET['bien']?>

et il renvoie à la même page. Résultat : au moment où tu arrives sur la page, la variable ne renvoie à rien. "Undefined index". J'ai contourné le problème avec un simple :
Code:

1 2 3 $(document).ready(function(){ $('#liste-biens').load('liste_biens.php'); });
Ca vaut ce que ça vaut... Enfin, bon, ça marche. Et je vais marquer cette question comme résolue.

A bientôt
27/10/2016, 21h35
NoSmoking

Citation:

J'ai testé ton code, il ne marche pas. N'oublie pas que la variable monBien dépend du lien cliqué...

je n'ai fait que te signaler des erreurs dans ton code sans préjuger du reste ;)