Discussion :

[Pelote2012]

Bonjour,

Je suis sur un projet s'appuyant sur jquery-UI.
Quand je fais une modalPopup, j'ai des boutons qui prennent le CSS de ui-lightness.
Je doit rajouter un bouton intermédiaire, dans cette Popup. Mais pour faire propre, je souhaiterai appliquer le même CSS... mais je n'y arrive pas (d'accord je ne suis pas très doué en CSS )

Si quelqu'un peut me dire quelle classe mettre sur les input buton ...

Merci

[rodolphebrd]

Bonjour,

Envoyez votre code parce que même avec le thème Jquery-Ui c'est vague...

[Pelote2012]

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
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
 $(function () {
 
            GetElems();
 
            $("#Ajouter").click(function () {
                EditionElem(-1);
            });
 
            $("#MPEditElem").dialog({
                autoOpen: false,
                modal: true,
                width: "500px",
                buttons: {
                    Fermer: function () {
                        $(this).dialog("close");
                        GetElems();
                    },
                    Valider: function () {
                        $('.error').hide();
                        ValidationElem();
                    }
                }
            });
 
        });
 
 function EditionElem(RowID) {
            $.ajax({
                type: "POST",
                url: "Lst_Element.aspx/GetElement",
                data: '{"IdElem":' + RowID + ',"PageEnCours":"' + document.location.href.toString() + '"}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    if (msg.d != null) {
                        $('#MPEditElem').dialog('option', 'title', msg.d.titre);
                        BuildTable(msg.d);
                        $('.error').hide();
                        $("#MPEditElem").dialog("open");
                    }
                    else {
                        var Ret = new function () {
                            this.Reussi = false;
                            this.Msg = "Problème récupération élément";
                        }
                        AfficheMsgRetour(Ret)
                    }
                },
                error: function () {
                    alert('Erreur récupération élément!');
                }
            });
        }
 
        function BuildTable(msg) {
            var table = '<table>';
            if (msg.Id == "-1") {
                table += '<tr><td class="FormLib">Libellé</td><td class="FormCell"><input type="text" id="txtNom" /><br /><label class="error" for="txtNom" id="Nom_error">Champs Libellé obligatoire.</label></td></tr>';
                table += '<tr><td class="FormLib">Dimension</td><td class="FormCell"><input type="text" id="txtDim" /></td></tr>';
            }
            else {
                table += '<tr><td class="FormLib">Libellé</td><td class="FormCell"><input type="text" id="txtNom" value="' + msg.Libelle + '"/><br /><label class="error" for="txtNom" id="Nom_error">Champs Libellé obligatoire.</label></td></tr>';
                table += '<tr><td class="FormLib">Dimension</td><td class="FormCell"><input type="text" id="txtDim" value="' + msg.Dimension + '"/></td></tr>';
            }
            table += '<input type="hidden" id="hidId" value="' + msg.Id + '"/></table>';
 
            $('#ContenuEditElem').html(table);
        };

Code html :

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

1
2
3
4
5
6
7
<button type="button" id="Ajouter" class="btnValid">
        Ajouter
    </button>
 <div id="MPEditElem" title="Edition élément">
        <div class='subcontent-box' id='ContenuEditElem'>
        </div>
    </div>

Mon bouton est à ajouter dans la fonction BuildTable. Mais c'est juste une classe que je recherche. Mon code ne te dira pas grnd-chose.

Je viens de trouver dans jquery-ui-1.10.0.custom.min.css une classe ui-button, je vais essayer

[Pelote2012]

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
 function BuildTable(msg) {
            var table = '<table>';
            if (msg.Id == "-1") {
                table += '<tr><td class="FormLib">Libellé</td><td class="FormCell"><input type="text" id="txtNom" /><br /><label class="error" for="txtNom" id="Nom_error">Champs Libellé obligatoire.</label></td></tr>';
                table += '<tr><td class="FormLib">Dimension</td><td class="FormCell"><input type="text" id="txtDim" /></td></tr>';
                table += '<tr><td class="FormLib" colspan="2"><button id="btnEnrElem" class="ui-button"/>Valider</button></td></tr>';
            }
            else {
                table += '<tr><td class="FormLib">Libellé</td><td class="FormCell"><input type="text" id="txtNom" value="' + msg.Libelle + '"/><br /><label class="error" for="txtNom" id="Nom_error">Champs Libellé obligatoire.</label></td></tr>';
                table += '<tr><td class="FormLib">Dimension</td><td class="FormCell"><input type="text" id="txtDim" value="' + msg.Dimension + '"/></td></tr>';
                table += '<tr><td class="FormLib" colspan="2"><button id="btnEnrElem" class="ui-button"/>Valider</button></td></tr>';
            }
            table += '<input type="hidden" id="hidId" value="' + msg.Id + '"/></table>';
 
            $('#ContenuEditElem').html(table);
        };

Code html :

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

<button id="btnEnrElem" class="ui-button"/>Valider</button>

ça me donne un point avec mon texte "Valider" à côté

[Bovino]

Ben c'est normal...

Code html :

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

<button id="btnEnrElem" class="ui-button"/>Valider</button>

La balise ouvrante est autofermée !

[rodolphebrd]

J'ai la version jquery-ui-1.10.2 et il y a l'ID button...

[Pelote2012]

http://jqueryui.com/button/

ahahaha je viens de voir j'ai un / de trop

Maintenant ça marche

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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
 
 function EditionElem(RowID) {
            $.ajax({
                type: "POST",
                url: "Lst_Element.aspx/GetElement",
                data: '{"IdElem":' + RowID + ',"PageEnCours":"' + document.location.href.toString() + '"}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    if (msg.d != null) {
                        $('#MPEditElem').dialog('option', 'title', msg.d.titre);
                        BuildTable(msg.d);
                        $('.error').hide();
                        $('button').button().click(function (event) { event.preventDefault(); });
                        $("#MPEditElem").dialog("open");
                    }
                    else {
                        var Ret = new function () {
                            this.Reussi = false;
                            this.Msg = "Problème récupération élément";
                        }
                        AfficheMsgRetour(Ret)
                    }
                },
                error: function () {
                    alert('Erreur récupération élément!');
                }
            });
        }
function BuildTable(msg) {
            var table = '<table>';
            if (msg.Id == "-1") {
                table += '<tr><td class="FormLib">Libellé</td><td class="FormCell"><input type="text" id="txtNom" /><br /><label class="error" for="txtNom" id="Nom_error">Champs Libellé obligatoire.</label></td></tr>';
                table += '<tr><td class="FormLib">Dimension</td><td class="FormCell"><input type="text" id="txtDim" /></td></tr>';
                table += '<tr><td class="FormLib" colspan="2"><button id="btnEnrElem">Valider</button></td></tr>';
            }
            else {
                table += '<tr><td class="FormLib">Libellé</td><td class="FormCell"><input type="text" id="txtNom" value="' + msg.Libelle + '"/><br /><label class="error" for="txtNom" id="Nom_error">Champs Libellé obligatoire.</label></td></tr>';
                table += '<tr><td class="FormLib">Dimension</td><td class="FormCell"><input type="text" id="txtDim" value="' + msg.Dimension + '"/></td></tr>';
                table += '<tr><td class="FormLib" colspan="2"><button id="btnEnrElem" >Valider</button></td></tr>';
            }
            table += '<input type="hidden" id="hidId" value="' + msg.Id + '"/></table>';
 
            $('#ContenuEditElem').html(table);
        };

[rodolphebrd]

Bien vu @Bovino
Je suis lent ce matin et aveugle