Dialog box et dynamic table

Version imprimable

Bonjour tout le monde,
J'ai un tableau dynamique contenant plusieurs lignes.Pour chaque ligne , il y a un lien (image) permettant d'afficher un dialog box pour faire des modifications.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 <a class="openmodalbox"  >
	img src="../images/consulter.png" width="30" height="30" title="Display information" />
 <span class="modalboxContent" >
                    <table width="400"  style="word-wrap:break-word;">
                    <tr>
                      <td colspan="2" align="center"><h2>Personal Information</h2></td>
                    </tr>
                    <tr>
                      <td width="138" class="infosemp" >Name</td>
                      <td width="260" class="infosemp2"><?php echo $row_rsAllEmp['EMPLOYEE_NAME']; ?></td>
                    </tr>
                    <tr>
                      <td class="infosemp">Surname</td>
                      <td class="infosemp2"><?php echo $row_rsAllEmp['EMPLOYEE_SURNAME']; ?></td>
                    </tr>
                    <tr>
                      <td class="infosemp">Phone</td>
                      <td class="infosemp2"><?php echo $row_rsAllEmp['EMPLOYEE_PHONE']; ?></td>
                    </tr>
                  </table>
 
   </span>
</a>

Voici le script utilisé pour afficher les dialog box :

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
$(function() {
    $('.openmodalbox').click(function() {
        $('.modalboxContent').dialog({
		width: 'auto',
		height:'auto',
		resizable: false,
		show: 'highlight',
		hide: 'highlight',
		overlay: { opacity: 0.5, background: 'black'},
            open: function() {
                $('#myDate').datepicker({title:''}).blur();
            },
            close: function() {
                $('#myDate').datepicker('destroy');
            },
 
        });
    });
 
});
$(document).mousedown(function(e) {
    var clicked = $(e.target); // get the element clicked
    if (clicked.is('.modalboxContent')  || clicked.is('.ui.dialog-titlebar')|| clicked.is('.ui-widget-header')|| clicked.parents().is('#ui-datepicker-div')) {
        return; // click happened within the dialog, do nothing here
    } else { // click was outside the dialog, so close it
        $('.modalboxContent').dialog("close");
    }
});

Mon problème est le suivant :
Quand je clique sur le lien pour faire des modification à une seul enregistrement, tous les dialog boxes s'ouvrent en meme temps (pour tous les enregistrements) !!!

En même temps, c'est ce que tu demandes :
Code:

1 2 3 4 5 // Lors du clic sur un élément de classe .openmodalbox $('.openmodalbox').click(function() { // récupérer tous les éléments ayant la classe .modalboxContent // et leur appliquer la méthode .dialog() $('.modalboxContent').dialog({
Si tu veux que l'ouverture ne s'applique qu'à un élément, il faut préciser lequel...

Le bloc dans le code html se trouve à l'intérieur d'une boucle do while php.

Ils ont tous la meme classe. J'ai réussi à afficher un seul enregistrement mais en cliquant sur le meme lien, il m'affiche un autre enregistrement

voici le nouveau code:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
$(function() {
    $('.openmodalbox').click(function() {
        $('.modalboxContent').dialog({
		width: 'auto',
		height:'auto',
		resizable: false,
		show: 'highlight',
		hide: 'highlight',
		open: function(event, ui) { SavedDataUpdtParntFrm(); }
 
        });
    });
});
$(document).mousedown(function(e) {
    var clicked = $(e.target); // get the element clicked
    if (clicked.is('.modalboxContent')  || clicked.is('.ui.dialog-titlebar')|| clicked.is('.ui-widget-header')|| clicked.parents().is('#ui-datepicker-div')) {
        return; // click happened within the dialog, do nothing here
    } else { // click was outside the dialog, so close it
        $('.modalboxContent').dialog("close");
    }
});

08/04/2013, 15h03
Bovino

Ca pourrait être sympa (voire constructif) d'essayer de comprendre ce que l'on te dit... :roll:

Bref, on va répéter.

Code:

$('.modalboxContent')

récupère tous les éléments ayant la classe .modalboxContent.

Code:

$('.modalboxContent').dialog({...});

applique à tous les éléments récupérés la méthode .dialog().
Ce qui signifie que lorsque tu cliques sur un élément, tu déclenches toutes les modalbox !
Donc

Citation:

Si tu veux que l'ouverture ne s'applique qu'à un élément, il faut préciser lequel...
08/04/2013, 15h20
Anibel

J'ai compri ce que tu as dis Bovino, mais comment préciser l'élément ??

Je débute avec ce genre de truc et je trouve du mal à trouver une solution :(
08/04/2013, 15h27
Bovino
C'est pourtant pas bien compliqué...
Code:

1 2 3 $('.openmodalbox').click(function() { $(this).find('.modalboxContent').dialog({...}); });
A part ça, la structure HTML est particulièrement moche... Une balise <table> dans un <span> dans un lien... :calim2:
08/04/2013, 15h30
Anibel

Je trouve pas des mots pour exprimer ma gratitude.

You are the best Bovino :ccool:
08/04/2013, 18h40
Anibel

Cher Bovino, je ne sais pourquoi le dialog box ne s'affiche qu'une seule fois !!
08/04/2013, 22h13
danielhagnoul
Citation:

Envoyé par Anibel

Cher Bovino, je ne sais pourquoi le dialog box ne s'affiche qu'une seule fois !!

Bonsoir

C'est vraiment un construction très particulière, votre problème vient du fait que le dialogue s'approprie l'élément "span" et son contenu.
Code:

1 2 3 4 5 $( ".openmodalbox" ).on( "click", function() { $( this ).find( ".modalboxContent" ).clone( true, true ).dialog({ // votre code }); });