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

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

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, 21h47

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, 22h20

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

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

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, 15h20

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, 15h50

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

**kinkon** · 06/09/2016, 16h35

Tu as vraiment compris mon sujet mon objectif est de récupérer la valeur dans un champ text et franchement chapeau pour toi! Tu dois être un AS de jquery toi! J'avais déjà fais des recherches sur google et la plus part des gens ont utilisés ajax pour récupérer la valeur de l'attribut href et toi tu as juste utilisé jquery pour le faire! Suis chaos moi! Je continu le travail en attendant!

**kinkon** · 06/09/2016, 17h49

Euh! Je viens de me cogner à un obstacle par ce que le href récupéré doit faire l'objet d'une requête dans la fenêtre modale et la suis planté!

Bref, je réalise que la mettre directement dans le champ texte n'est pas la bonne idée! Je dois donner la valeur à une variable php!

**Toufik83** · 06/09/2016, 18h38

Envoyé par kinkon

et la plus part des gens ont utilisés ajax pour récupérer la valeur de l'attribut href et toi tu as juste utilisé jquery pour le faire!

ajax est une fonction jQuery aussi, on l'utilise lorsqu'on veux faire un traitement au niveau serveur (Php dans ton cas), puis je ne vois pas l’intérêt d'utiliser ajax si tu as déjà récupéré l'attribut href dans

Code php :

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

<td><a href="#<?php echo $mid; ?>" title="Modifier les notes">Editer</a></td>

**kinkon** · 06/09/2016, 18h58

J'ai besoin de la valeur de cette attribut href pour l'utiliser dans une requête!

**Toufik83** · 06/09/2016, 19h23

d'accord, si tu veux utiliser $.ajax alors la fonction click sur les éléments <a> changera un peu

Code jQuery :

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
 
$("table").on("click","tbody tr td a",function(){
   var Href=$(this).attr("href") ;
  $.ajax({
    url:"chemin de ta fonction php",
    data:Href,
    dataType:"html",
    success:function(reponse){
     console.log(reponse);
     $("#idzonedetext").val(Href);
     $('#myModale').modal('show');
 
    }
  });
 
   return false;// cette ligne est importante pour empêcher le navigateur de suivre le lien de href.
});

**kinkon** · 06/09/2016, 20h51

J'ai essayé mais le fonctionnement reste toujours le même je n'arrive toujours pas à récupérer la valeur pour une utilisation dans une requête du coup j'ai même essayé de l'afficher avec un echo de php pour vérifier et j'obtiens une erreur:
Voici la modification que j'ai eu a faire:

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
$(document).ready(function() {
	$("table").on("click","tbody tr td a",function(){
	   var Href=$(this).attr("href") ;
	  $.ajax({
		 type: "GET",
		url:"#?id=",
		data:Href,
		dataType:"html",
		success:function(reponse){
		 console.log(reponse);
		 $("#noteecrite").val(Href);
		 $('#myModale').modal('show');
 
		}
	  });
		return false;
   // cette ligne est importante pour empêcher le navigateur de suivre le lien de href.
	}); 
 });

Vous remarquerez que j'ai tenté d'envoyer un id lors de la définition de l'url: url:"#?id=", supposant que sa puisse prendre la valeur de l'attribut mais non!
Nom : capture.png
Affichages : 10698
Taille : 17,7 Ko

Nom : capture.png
Affichages : 10698
Taille : 17,7 Ko

**Toufik83** · 07/09/2016, 00h41

ça veux dire quoi ça?

Code jQuery :

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

url:"#?id="

l'url veux dire le chemin physique de ta fonction php, normalement dans le dossier racine ou il y'a la page index.html ou index.php, tu crée un dossier que tu nommes Php,
dans lequel tu met ton fichier gethref.php qui fera le traitement.

Code html :

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
 
<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 -->
        <script><!-- tout les scripts doivent être dans <head> et pas dans <body> !-->
$(function(){
        $("table").on("click","tbody tr td a",function(){
         var Href=$(this).attr("href") ;
        $.ajax({
         url:"php/gethref.php?href="+Href,
         dataType:"html",
         success:function(reponse){
          console.log(reponse);
          $("#Resultat").text($(reponse).eq(0).text());
          $('#myModale').modal('show');
 
         },
           error:function(){alert("erreur ajax");} // on ajoute cette fonction au cas ou il y'a une erreur, une alerte s'affichera. 
        });
        return false;
    });
 
});
</script>
</head>
<body>
<p id="Resultat"></p><!-- ajout d'un élément <p> dans body !-->
</body>
</html>

puis le fichier gethref.php doit être ainsi :

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<?php
$reponse="";
if(isset($_GET["href"]) and !empty($_GET["href"]) ){
$href=urldecode($_GET["href"]);
$reponse= '<a>le href est :'.$href.'</a>';
}
else 
{ 
$reponse="<a>Erreur</a>";
}
echo $reponse;
?>

**onesat** · 07/09/2016, 08h40

Tu peux voire cette manière aussi:

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
<script type="text/javascript">
function ouvreModale(pId){ 
	  $.ajax({
		type: "GET",
		url:"modale.php?id="+pId,
		dataType: 'html',
		contentType: "application/x-www-form-urlencoded;charset=UTF-8",
		beforeSend: function(xhr) {
		xhr.overrideMimeType('text/html; charset=UTF-8');
		},
		success:function(data,textStatus){
			$(function(){
				$('#myModale').modal('show');
				$('#myModale').html(data);
				return false;
		    });
		},
		error: function (xhr, ajaxOptions, thrownError){
			jAlert("Erreur de traitement Ajax");
		}
	}); 
 }
</script>

Voici le reste de ton fichier index.php:

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
<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="#" onclick="ouvreModale(<?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">
	<!-- Tu copies le reste du code de ta fenêtre modale dans un fichier à part que tu vas peut être appele modale.php -->
</div>

Et pour ce qui est du reste de code de ton fichier modale.php arrange toi d'avoir ceci au début (comme ce qu'à indiquer Toufik83):

Code :

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

1
2
3
4
5
6
7
8
9
 
<?php 
if(($_GET['mid']) && !empty($_GET['mid'])){
$id=$_GET['mid'];
//Apres tu fais ce que tu veux avec la variable $id
}
else{
$erreur="ce que tu veux";
echo $erreur; }

Et le tour sera joué!

**kinkon** · 07/09/2016, 15h18

Houm!!
La méthode de onesat fonctionne well! Vraiment cool!
Les dernières modifications de Toufik83 n'affichent pas la fenêtre modale mais quand j'ai essayé de débuguer j'ai vu le résultat s'afficher sous la console!

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

jQuery

Discussions similaires

Partager

Partager