Sortir une variable

Invité · 15/06/2015, 09h37

Bonjour,

Ci-joint, le code :

Code JS :

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
var rows = 0;
$(document).ready(function () {
   $("#MonSelect").selectmenu({
      change:function () {
         var id = $('#MonSelect').val();
         $.ajax({
            type: "POST",
            data: {"ID": id},
            url: "traitement.php",
            dataType: "json",
            success: function (data) {
               rows = data.length;
               $('#table_d').empty();
               $.each(data, function (index, valeur) {
                  var input_match = $('<input>', {
                     type: 'text',
                     value: valeur.match
                  });
                  var input_val = $('<input>', {
                     type: 'text',
                     value: valeur.val
                  });
                  var row = $("<tr />");
                  $("#table_d").append(row);
                  row.append($("<td class='test'>" + input_match.val() + "</td>"));
                  row.append($("<td class='test'>" + input_val.val() + "</td>"));
               });
            }
         });
      }
   });
});
console.log(rows);

Le console.log(rows) renvoi 0 au chargement de la page, logique !
Par contre, après le onchange sur le select, il obtient une valeur dans la fonction. Comment est-ce que je peux mettre à jour cette variable pour l'utiliser dans une autre fonction.
L'autre fonction permet d'afficher/supprimer des lignes mais j'ai besoin du data.length de l'autre fonction pour bloquer le nombre d'ajout possible.

Merci à vous!

**LuluHow** · 15/06/2015, 10h10

Je vois un ".selectmenu", utilises tu jQuery UI? Autrement, j'ai une méthode à te proposer pour récupérer la valeur d'une option au clic
JSFiddle

Invité · 15/06/2015, 10h29

Oui j'utilise Jquery UI !

Pour l'option click, le problème c'est que le data.lenght, je ne l'obtiens qu'après le onchange, la fonction va reçoit une valeur d'une base de données.

**LuluHow** · 15/06/2015, 10h32

Code :

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

1
2
 success: function (data) {
               rows = data.length;

C'est cette ligne qui pose problème du coup? Tu cherches à affecter la .length de data à rows? essaye

Code JS :

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

rows = data.toString().length;

Sinon tu peux utiliser .done, comme ceci :

Code javascript :

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

1
2
3
4
5
var call = $.ajax({"ton appel ajax"});
 
call.done(function(data){
    alert(data.length);
});

Invité · 15/06/2015, 11h12

Non la ligne data.length fonctionne.

La fonction n'a aucun problème, je veux juste pouvoir ressortir la valeur de "rows" pour l'utiliser dans une autre fonction.
Le problème, c'est que cette valeur n'existe pas au chargement de la page, c'est seulement quand on a modifié le menu déroulant que l'on obtient la valeur de rows.

**LuluHow** · 15/06/2015, 11h20

Je ne comprends pas. Tu veux sortir la valeur de rows? Quand tu la modifie dans la fonction, elle se met à jour dans le contexte global automatiquement... Et tu déclares rows en dehors du $(document).ready

Invité · 15/06/2015, 12h07

Je te mets l'autre fonction, ça va être plus simple.

Code JS :

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
 
$(document).ready(function () {
   $("#MonSelect").selectmenu({
      change:function () {
         var id = $('#MonSelect').val();
         $.ajax({
            type: "POST",
            data: {"ID": id},
            url: "traitement.php",
            dataType: "json",
            success: function (data) {
               rows = data.length;
               $('#table_d').empty();
               $.each(data, function (index, valeur) {
                  var input_match = $('<input>', {
                     type: 'text',
                     value: valeur.match
                  });
                  var input_val = $('<input>', {
                     type: 'text',
                     value: valeur.val
                  });
                  var row = $("<tr />");
                  $("#table_d").append(row);
                  row.append($("<td class='test'>" + input_match.val() + "</td>"));
                  row.append($("<td class='test'>" + input_val.val() + "</td>"));
               });
            }
         });
      }
   });
});
 
var compteur = 0;
            function addMatch(idChamp) {            
                if (compteur < 5) {
                    var conteneur = document.getElementById(idChamp);

En faite, j'ai une autre fonction dans le code avec un compteur, ce compteur ne doit pas dépasser 5 !
En l'état, si le onchange me renvoi 2 valeurs dans mon onchange et bien je peux ajouter dans ma fonction suivante 5, ce qui donne un total de 7 valeurs !
Pour éviter cela, je dois modifier le "var compteur=0" par la valeur data.length, ce qui donnerait dans mon exemple : "var compteur = 2" et je pourrais bien bloquer à 5.
Je sais pas si c'est plus clair ...

**LuluHow** · 15/06/2015, 12h21

Code :

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

compteur = data.length

?

Invité · 15/06/2015, 12h28

Et non, c'est ça le problème justement ...

La valeur de compteur est fixé à l'ouverture de la page alors que la valeur de data.length n'existe qu'à partir de la sélection dans le menu déroulant, sur le onchange ...

**LuluHow** · 15/06/2015, 13h23

C'est logique que ça ne fonctionne pas, Ajax est asynchrone, ce qui fait que ton script continue, et lorsqu'il arrive à ta deuxième fonction, data n'existe pas encore. Tu devrais faire appel à ta deuxième fonction dans le success de ton appel ajax. Elle sera executée uniquement pendant le retour ajax, et dès lors, tu pourras affecter à compteur la valeur de data.length

Invité · 15/06/2015, 13h38

J'y avais pensé ... Sauf que la 2ème fonction permet avec un "+" et un "-" d'ajouter des lignes ... Et si c'est dans le success, ça ne fonctionne plus ...

**LuluHow** · 15/06/2015, 13h41

Tu n'as pas une page d'exemple par hasard? Parce que comme ça, sans l'intégralité du code, c'est difficile :p

Invité · 15/06/2015, 13h47

Oui, pas de souci !

La partie JS :

Code JS :

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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
 
   $(document).ready(function () {
                $("#select_client").selectmenu({
                    width: 337,
                    change:function () {
                    var client = $('#select_client').val();
                    if (client === '-1') {
                        $('#table_tarif_ajout_projet_mots tr').remove();
                        var row_entete = $("<tr />");
                        $("#table_tarif_ajout_projet_mots").append(row_entete);
                        row_entete.append($("<th class='th_ajouter_projet_numero'>" + "N°" + "</th><th class='th_ajouter_projet'>" + "Match" + "</th><th class='th_ajouter_projet'>" + "Nb mots" + "</th><th class='th_ajouter_projet'>" + "Tarif" + "</th>"));
                    }
                    $.ajax({
                        type: "POST",
                        data: {"nom_select_client": client},
                        url: "traitement.php",
                        dataType: "json",
                        success: function (data) {
                            rows = data.length;
                            $('#table_tarif_ajout_projet_mots tr').remove();
                            var row_entete = $("<tr />");
                            $("#table_tarif_ajout_projet_mots").append(row_entete);
                            row_entete.append($("<th class='th_ajouter_projet_numero'>" + "N°" + "</th><th class='th_ajouter_projet'>" + "Match" + "</th><th class='th_ajouter_projet'>" + "Nb mots" + "</th><th class='th_ajouter_projet'>" + "Tarif" + "</th>"));
                            $.each(data, function (index, valeur) {                                
                                num = index + 1;
                                var input_match = $('<input>', {
                                    type: 'text',
                                    class: 'input_tarif_projet',
                                    value: valeur.match_def,
                                    name: 'match['+index+']'
                                });
                                input_match.attr('size', '11');
                                input_match.attr('maxlength', '15');
                                input_match.attr('onblur','verifText(this);');
                                var input_nbmots = $('<input>', {
                                    type: 'text',
                                    class: 'input_tarif_projet',
                                    name: 'nbmots['+index+']'
                                });
                                input_nbmots.attr('size', '6');
                                input_nbmots.attr('onblur','verifInteger(this);');
                                var input_val = $('<input>', {
                                    type: 'text',
                                    class: 'input_tarif_projet',
                                    value: (valeur.tarif_mot_def).replace(".",","),
                                    name: 'tarif_mot['+index+']'
                                });
                                input_val.attr('size', '6');
                                input_val.attr('onblur','verifPrix_mot(this);');
                                var row = $("<tr />");
                                $("#table_tarif_ajout_projet_mots").append(row);
                                row.append($("<td class='td_ajouter_projet_numero'>" + num + "</td>"));
                                row.append($("<td class='td_ajouter_projet'>").append($(input_match)).append($("</td>")));
                                row.append($("<td class='td_ajouter_projet'>").append($(input_nbmots)).append($("</td>")));
                                row.append($("<td class='td_ajouter_projet'>").append($(input_val)).append($("</td>")));
                                $('#img_tab_plus_projet').css({ "display": 'block'});
                                $('#img_tab_moins_projet').css({ "display": 'block'});
                            });                            
                        }
                    });
                }                
            });            
            });
            var compteur = 0;
            function addMatch(idChamp) {            
                if (compteur < 5) {
                    var conteneur = document.getElementById(idChamp);
                    var tr1 = document.createElement('tr');
                    var td1 = document.createElement('td');
                    var td2 = document.createElement('td');
                    var td3 = document.createElement('td');
                    var td4 = document.createElement('td');
                    var num = document.createElement('p');
                    var match_supp = document.createElement('input');
                    var nbmots_supp = document.createElement('input');
                    var tarif_mot_supp = document.createElement('input');
 
                    num.setAttribute("id","num["+compteur+"]");
                    match_supp.setAttribute("type","text");
                    match_supp.setAttribute("size","11");
                    match_supp.setAttribute("class","input_tarif_projet");
                    match_supp.setAttribute("name","match_supp["+compteur+"]");
                    match_supp.setAttribute("onblur","verifText(this);");
                    match_supp.setAttribute('maxlength', 15);
                    nbmots_supp.setAttribute("type","text");
                    nbmots_supp.setAttribute("size","6");
                    nbmots_supp.setAttribute("class","input_tarif_projet");
                    nbmots_supp.setAttribute("name","nbmots_supp["+compteur+"]");
                    nbmots_supp.setAttribute("onblur","verifInteger(this);");
                    nbmots_supp.setAttribute('maxlength', 10);
                    tarif_mot_supp.setAttribute("type","text");
                    tarif_mot_supp.setAttribute("size","6");
                    tarif_mot_supp.setAttribute("class","input_tarif_projet");
                    tarif_mot_supp.setAttribute("name","tarif_mot_supp["+compteur+"]");
                    tarif_mot_supp.setAttribute("onblur","verifPrix_mot(this);");
                    tarif_mot_supp.setAttribute('maxlength', 6);
                    td1.appendChild(num);
                    td1.setAttribute("class","td_ajouter_projet_numero");
                    td2.appendChild(match_supp);
                    td2.setAttribute("class","td_ajouter_projet");
                    td3.appendChild(nbmots_supp);
                    td3.setAttribute("class","td_ajouter_projet");
                    td4.appendChild(tarif_mot_supp);
                    td4.setAttribute("class","td_ajouter_projet");
                    tr1.appendChild(td1);
                    tr1.appendChild(td2);
                    tr1.appendChild(td3);
                    tr1.appendChild(td4);
                    conteneur.appendChild(tr1);
                    document.getElementById("num["+compteur+"]").innerHTML = compteur+1;
                    compteur++;
                }
                else
                {
                    alert('Nombre maximum de match/tarif atteint (total : 5)');
                }                        
            }
            function supprimerMatch(){
                var oTable = document.getElementById('table_tarif_ajout_projet_mots');
                if( oTable.rows.length > 2){
                    oTable.deleteRow(-1);
                    compteur--;
                } else {
                    alert('Suppression impossible (minimum 1)');
                }
            }
            function afficherMatch(){
                if (document.getElementById('affMatch').style.display === 'none'){
                    document.getElementById('affMatch').style.display = 'block';
                }
            }
            function masquerMatch(){
                var oTable = document.getElementById('table_tarif_ajout_projet_mots');
                if( oTable.rows.length === 1){
                    if (document.getElementById('affMatch').style.display === 'block'){
                        document.getElementById('affMatch').style.display = 'none';
                    }
                } 
            }

Partie HTML :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<div id="tab_mots">
	<div class="style_projet">Mots</div>
	<div id="img_tab_plus_projet" style="display:none"><img title="Ajouter un tarif" width="12px" height="12px" src="../../images/tab_plus.png" onClick="addMatch('table_tarif_ajout_projet_mots'); afficherMatch();" /></div>
	<div id="img_tab_moins_projet" style="display:none"><img title="Supprimer un tarif" width="12px" height="4px" src="../../images/tab_moins.png" onClick="supprimerMatch('table_tarif_ajout_projet_mots'); masquerMatch();" /></div>
	<table id="table_tarif_ajout_projet_mots">
		<tr>
			<th class="th_ajouter_projet_numero">N°</th><th class="th_ajouter_projet">Match</th><th class="th_ajouter_projet">Nb mots</th><th class="th_ajouter_projet">Tarif</th>
		</tr>
		<div id="affMatch" style="display:none"></div>
	</table>
</div>

Merci pour ton aide !

Invité · 16/06/2015, 16h16

Tu en restes sans voix ?

Invité · 14/08/2015, 09h34

Bonjour,

Je continue de chercher à propos de mon problème. Est-ce que la solution passe forcément par les callbacks ?

Ou bien j'ai un problème de logique et je peux/dois voir mon code différemment ?

Merci à vous !

**danielhagnoul** · 14/08/2015, 11h15

Dans les codes du message n° 13, je vois un var compteur = 0; (il devrait être placé dans la première ligne du code) mais pas un var rows = 0; !

Invité · 14/08/2015, 11h59

Merci pour votre réponse. Mais même si je mets cette ligne au départ, ça ne change pas le problème.
Le 1er script se lance au "onchange" du select et le 2ème au chargement de la page alors qu'il a besoin d'une information qui ne s'initialise qu'après le success du 1er script.

Invité · 03/08/2017, 17h12

On a le droit de déterrer ses messages ?

Non car en fait, j'avais complètement laissé ce bug de côté mais j'ai toujours le souci...

Si quelqu'un avait une idée brillante... Sans code, je ne vois même pas comment récupérer dans la variable JS après le onchange...

La technologie a peut-être évolué en 2 ans !!