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

Version imprimable

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:

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:

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:

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!

Code:

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.

05/09/2016, 21h20
kinkon

Euh! Je fais comment maintenant?????????????????????:oops:

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

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:

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

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:

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:

$("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?????????????????

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:

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

06/09/2016, 15h35
kinkon

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!
06/09/2016, 16h49
kinkon

:? 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é! :oops:
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!
06/09/2016, 17h38
Toufik83

Citation:

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:

<td><a href="#<?php echo $mid; ?>" title="Modifier les notes">Editer</a></td>
06/09/2016, 17h58
kinkon

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

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

Code:

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

1 pièce(s) jointe(s)

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:

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!
Pièce jointe 219755

ça veux dire quoi ça? :koi:

Code:

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:

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:

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

Tu peux voire cette manière aussi:

Code:

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:

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:

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

07/09/2016, 14h18
kinkon

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!