Discussion :

[Castiel777]

Bonjour,

je recherche à ajouter une information récupérée en AJAX dans mon select en HTML. Voir le screen pour mieux comprendre.
- Pièce jointe 344449

Quand je sélectionne une date, dans mes select, j'ai le nombre de Fax et Mails entre parenthèse, exemple : Fax à valider (32), Mails en cours (64) etc...

Pour ça, j'ai ce morceau de code en JS qui va récupérer mon nombre

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
$(document).on("change", "#NumInt, #NomCli, #FaxMail, #TypeDoc, #DateCreaDeb, #DateCreaFin, #DevisNonRep", function() {
 
        var id = "<?php echo $id;?>";
        var NumInt = $("#NumInt").val();
        var NomCli = $("#NomCli").val();
        var FaxMail = $("#FaxMail").val();
        var TypeRech = "";
        var TypeDoc = $("#TypeDoc").val();
        var DateCreaDeb = $("#DateCreaDeb").val();
        var DateCreaFin = $("#DateCreaFin").val();
        var DevisNonRep = $("#DevisNonRep").val();
 
        for($i=0;$i<2;$i++)
        {
            if($i==0){
                TypeRech = "Fax";
            }
            else
            {
                TypeRech = "Mails";
            }
 
            $.ajax({
                "url":"ChargeNbFaxMail.php",
                "type":"POST",
                "data":{
                    "id": id, "NumInt": NumInt, "NomCli": NomCli, "FaxMail": FaxMail, "TypeRech": TypeRech, "TypeDoc": TypeDoc, "DateCreaDeb": DateCreaDeb, "DateCreaFin": DateCreaFin, "DevisNonRep": DevisNonRep,
                },
                "dataType":"json",
                "success":function(data){
                    data.TypeRech;
                    data.AValider;
                    data.EnCours;
                    data.NonEnvoyes;
                    data.Envoyes;
                    data.Total;
 
                    var table = new Array();
                    table[0]=data.AValider;
                    table[1]=data.EnCours;
                    table[2]=data.NonEnvoyes;
                    table[3]=data.Envoyes;
                    table[4]=data.Total;
                },
            });
        }
    });

- Et mon select basique en HTML

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
<td>
  <select name="selectFax" id="selectFax" size=5>
    <option value="FaxaValider">Fax à valider</option>
    <option value="FaxenCours">Fax en cours</option>
    <option value="FaxnonEnvoyes">Fax non envoyés</option>
    <option value="FaxEnvoyes">Fax envoyés</option>
    <option value="FaxTous">Tous les fax</option>
  </select>
</td>
<td>
  <select name="selectMail" id="selectMail" size=5>
    <option value="MailaValider">Mails à valider</option>
    <option value="MailenCours">Mails en cours</option>
    <option value="MailnonEnvoyes">Mails non envoyés</option>
    <option value="MailEnvoyes">Mails envoyés</option>
    <option value="MailTous">Tous les mails</option>
  </select>
</td>

Comment puis-je ajouter mes data entre parenthèse dans mon select ?

Merci d'avance.

[mathieu]

avec jQuery, vous pouvez modifier l'affichage d'une option comme cela :

Code :

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

1
2
3
4
5
6
    var nombre = 42;
    var texteElement = $("#selectMail option[value=\"MailaValider\"]").text();
 
    texteElement += " (" + nombre + ")";
 
    $("#selectMail option[value=\"MailaValider\"]").text(texteElement);

[Castiel777]

Comment je peux enlever les undefined ?
Pas moyen avec un if, je dois mal m'y prendre

[mathieu]

"undefined" est un type spécial donc il faut tester comme cela :

Code :

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

1
2
3
4
if ("undefined" !== typeof nombre) {
    // le nombre est défini
 
}

[Castiel777]

Super ça fonctionne, je connaissais != mais pas !==

Mince je rencontre un problème, lorsque je sélectionne une autre date, les anciennes valeurs ne se mettent pas à jour et créer une autre colonne avec les nouvelles valeurs.
Comment puis-je gérer cela ?
Il faudrait que je clear en début de ma fonction

Merci beaucoup pour ton aide mathieu

[Castiel777]

Aurais-tu une idée mathieu ? ou quelqu'un d'autre ?

[mathieu]

le texte initial peut être stocké dans un attribut "data" comme ça :

Code :

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

<option value="MailaValider" data-texte-initial="Mails à valider">Mails à valider</option>

et pour l'utilisation en jQuery c'est comme ça :

Code :

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

var texteElement = $("#selectMail option[value=\"MailaValider\"]").data("texteInitial");

[Castiel777]

Bonjour,

j'ai fait mon code autrement, avec un .append, plus pratique dans mon cas, le problème que je rencontre est le "undefined" qui s'affiche, j'ai mis un if pour tester si c'est différent de cette value pour gérer mes parenthèses mais la value s'affiche toujours :/
Une idée ?


Quand c'est égal à undefined, ça veut dire 0, or quand c'est égal à 0, je ne veux pas les parenthèses

[Toufik83]

"undefined" apparaît lorsque les valeurs de tes variables ne sont pas définient, donc ajoute un block else pour gérer ça.

Code :

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

if(undefined !== typeof data.AValider) table[0] = " (" + data.AValider + ")" else table[0]='';

(même chose pour les autres variables).

[Watilin]

Attention à ne pas confondre

Code :

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

if ("undefined" !== typeof data.AValider)

et

Code :

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

if (undefined !== data.AValider)

Dans le premier cas, on compare typeof avec la chaîne "undefined" (typeof renvoie toujours des chaînes) ; dans le second on compare directement notre variable à la valeur undefined.

Dans le second cas, il peut être intéressant de passer en mode strict pour s’assurer que la valeur undefined n’est pas redéfinie, soit par accident, soit par un script malicieux.

[Castiel777]

Tout est OK merci pour votre aide !