Bonjour,

j'utilise une fenêtre jquery (.dialog()) dans laquelle j' ajoute dynamiquement un bloc div de boutons à l'aide de la méthode append() or je voudrais pouvoir écrire mon code html statiquement dans le dom et l'appeler via un id pour l'ajouter à ma fenêtre, voici le code en question :

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <style>
 
     #dialog{
 
      background-color: #7bbeff;
 
     }
     #sizename{
            width:45px;
            margin-left:6px;
     }
        .operateur{
            width: 20px;
            height: 20px;
        }
     .ref{
         font-size: 2px;
         margin:0;
         width: 135px;
 
     }
     .operateur .ui-button {
 
         width: 10px;
         height: 0px;
     }
 
 
    </style>
</head>
<body>
 
<a href="#" id="open">Ouvrir la fenetre</a>
<div id="fenetre" style="display:none; font-size:0.7em;">
    <p>Contenu de ma fenetre.</p>
</div>
<script type="text/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
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
79
80
    $(document).ready(function(){
        $('#fenetre').dialog({
            autoOpen: false,
            bgiframe: true,
            resizable: true,
            modal: false,
            width: 350,
            title: 'Ma fenetre'
        });
        $('#open').click(function(){
            $('#fenetre').dialog('open');
 
            return false;
        });
    });
 
 
 
    $(function() {
 
        var cpt = 0;
        $( "#dialog" ).dialog({
            title: 'Calcul'
        });
 
 
 
 
        $('body').on('click','#valid',function(e,ui){
                console.log("click");
        });
 
 
 
        $('body').on('click','#cancel',function(e,ui){
            $( "#dialog" ).dialog( "close" );
        });
 
        $('#dialog').on('change','#sel',function(e,ui){
 
           if($('#dialog').children('div').attr('id') == 'detail') {
                    console.log("exist");
           }else{
               $('#valid').before('<div id="detail"></div>');
           }
            $('*','#detail').remove();
 
                $('#detail').append('<div><input type="text" name="valeur" value="" /></div>');
                $('#detail').append('<div><button type="submit" name="plus" value="+">+</button>' +
                        '<button type="submit" name="moins"' +' value="-">-</button>' +
                        '<button  type="submit" name="multi" value="*">*</button>' +
                        '<button type="submit" name="divi" value="/">/</button></div>');
 
                $('#detail').append('<div ><button type="submit" name="ref" value="+">ref</button>'+
                        '<input class="ref" type="text" name="reftxt" value=""/></div>'
                +'<div ><button type="submit" name="substring" value="+">extract()</button>' +
                        '<button type="submit" name="len">len()</button>');
 
                $( "button" ).button();
 
 
 
            }
            if($('#sel').val()=='valeur1' ){
 
 
                $('#detail').append('<p><label>size </label><INPUT id="sizename" type="text" name="sizename"></p>');
 
            }
            if($('#sel').val()=='valeur2'){
 
 
                $('#detail').append('<p><label>size </label><INPUT id="sizename" type="text" name="sizename"></p>');
 
            }
 
        });
 
        $( "button" ).button();
    });
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
</script>
<div id="dialog"/>
<p>
<label>variable</label><INPUT type="text" name="varname">
</p>
<p><label>valeur : </label><br/>
    <SELECT id="sel" name="detail">
    <OPTION>expression
    <OPTION>valeur1
    <OPTION>valeur2
</SELECT></p>
<p></p><button id="valid" type="submit" value="valider" name="valid">valider</button><button id="cancel" type="reset"value="annuler" name="cancel">annuler</button></p>
</div>
 
<!-- ci-dessous le bloc que je souhaite utiliser dans ma fenêtre que lorsque j'en ai besoin -->
<div id="exp">
    <div >
    <button type="submit" name="plus" value="+">+</button>
    <button   type="submit" name="moins" value="-">-</button>
    <button  type="submit" name="multi" value="*">*</button>
    <button type="submit" name="divi" value="/">/</button>
    </div>
</div>
</body>
</html>

Merci d'avance.