Discussion :

[Sparky95]

Bonjour,
Je tente de créer un bouton en jquery depuis un bon moment avec handler lui étant directement lié
J'ai donc un tableau que je remplis et au dernier champs je veux rajouter un bouton qui me permettra de générer une popup

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
 
function fillTableEtape1(table, data){
    tbody = $("<tbody>");
    table.children('thead').find("td:first-child").text(data.date_num+' - '+data.date);
    var btn = $('<button>')
        .html($("<i>").addClass("fas fa-chart-line"))
        .addClass("btn btn-link p-0")
        .click(function(event) {
            console.log("ui"); 
        });
 
    $.each(data, function(cle, val) {
        if($.isPlainObject(val)){
            tbody.append( $('<tr>').append( $('<th>').prop('colspan', 7).text(cle.toUpperCase()) ) );
            $.each(val, function(cle, val) {
                tbody.append(
                    $('<tr>')
                        .append( $('<td>').html(cle+'') )
                        .append( $('<td>').html(val.nbr+'') )
                        .append( $('<td>').html(val.marge+'') )
                        .append( $('<td>').html( Math.round(val.jrs_posit)+'' ) )
                        .append( $('<td>').html(val.suffixe+'') )
                        .append( $('<td>').html(val.nom_action+'') )
                        .append( $('<td>').html( btn ))
 
                );
            });
        }
    });
    tbody = tbody.html().replace(/NaN/g, "--").replace(/undefined/g, "--").replace(/null/g, "--");
    table.children('tbody').html(tbody);
    return true;
}

Probleme 1: il n'y à que la derniere ligne qui affiche le bouton
Probleme 2: je n'arrives pas à afficher mon message d'alerte donc il ne rentres pas dans le fonction click
Merci d'avance

[Sparky95]

Bonjour,
Non non c'est la bonne syntaxe
https://api.jquery.com/jQuery/#jQuery2

If the HTML is more complex than a single tag without attributes, as it is in the above example, the actual creation of the elements is handled by the browser's .innerHTML mechanism. In most cases, jQuery creates a new <div> element and sets the innerHTML property of the element to the HTML snippet that was passed in. When the parameter has a single tag (with optional closing tag or quick-closing) — $( "<img />" ) or $( "<img>" ), $( "<a></a>" ) or $( "<a>" ) — jQuery creates the element using the native JavaScript .createElement() function.

Enfait cela fait appel au self-closedVoici d'ailleurs ce que cela donnes

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
 
<tr><th colspan="7">ACH</th></tr>
<tr><td>max</td><td>1</td><td>142.86</td><td>5</td><td>25</td><td>Derichebourg</td><td></td></tr>
<tr><td>min</td><td>1</td><td>6.02</td><td>2</td><td>17</td><td>Bouygues</td><td></td></tr>
<tr><td>moy</td><td>17</td><td>27.60</td><td>3</td><td>--</td><td>--</td><td></td></tr>
<tr><th colspan="7">VTE</th></tr>
<tr><td>max</td><td>1</td><td>8.53</td><td>2</td><td>32</td><td>Essilor</td><td></td></tr>
<tr><td>min</td><td>1</td><td>8.53</td><td>2</td><td>32</td><td>Essilor</td><td></td></tr>
<tr><td>moy</td><td>1</td><td>8.53</td><td>2</td><td>--</td><td>--</td><td></td></tr>
<tr><th colspan="7">INDEF</th></tr>
<tr><td>nbr</td><td>19</td><td>--</td><td>--</td><td>--</td><td>--</td><td><button class="btn btn-link p-0"><i class="fas fa-chart-line"></i></button></td></tr>

J'ai suis passé à la ligne pour chaque <tr> histoire que cela soit un peu plus lisible



Ajout: et si tu observes à la fin il y a chaque fois un <td></td> "en trop" en réalité c'est la que les boutons sont sensé s'insérer.
Seulement je ne sais pas pourquoi seul la dernière boucle insert le bouton (je suppose qu'il crée en réalité qu'un seul bouton et qu'a chaque tours il le déplace)
et deuxième soucis ce bouton n'a malgré tout pas le handler attaché à lui

[Toufik83]

Ah oui, j'ai répondu trop vite..., mais bon si tu veux résoudre le problème du clic sur le bouton, essaies d'attacher l'événement click par délégation dans ta fonction comme ça :

Code :

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

1
2
3
4
 
table.on('click','button.btn-link',function(event) {
       console.log("ui"); 
});

Pour le deuxième problème, je n'ai aucune idée de la structure du data mais tu peux cloner le bouton au moment de l'ajout, comme ça :

Code :

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

1
2
 
.append( $('<td>').html( btn.clone() ))

[Sparky95]

Ah oui, j'ai répondu trop vite..., mais bon si tu veux résoudre le problème du clic sur le bouton, essaies d'attacher l'événement click par délégation dans ta fonction comme ça :

Code :

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

1
2
3
4
 
table.on('click','button.btn-link',function(event) {
       console.log("ui"); 
});

[/c]

Ha je n'ai jamais pensé à ça effectivement ce serra déjà plus propre
du coup et bien via ton idée je vais directement créer le bouton dans la boucle et ça devra fonctionner.
Je test tout ça

[Toufik83]

du coup et bien via ton idée je vais directement créer le bouton dans la boucle et ça devra fonctionner.

Justement, l'utilité de la délégation c'est d'attacher les événements en dehors de la boucle.

Sinon, et si tu as un ID de la table

Code html :

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

<table id="laTable"></table>

tu peux mettre le code en dehors de la fonction :

Code :

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

1
2
3
4
5
 
$("#laTable").on("click",'button.btn-link',function(event) {
      console.log("ui"); 
});
function fillTableEtape1(table, data){.......}

Je vois aussi que tu remplaces undefined et NaN et null par des tirets avec cette ligne :

Code :

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

1
2
 
 tbody = tbody.html().replace(/NaN/g, "--").replace(/undefined/g, "--").replace(/null/g, "--");

Si tu veux supprimer cette ligne, renomme le deuxième val du deuxième each (le deuxième paramètre de function) par (val1 ou val2 ou comme tu veux...)

Code javascript :

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

1
2
3
4
5
 
$.each(data, function(cle, val) {
   ....
   $.each(val, function(cle, val1) {
   ....

[Sparky95]

je viens de le faire comme tu m'as conseillé cela fonctionnes
Voici le code maintenant

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
 
 
    // FONCTIONS
        function fillTableEtape1(table, data){
            tbody = $("<tbody>");
            table.children('thead').find("td:first-child").text(data.date_num+' - '+data.date);
            $.each(data, function(cle, val) {
                if($.isPlainObject(val)){
                    // tab += '<tr><th scope="col" colspan="7" class="text-capitalize">'+cle.toUpperCase()+'</th></tr>';
                    tbody.append( $('<tr>').append( $('<th>').prop('colspan', 7).text(cle.toUpperCase()) ) );
                    $.each(val, function(cle, val) {
                        tbody.append(
                            $('<tr>')
                                .append( $('<td>').html(cle+'') )
                                .append( $('<td>').html(val.nbr+'') )
                                .append( $('<td>').html(val.marge+'') )
                                .append( $('<td>').html( Math.round(val.jrs_posit)+'' ) )
                                .append( $('<td>').html(val.suffixe+'') )
                                .append( $('<td>').html(val.nom_action+'') )
                                .append( $('<td>')
                                    .html( $("<button>")
                                            .html($("<i>").addClass("fas fa-chart-line"))
                                            .addClass('btn btn-link btn-table p-0')
                                            .bind('click', [val.suffixe, val.date_num ], function(event) {
                                                console.log("ui2.0");
                                            })
                                        ))
 
                        );
                    });
                }
            });
            tbody = tbody.html().replace(/NaN/g, "--").replace(/undefined/g, "--").replace(/null/g, "--");
            table.children('tbody').html(tbody);
            table.click('button.btn-table',function(event) {
                console.log("ui"); 
            });
            return true;
        }
});

maintenant j'aurais également voulu lier les var suffixe et date_num au bouton comment puis-je faire ça?
J'ai essayé avec un bind histoire de voir si je n'étais pas chanceux mais non

Je vois aussi que tu remplaces undefined et NaN et null par des tirets avec cette ligne :

Code :

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

1
2
 
 tbody = tbody.html().replace(/NaN/g, "--").replace(/undefined/g, "--").replace(/null/g, "--");

Mon but est de remplacer les cases vides par des -- ce n'est donc pas là, le dérangeant. Là ou cela me déranges plus, question propreté du code c'est ceci .append( $('<td>').html(cle+'') ) j'ai voulu faire des toString() mais du fait que je n'avais pas les données pour tous plutôt que de faire des if partout j'ai fait un concat. avec un string vide histoire de transformer le tout en string.(le casting ne fonctionnait pas)
Et de la j'ai remplacé les données qui me ressortaient un vide en --