Envoyer des données à une fenêtre modale depuis un menu contextuel

**juju3301** · 04/10/2016, 21h31

Bonjour à tous,

Je cherche un moyen pour ouvrir une fenêtre modal du framework Bootstrap et y afficher les données issues de ma table. Ma table est alimentée via une connexion MySQL. L'ouverture de ma fenêtre modal, est réalisée via un menu contextuel jQuery qui contient deux entrées : Editer et Supprimer.

Voici le code de mon menu contextuel :

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
<script type='text/javascript'>
window.onload=function(){
    $(function() {
        $(".context-menu-one").contextMenu({
            selector: 'td',
            callback: function(key, options) {
                switch (key) {
                    case 'edit':
                        var content = $(this).data('id');
                        $('#myModal').modal('show');
                        break;
 
                    case 'delete':
                      break;
                }
            },
            items: {
                "edit": {name: "Modifier", icon: "edit"},
                "delete": {name: "Supprimer", icon: "delete"},
            }
        });
        $('.context-menu-one').on('click', function(e){
            console.log('clicked', this);
        })
    });
}
</script>

Voici le code de ma fenêtre modal :

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
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Test</h4>
      </div>
      <form class="my-form">
      <div class="modal-body">                                        
        <label>SDA
            <input type="text" id="sda" name="sda" value="" required="required" class="form-control col-md-7 col-xs-12">
        </label>
        <label>Service
        <input type="text" id="service" name="service" value="" required="required" class="form-control col-md-7 col-xs-12">
        </label>
        <label id="label-id"></label>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Clode</button>
        <button type="button" class="btn btn-primary" id="add">Add</button>
    </form>
      </div>
    </div>
  </div>

Voici le code PHP pour récupérer les données :

Code :

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

1
2
3
4
5
6
7
8
9
10
  $reponse = $bdd->query("SELECT * FROM table");
    while ($donnees = $reponse->fetch()) {
 
        echo '
        <tr>
          <td data-id="'.$donnees[0].'">' . $donnees[1] . '</td>
          <td data-id="'.$donnees[0].'">' . $donnees[2]. '</td>
        </tr>
    ';
    }

Avez-vous une idée de la meilleure façon de procéder ?
Merci par avance,

**Toufik83** · 05/10/2016, 16h50

bonsoir,
et le problème c'est quoi ?
1-la modal n'est pas affiché.
2- les données saisies du formulaire ne sont pas envoyées à ton fichier php ?
....

**juju3301** · 05/10/2016, 18h19

Bonsoir,

Le modal s'affiche, mais je ne sais pas comment transmettre les données...

Merci

**Toufik83** · 05/10/2016, 23h00

tout d'abord il y'a des choses à savoir.
1- le nom de la table 'table' est réservé a mysql, il faut changer le nom de cette table.
2- dans cette exemple j'ai utilisé PDO pour se connecté à la base de donnée "developpeztests" qui contient une table ayant le nom "matable" avec 2 colonnes "sda" et "service".

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
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
98
99
100
101
102
103
104
105
106
 
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<title>jQuery UI Dialog - Modal formulaire</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.2.4/jquery.contextMenu.min.css" />
    <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.2.4/jquery.contextMenu.js"></script>
    <script type='text/javascript'>
        $(function() {
        //var content;
            $(".context-menu-one").contextMenu({
                selector: 'td',
                callback: function(key, options) {
                    switch (key) {
                        case 'edit':
                             sda = $(this).parent().find("td:eq(0)").text();
                             service=$(this).parent().find("td:eq(1)").text();
                             $("#sda").val(sda);
                             $("#service").val(service);
                            $('#myModal').modal('show');
                            break;
     
                        case 'delete':
                          break;
                    }
                },
                items: {
                    "edit": {name: "Modifier", icon: "edit"},
                    "delete": {name: "Supprimer", icon: "delete"}
                }
            });
            $('.context-menu-one').on('click',"td", function(e){// td éléments dynamiques : faut passer par délégate.
                console.log('clicked', this);
            });
            
                        /* getHtmlData*/
                        getHtmlData=function(){
                                var html="";
                                $.ajax({
                                        url:'traitementHtml.php',
                                        type:'post',
                                        dataType:'html',
                                        success:function(retour){
                                                $("#_table tbody").html(retour);
                                        },
                                        error:function(e){
                                                alert("erreur Ajax :"+e.responseText);
                                        }
                                });//fin ajax
                        };
                        getHtmlData(); 
        });
    
    </script>
 
</head>
<body>
<div class="container">
 
        <table id="_table" border="1" width="100%">
          <tbody class="context-menu-one">
 
          </tbody>
		</table>
 
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Test</h4>
              </div>
              <div class="modal-body">
                <form class="my-form">                                      
                    <label>SDA
                        <input type="text" id="sda" name="sda" value="" required="required" class="form-control col-md-7 col-xs-12" />
                    </label>
                    <label>Service
                    <input type="text" id="service" name="service" value="" required="required" class="form-control col-md-7 col-xs-12" />
                    </label>
                    <label id="label-id"></label>
                </form>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="add">Add</button>
               </div> <!-- ne pas oublier de fermer cette div !-->
 
              </div> <!-- modal-content !-->
            </div> <!-- modal-dialog !-->
          </div><!-- modal !-->
 
 
          <!-- Bouton execution modal -->
        <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
          Lancer la modal
        </button>
</div><!-- .container!-->
</body>
</html>

le fichier traitementHtml.php :

Code php :

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
 
<?php 
try {
	$bdd = new PDO('mysql:host=localhost;dbname=developpeztests', 'root', '');
} catch(Exception $e) {
	die('Erreur : '.$e->getMessage());
}
$query="SELECT * FROM matable"; // le nom 'table' est résérvé a mysql.
$html="";
$resultats= $bdd->query($query);
while($donnee=$resultats->fetch()){
	$html.="<tr><td>".$donnee['sda']."</td><td>".$donnee['service']."</td></tr>";
}
$resultats->closeCursor();
echo $html;
?>

**juju3301** · 07/10/2016, 16h57

C'est exactement ce que je voulais.

Merci beaucoup !

Envoyer des données à une fenêtre modale depuis un menu contextuel

jQuery

Discussions similaires

Partager

Partager