Discussion :

[Anibel]

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 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
 <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 :

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
$(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) !!!

[Bovino]

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

Code :

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

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...

[Anibel]

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 javascript :

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
 
$(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");
    }
});

[Bovino]

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

Bref, on va répéter.

Code :

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

$('.modalboxContent')

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

Code :

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

$('.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

Si tu veux que l'ouverture ne s'applique qu'à un élément, il faut préciser lequel...

[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

[Bovino]

C'est pourtant pas bien compliqué...

Code :

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

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...

[Anibel]

Je trouve pas des mots pour exprimer ma gratitude.

You are the best Bovino

[Anibel]

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

[danielhagnoul]

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 :

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

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