Bonjour,

Je suis débutant dans tout ce qui est langage web.
Je fais des essais pour comprendre comment fonctionne le code.

Il s'agit ici d'un popup qui s'ouvre tout simplement à la suite d'un clic sur un bouton. tu que j'ai trouvé ici : http://sohtanaka.developpez.com/tuto...css-et-jquery/

Mon problème :
Je souhaiterais passer en paramètre l'id de la ligne où l'on a cliqué qui se trouve dans ma première colonne de mon tableau à mon popup. De cette manière je saurais quand je suis en création ou modification (je rajouterais certainement un autre paramètre pour savoir si je suis en modification ou suppression pour faire l'action qui convient mais ne nous égarons pas ).
J'espère que c'est clair ....

Voici un peu de code :

le style de base :

Code css : 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
.voile-noir {
        position: fixed;
        display: none;
        left: 0;
        top: 0; 
        width: 100%;
        height: 100%;
        opacity: 0.75;
        background: gray; 
        z-index: 9999;
}
.popup-block{
        position: fixed;
        display: none;
        top: 50%;
        left: 50%;
        padding: 20px;     
        z-index: 99999;
        font-size: 1em;
        background: #000;
        border: 20px solid #ddd;
        -webkit-box-shadow: 0px 0px 20px #000;
        -moz-box-shadow: 0px 0px 20px #000;
        box-shadow: 0px 0px 20px #000;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
}
.popup p {
        padding: 5px 10px;
        margin: 5px 0;
}
.popup-btn-close {
        float: right; 
        margin: -55px -55px 0 0;
}

mon boutton :

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
<a href="#" class="popup-light" data-popup-class="popup-block" data-popup-width="700px"><i class="icon-plus-sign"></i></a>

L'entête des colonne de mon tableau :

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
<th style="display:none">Id </th>
<th>Code</th>
<th>Nom produit</th>
<th>Prix de vente</th>
<th>Statut</th> 
<th>Actions</th>

Le formulaire se trouvant de ma fenêtre popup (je l'ai raccourci à un seul input, le problème n'étant pas ici) :

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
<div class="popup-block"> 
        <div class="row-fluid sortable">
            <div class="box span12">
                <div class="box-header well" data-original-title>
                    <h2><i class="icon-edit"></i> Produits</h2>
                </div>
 
                <div class="box-content">
                    <form class="form-horizontal" action="produits.php" method="post" name="form_pdts" onsubmit="return valider()">
                        <fieldset>
                              <div class="control-group">
                                <label class="control-label" for="focusedInput">Code</label>
                                <div class="controls">
                                      <input class="input-xlarge focused" id="code" name="code" type="text" value="">
                                </div>
                              </div>
 
                              <div class="form-actions">
                                <button type="submit" class="btn btn-primary" >Sauvegarder</button>
                                <button class="btn">Annuler</button>
                              </div>
                        </fieldset>
                    </form>
                </div>
            </div><!--/span-->
        </div><!--/row-->
    </div>

Et le code javascript :

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
<script charset="utf-8" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
    <script>
        $(function(){
            $(".popup-light").click(function() {
                var obj = $(this),
                    popupClass = obj.data("popupClass"),
                    popupWidth = obj.data("popupWidth"),
                    objPopup =  $('.' + popupClass);
 
                objPopup
                    .css("width", popupWidth)
                    .prepend('<img src="http://sohtanaka.developpez.com/tutoriels/javascript/creez-fenetre-modale-avec-css-et-jquery/fichiers/close_pop.png" class="popup-btn-close" title="Close Window" alt="Close" />')
                    .css({
                        // Si l'on regroupe les deux blocs CSS, le popup n'est pas bien positionné
                        // Le popup doit avoir sa taille définitive avant le calcul de outerHeight et de outerWidth
                        "margin-top":  -objPopup.outerHeight(true)/2,
                        "margin-left": -objPopup.outerWidth(true)/2
                    })
                    .fadeIn();
 
                $("<div/>", {
                    "class":"voile-noir",
                    "css":{
                        "filter":"alpha(opacity=80)"
                    }
                }).appendTo("body").fadeIn();
 
                return false;
            });
 
            $("body").delegate(".popup-btn-close, .voile-noir", "click", function(){
                $('.voile-noir , .popup-block').fadeOut(function(){
                    $(".popup-btn-close, .voile-noir").remove();
                });
 
                return false;
            });
        });
 
    </script>
En espérant svp qu'une âme charitable m'aide à comprendre.

Merci par avance de votre aide