Discussion :

[mverhaeghe]

Bonjour à tous,

Je me prends la tête depuis quelques temps pour essayer de mettre en place les fenêtres modals avec le composant Dialog de Jquery UI, sans succès.

J'ai un tableau d’éléments affiché via PHP avec un lien qui ouvre une boite de dialog demandant de confirmer la suppression de l'élément. Mon problème est que je ne vois absolument pas comment arriver à récupérer l’élément dans la fonction Javascript exécuté suite à la validation de l’utilisateur.

Voici le code HTML de la page (a l'heure actuelle et après correction des tests foireux) :

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
 
<?php 
include('bin/workshop.php');;
?>
 
<!-- SECTION JAVASCRIPT -->
<script type="text/javascript" language="javascript">
    $(function(){
        $("#tab_modules").dataTable( {
            "bJQueryUI": true,
            "oLanguage": {
                "sProcessing":     "Traitement en cours...",
                "sLengthMenu":     "Afficher _MENU_ &eacute;l&eacute;ments",
                "sZeroRecords":    "Aucun &eacute;l&eacute;ment à afficher",
                "sInfo":           "Affichage de l'&eacute;lement _START_ &agrave; _END_ sur _TOTAL_ &eacute;l&eacute;ments",
                "sInfoEmpty":      "Affichage de l'&eacute;lement 0 à 0 sur 0 éléments",
                "sInfoFiltered":   "(filtré de _MAX_ &eacute;léments au total)",
                "sInfoPostFix":    "",
                "sSearch":         "Rechercher :",
                "sLoadingRecords": "Chargement en cours...",
                "sUrl":            "",
                "oPaginate": {
                    "sFirst":    "Premier",
                    "sPrevious": "Pr&eacute;c&eacute;dent",
                    "sNext":     "Suivant",
                    "sLast":     "Dernier"
                }
            }
        } );
    });
 
    $( "#dialog-delete" ).dialog({
            autoOpen: false,
            resizable: false,
            height:140,
            modal: true,
            buttons: {
                    "Supprimer": function() {
                            $( this ).dialog( "close" );
                    },
                    "Annuler": function() {
                            $( this ).dialog( "close" );
                    }
            }           
    });
 
 
    $(".but_supprimer").click(function() {
        $("#dialog-delete").dialog('open');
    });
 
</script>
 
<!-- div pour les boites de dialogue -->
<div id="dialog-delete" title="Supprimer le module ?">
    <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Le module va &ecirc;tre supprim&eacute;. Etes vous s&ucirc;r ?</p>
</div>
 
<div>
    <p>Cette page vous permet de s&eacute;lectionner des modules en vue de leur suppression.</p>
    <table id="tab_modules" name="tab_modules">
        <thead>
            <tr>
                <th>Nom</th>
                <th>Classe PHP</th>
                <th>Status</th>
                <th>D&eacute;tails</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            <?php SelectAllModulesForDelete(); ?>
        </tbody>
    </table>
</div>

Ma fonction PHP généré le tableau HTML suivant :

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
 
<tr>
	<td>Module de test</td>
	<td></td>
	<td align='center'><img src='images/circle_red.png'  width=24px height=24px title='Non publi&eacute;'></td>
	<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse blandit, elit non mollis bibendum, enim ante vestibulum nunc, et fermentum nulla sem eu urna. Sed id velit ut orci scelerisque pulvinar laoreet sed mi. Donec vel tellus sit amet diam vestibulum tincidunt vitae eget diam. Etiam sollicitudin lectus sed urna tincidunt a commodo orci viverra. In hac habitasse platea dictumst. Nulla at urna justo. Phasellus id neque velit, dictum adipiscing turpis. Nulla tellus nulla, blandit nec convallis quis, mattis vel tellus. Vestibul</td>
 
	<td><a href='#' class='but_supprimer'><img src='images/Remove.png' title='Supprimer' width=24px height=24px border=0></a></td>
</tr>
<tr>
	<td>Module de test 2</td>
	<td></td>
	<td align='center'><img src='images/circle_red.png'  width=24px height=24px title='Non publi&eacute;'></td>
	<td>jiorejfoie joivfeso fse jo esviojve</td>
	<td><a href='#' class='but_supprimer'><img src='images/Remove.png' title='Supprimer' width=24px height=24px border=0></a></td>
</tr>
 
<tr>
	<td>rzezer é"%"</td>
	<td></td>
	<td align='center'><img src='images/circle_red.png'  width=24px height=24px title='Non publi&eacute;'></td>
	<td>select * from V$instance;</td>
	<td><a href='#' class='but_supprimer'><img src='images/Remove.png' title='Supprimer' width=24px height=24px border=0></a></td>
</tr>
<tr>
	<td>Module de test 3</td>
 
	<td>test.php</td>
	<td align='center'><img src='images/circle_red.png'  width=24px height=24px title='Non publi&eacute;'></td>
	<td>j oi oj oi joi jo io o ij</td>
	<td><a href='#' class='but_supprimer'><img src='images/Remove.png' title='Supprimer' width=24px height=24px border=0></a></td>
</tr>
<tr>
	<td>Module de test 4</td>
	<td>test.php</td>
 
	<td align='center'><img src='images/circle_red.png'  width=24px height=24px title='Non publi&eacute;'></td>
	<td>ckio cois jfio sio seroi fjoiers ofr</td>
	<td><a href='#' class='but_supprimer'><img src='images/Remove.png' title='Supprimer' width=24px height=24px border=0></a></td>
</tr>

Je ne vois pas du tout comment arriver à récupérer un id dans la fonction ""Supprimer": function() {" du bloc javascript de la définition du dialog.

Si quelqu'un a une idée, je suis preneur....

[mverhaeghe]

Bon, je viens de trouver la solution, grâce a un article de blog qui m'avait échappé jusqu’à maintenant

En fait, il faut que je définisse les boutons lors de l'appel de la fonction qui gère le clic, chose que je n'avais pas pensé du tout à faire. De cette manière, je peux facilement récupérer un id et créer l'appel à ma fonction naturellement.

Le code HTML dans sa version corrigé :

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
 
<?php 
include('bin/workshop.php');;
?>
 
<!-- SECTION JAVASCRIPT -->
<script type="text/javascript" language="javascript">
    $(function(){
        $("#tab_modules").dataTable( {
            "bJQueryUI": true,
            "oLanguage": {
                "sProcessing":     "Traitement en cours...",
                "sLengthMenu":     "Afficher _MENU_ &eacute;l&eacute;ments",
                "sZeroRecords":    "Aucun &eacute;l&eacute;ment à afficher",
                "sInfo":           "Affichage de l'&eacute;lement _START_ &agrave; _END_ sur _TOTAL_ &eacute;l&eacute;ments",
                "sInfoEmpty":      "Affichage de l'&eacute;lement 0 à 0 sur 0 éléments",
                "sInfoFiltered":   "(filtré de _MAX_ &eacute;léments au total)",
                "sInfoPostFix":    "",
                "sSearch":         "Rechercher :",
                "sLoadingRecords": "Chargement en cours...",
                "sUrl":            "",
                "oPaginate": {
                    "sFirst":    "Premier",
                    "sPrevious": "Pr&eacute;c&eacute;dent",
                    "sNext":     "Suivant",
                    "sLast":     "Dernier"
                }
            }
        } );
    });
 
    $( "#dialog-delete" ).dialog({
            autoOpen: false,
            resizable: false,
            height:140,
            modal: true,          
    });
 
 
    $(".but_supprimer").click(function(id) {
        var id_module = $(this).attr("id");
        $( "#dialog-delete" ).dialog({
            buttons: {
                    "Supprimer": function() {
                            alert("suppression de l'element "+ id_module);
                    },
                    "Annuler": function() {
                            $( this ).dialog( "close" );
                    }
            } 
        })
        $("#dialog-delete").dialog('open');
    });
 
</script>
 
<!-- div pour les boites de dialogue -->
<div id="dialog-delete" title="Supprimer le module ?">
    <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Le module va &ecirc;tre supprim&eacute;. Etes vous s&ucirc;r ?</p>
</div>
 
<div>
    <p>Cette page vous permet de s&eacute;lectionner des modules en vue de leur suppression.</p>
    <table id="tab_modules" name="tab_modules">
        <thead>
            <tr>
                <th>Nom</th>
                <th>Classe PHP</th>
                <th>Status</th>
                <th>D&eacute;tails</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            <?php SelectAllModulesForDelete(); ?>
        </tbody>
    </table>
</div>

Et le code HTML généré par le PHP pour le tableau :

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
 
<tr>
	<td>Module de test 2</td>
	<td></td>
	<td align='center'><img src='images/circle_red.png'  width=24px height=24px title='Non publi&eacute;'></td>
	<td>jiorejfoie joivfeso fse jo esviojve</td>
	<td><a href='#' class='but_supprimer' id='13'><img src='images/Remove.png' title='Supprimer' width=24px height=24px border=0></a></td>
</tr>
 
<tr>
	<td>rzezer é"%"</td>
	<td></td>
	<td align='center'><img src='images/circle_red.png'  width=24px height=24px title='Non publi&eacute;'></td>
	<td>select * from V$instance;</td>
	<td><a href='#' class='but_supprimer' id='14'><img src='images/Remove.png' title='Supprimer' width=24px height=24px border=0></a></td>
</tr>
<tr>
	<td>Module de test 3</td>
 
	<td>test.php</td>
	<td align='center'><img src='images/circle_red.png'  width=24px height=24px title='Non publi&eacute;'></td>
	<td>j oi oj oi joi jo io o ij</td>
	<td><a href='#' class='but_supprimer' id='15'><img src='images/Remove.png' title='Supprimer' width=24px height=24px border=0></a></td>
</tr>