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

Version imprimable

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:

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:

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:

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,

05/10/2016, 16h50
Toufik83

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 ?
....
05/10/2016, 18h19
juju3301

Bonsoir,

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

Merci :)

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:

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:

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

07/10/2016, 16h57
juju3301

C'est exactement ce que je voulais.

Merci beaucoup !