Ouvrir une fenêtre modale sur clic d'un lien avec jquery

**kinkon** · 05/09/2016, 19h52

Bonjour la communauté,
j'ai une page sur laquelle j'affiche le résultat d'une requête avec plusieurs liens et sur chaque lien je mets un id dans l'attribut href dont voici un exemple:

Code :

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

1
2
3
4
	<tbody><?php 
        while($repnommat=$sqlnommat->fetch_assoc()){  ?>
		<tr><td><?php echo $repnommat['nom_mat']; $mid=$repnommat['id_mat']; ?></td>
                       <td><a id="openModalLink" href="#<?php echo $mid; ?>" title="Modifier les notes">Editer</a></tr>

Et voici le code jquery:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 $(document).ready(function() {
 
    $("#openModalLink").click(function() {
      $('#myModale').modal('show');
    });
 
    $("#closeModalBtn").click(function(e) {
    	e.preventDefault();
      $('#myModale').modal('hide');
    });
 
});

En fin voici pour la fenêtre modale:

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
<!-- Modal -->
<div class="modal fade" id="myModale" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header hidden-print">
				<div class="row">
					<div class="col-md-12">
						<div class="col-md-8"><h4 class="modal-title" id="myModalLabel">Mise à jour de la note</h4></div>
						<div class="col-md-4">
						</div>
					</div>
				</div>
			</div>
			<div class="modal-body">
				<div class="row">
					<div class="col-xs-12 col-sm-12 col-md-12">
						<form name="form-enr-note" method="POST" action="">
							<div class="col-md-12 form-group has-feedback">
								<div class="col-sm-4 col-md-4">
									<label for="anant">Mettre à jour la note</label>
									<input type="text" class="form-control" id="noteecrite" name="noteecrite" value="">
									<?php if(isset($erreurnecrite)) echo $erreurnecrite;  ?>
								</div>
								<div class="col-sm-2 col-md-2">
									<label for="enr">Enregistrement</label>
									<input type="submit" name="enregistrer" id="enr" value="Enregistrer" class="btn btn-primary pull-left">
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
			<div class="modal-footer hidden-print">
				<button id="closeModalBtn" type="button" class="btn btn-default">Close</button>
			</div>
		</div>
	</div>
</div>

Le problème est que c'est le premier lien qui affiche la fenêtre modale les autres ne le font pas du tout!
Donc vos solutions seront la bienvenue!

**danielhagnoul** · 05/09/2016, 20h47

Code :

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

1
2
3
4
	<tbody><?php 
	while($repnommat=$sqlnommat->fetch_assoc()){  ?>
		<tr><td><?php echo $repnommat['nom_mat']; $mid=$repnommat['id_mat']; ?></td>
                       <td><a id="openModalLink" href="#<?php echo $mid; ?>" title="Modifier les notes">Editer</a></tr>

Un ID doit être unique dans la page web.

**kinkon** · 05/09/2016, 21h20

Euh! Je fais comment maintenant?????????????????????

**Toufik83** · 06/09/2016, 01h42

bonsoir,
1-le deuxième td n'est pas fermé.

Code php :

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

1
2
3
4
5
6
 
while($repnommat=$sqlnommat->fetch_assoc()){  ?>
		<tr>
                       <td><?php echo $repnommat['nom_mat']; $mid=$repnommat['id_mat']; ?></td>
                       <td><a id="openModalLink" href="#<?php echo $mid; ?>" title="Modifier les notes">Editer</a>
                </tr>

2-les éléments <a> sont crées dynamiquement, puis ils sont ajoutés directement dans des tr, sans table ?
3-jQuery.click() ne fonctionnera pas pour ces éléments, il faut passer par un parent statique ou utiliser $(parentElement).on('click','element',function(){...}
4- a mon avis si tu veux juste afficher #myModale
dans ton cas tu devra enlever les id="openModalLink" et changer ta fonction ainsi :

Code jQuery :

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

1
2
3
4
5
 
$("table").on("click","tbody tr td a",function(){
   $('#myModale').modal('show');
   alert($(this).attr("href"));//get href de l'élément.
});

**kinkon** · 06/09/2016, 14h20

Ok merci Toufik83 pour votre aide, en fait j'ai mis le code complet et omis la fermeture de la seconde <td> sinon j'ai suivis votre conseil et voici le code complet:

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
<html>
<head>
	<script src="/gsjm/scripts/js/jquery-1.11.3.min.js"></script>
	<!-- Bootstrap -->
	<link rel="stylesheet" href="/gsjm/boubou/css/bootstrap.css" />
	<script type="text/javascript" src="/gsjm/boubou/js/bootstrap.js"></script>
	<!-- Fin Bootstrap -->
</head>
<body>
<script type="text/javascript">
 $(document).ready(function() {
	$("table").on("click","tbody tr td a",function(){
	   $('#myModale').modal('show');
	   alert($(this).attr("href"));//get href de l'élément.
	});
 
    $("#closeModalBtn").click(function(e) {
    	e.preventDefault();
      $('#myModale').modal('hide');
    }); 
});
</script>
<table class="table">
<thead><tr><th>Matiere</th><th>Notes</th></tr></thead>
<tbody>
 
<?php
//Connexion à la base de données
require('../scripts/php/connexion_db.php');
$sqlnommat=$connexion->query("SELECT * FROM matieres"); 
while($repnommat=$sqlnommat->fetch_assoc()){  ?>
		<tr>
                       <td><?php echo $repnommat['nom_mat']; $mid=$repnommat['id_mat']; ?></td>
                       <td><a href="#<?php echo $mid; ?>" title="Modifier les notes">Editer</a></td>
                </tr><?php
}
?>
</tbody>
</table>
 
<!-- Modal -->
<div class="modal fade" id="myModale" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header hidden-print">
				<div class="row">
					<div class="col-md-12">
						<div class="col-md-8"><h4 class="modal-title" id="myModalLabel">Mise à jour de la note</h4></div>
						<div class="col-md-4">
						</div>
					</div>
				</div>
			</div>
			<div class="modal-body">
				<div class="row">
					<div class="col-xs-12 col-sm-12 col-md-12">
						<form name="form-enr-note" method="POST" action="">
							<div class="col-md-12 form-group has-feedback">
								<div class="col-sm-4 col-md-4">
									<label for="anant">Mettre à jour la note</label>
									<input type="text" class="form-control" id="noteecrite" name="noteecrite" value="">
									<?php if(isset($erreurnecrite)) echo $erreurnecrite;  ?>
								</div>
								<div class="col-sm-2 col-md-2">
									<label for="enr">Enregistrement</label>
									<input type="submit" name="enregistrer" id="enr" value="Enregistrer" class="btn btn-primary pull-left">
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
			<div class="modal-footer hidden-print">
				<button id="closeModalBtn" type="button" class="btn btn-default">Close</button>
			</div>
		</div>
	</div>
</div>
</body>
</html>

Et sa fonctionne nickel avec cet ordre!!!

Code :

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

$("table").on("click","tbody tr td a",function(){

Vraiment Big up!
Je voudrais maintenant récupérer l'attribut href dans la fenêtre modale et la je fais comment?????????????????

**Toufik83** · 06/09/2016, 14h50

ou veux-tu mettre le href récupéré ? dans une zone de texte existante dans #myModal par exemple?
si c'est ça, alors tu n'a qu'a ajouter une variable qui prend la valeur du href puis tu le met dans la zone de texte voulu.
-n'oublis pas que les éléments <a> sont des liens, alors au moment du click le navigateur va chercher cette adresse qui est en href (rechargement...). pour éviter ça il faut ajouter un return false a la fin de la fonction click.

Code jQuery :

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

1
2
3
4
5
6
7
 
$("table").on("click","tbody tr td a",function(){
   var Href=$(this).attr("href") ;
   $('#myModale').modal('show');
   $("#idzonedetext").val(Href);
   return false;// cette ligne est importante pour empêcher le navigateur de suivre le lien de href.
});

Ouvrir une fenêtre modale sur clic d'un lien avec jquery

jQuery

Vue hybride

Discussions similaires

Partager

Partager