Suppression d'un noeud avec JQuery

**Markos22** · 19/10/2016, 14h01

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 :

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

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 :

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

<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

**SpaceFrog** · 19/10/2016, 14h08

regarde dasn el code source généré comme le php est interprété

Code :

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

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 ?

**mathieu** · 19/10/2016, 14h11

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 :

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

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

**Markos22** · 19/10/2016, 14h20

@SpaceFrog,

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

Code :

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

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...

**SpaceFrog** · 19/10/2016, 14h33

tu as bien un élément avec id '#confirmer' ?
et un seul ?

**Markos22** · 19/10/2016, 14h37

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

Code :

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

<input type="submit" class="btn btn-primary" id="confirmer" name="confirmer" value="confirmer">

**SpaceFrog** · 19/10/2016, 15h15

ben oui ... mais ...

c'est un bouton submit !!!
donc tu soumets le form et tu recharges la page !!

**Markos22** · 19/10/2016, 15h24

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 ?

**Toufik83** · 19/10/2016, 15h33

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

Code :

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

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

**Markos22** · 19/10/2016, 15h48

Je viens d'essayer : aucun changement. Le résultat est toujours le même.

**Markos22** · 19/10/2016, 15h53

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...

**Markos22** · 19/10/2016, 16h11

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.

**Toufik83** · 19/10/2016, 16h16

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).

**SpaceFrog** · 19/10/2016, 16h18

Code :

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

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

**SpaceFrog** · 19/10/2016, 16h22

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

**Markos22** · 19/10/2016, 16h37

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 :

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
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>

**Markos22** · 19/10/2016, 16h40

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...

**SpaceFrog** · 19/10/2016, 17h13

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

Sans submit tu n’atteins pas le serveur...

**mathieu** · 19/10/2016, 19h01

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

**Markos22** · 20/10/2016, 10h36

$('#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 :

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

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 ?...

Suppression d'un noeud avec JQuery

jQuery

Discussions similaires

Partager

Partager