Discussion :

[doriginal]

Salut à tous,

J'ai récupéré une gestion de stock en php/MySQL et une fonction ne marche pas sous IE 11 alors que sous Firefox ou Chrome ça fonctionne.

Sous Chrome:


Sous IE 11:


Le nom du produit comme vous pouvez le voir dans les captures s'affiche bien avec Chrome mais pas IE 11.
C'est du Javascript et ce qui permet l'affichage est cette ligne il me semble.

Code :

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

 $('<tr id='+item+'><td><lable id='+item+'roll class=jibi007 >'+roll+'</label></td><td><input type=hidden value='+item+' id='+item+'id ><input type=text name="stock_name[]"  id='+item+'st style="width: 150px" class="round  my_with" readonly="readonly" ></td><td><input type=text name=quty[] readonly="readonly" value='+quty+' id='+item+'q class="round  my_with" style="text-align:right;" ></td><td><input type=text name=sell[] readonly="readonly" value='+sell+' id='+item+'s class="round  my_with" style="text-align:right;"  ></td><td><input type=text name=stock[] readonly="readonly" value='+disc+' id='+item+'p class="round  my_with" style="text-align:right;" ></td><td><input type=text name=jibi[] readonly="readonly" value='+total+' id='+item+'to class="round  my_with" style="width: 120px;margin-left:20px;text-align:right;" ><input type=hidden name=total[] id='+item+'my_tot value='+main_total+'> </td><td><input type=button value="" id='+item+' style="width:30px;border:none;height:30px;background:url(images/edit_new.png)" class="round" onclick="edit_stock_details(this.id)"  ></td><td><input type=button value="" id='+item+' style="width:30px;border:none;height:30px;background:url(images/close_new.png)" class="round" onclick=reduce_balance("'+item+'");$(this).closest("tr").remove(); ></td></tr>').fadeIn("slow").appendTo('#item_copy_final');

Merci pour votre aide

[Bovino]

En l'occurrence, c'est IE qui a raison pour une fois...

Code :

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

'<tr id='+item+'><td><lable id='+item+'roll class=jibi007 >'

c'est quoi une balise <lable> ?

[doriginal]

Merci pour la balise label qui était mal écrite.
Je l'ai modifié mais IE 11 n'affiche toujours pas le produit.
Je ne connais pas grand chose en Jquery, je ne vois pas d'où peu venir le soucis.

MAJ: Je vient de voir un autre soucis toujours sur la même ligne, sous IE 11 je ne peu pas cliquer sur les 2 boutons Modifier ou Supprimer alors que sous FF ou Chrome on peu cliquer.

MAJ2: Avec l'outil de débogage de IE lorsque je valide mon produit j'ai cette erreur.

[NoSmoking]

Bonjour,
je ne sais qui à pondu un code pareil mais....
...il manque des ", des ID sont dupliquées...

Observe le code généré pour voir les écarts

[doriginal]

Oh oui effectivement il manquais beaucoup de " je n'avais pas fait attention.

Avec ça ca fonctionne mieux.

Code :

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

$('<tr id="'+item+'"><td><label id="'+item+'roll" class="jibi007">'+roll+'</label></td><td><input type="hidden" value="'+item+'" id="'+item+'id"><input type="text" name="stock_name[]" id="'+item+'st" style="width: 150px" class="round  my_with" readonly="readonly"></td><td><input type="text" name="quty[]" readonly="readonly" value="'+quty+'"" id="'+item+'q" class="round  my_with" style="text-align:right;"></td><td><input type="text" name="sell[]" readonly="readonly" value="'+sell+'" id="'+item+'s" class="round  my_with" style="text-align:right;"></td><td><input type="text" name="stock[]" readonly="readonly" value="'+disc+'" id="'+item+'p" class="round  my_with" style="text-align:right;"></td><td><input type="text" name="jibi[]" readonly="readonly" value="'+total+'" id="'+item+'to" class="round  my_with" style="width: 120px;margin-left:20px;text-align:right;"><input type="hidden" name="total[]" id="'+item+'my_tot" value="'+main_total+'"></td><td><input type="button" value="" id="'+item+'" style="width:30px;border:none;height:30px;background:url(images/edit_new.png)" class="round" onclick="edit_stock_details(this.id)"></td><td><input type="button" value="" id="'+item+'" style="width:30px;border:none;height:30px;background:url(images/close_new.png)" class="round" onclick="reduce_balance("'+item+'");$(this).closest("tr").remove();"></td></tr>').fadeIn("slow").appendTo('#item_copy_final');

J'ai juste le bouton Supprimer qui ne fonctionne toujours pas.

le Onclick ne fonctionne pas:

Code :

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

onclick="reduce_balance("'+item+'");$(this).closest("tr").remove();"

[NoSmoking]

J'ai juste le bouton Supprimer qui ne fonctionne toujours pas.

as tu corrigé le problème d'ID en double, justement sur les boutons ?

Je te conseilles quand même la lecture de la et notamment Comment puis-je créer un nouvel élément du DOM ?

[doriginal]

Merci pour le lien.
En fait j'ai récup cette gestion de stock sur github: https://github.com/Posnic/POSNIC-1.02
Et je n'y connais rien en jquery, mais les fonctions proposées me conviennent pour ce que je veux faire.

j'ai essayé de changer les id sur les boutons mais aucun des boutons ne fonctionne, je pense que les id "item" sont la pour quelques chose.

[NoSmoking]

Si je reprend le code que tu nous a indiqué au post #5, le HTML généré est le suivant

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
<tr id="item" style="display: table-row;">
    <td>
        <label class="jibi007" id="itemroll">roll</label>
    </td>
    <td>
        <input type="hidden" id="itemid" value="item"><input type="text" readonly="readonly" class="round my_with" style="width: 150px" id="itemst" name="stock_name[]">
    </td>
    <td>
        <input type="text" style="text-align:right;" class="round my_with" id="itemq" "="" value="quty" readonly="readonly" name="quty[]">
    </td>
    <td>
        <input type="text" style="text-align:right;" class="round my_with" id="items" value="sell" readonly="readonly" name="sell[]">
    </td>
    <td>
        <input type="text" style="text-align:right;" class="round my_with" id="itemp" value="disc" readonly="readonly" name="stock[]">
    </td>
    <td>
        <input type="text" style="width: 120px;margin-left:20px;text-align:right;" class="round my_with" id="itemto" value="total" readonly="readonly" name="jibi[]"><input type="hidden" value="undefined" id="itemmy_tot" name="total[]">
    </td>
    <td>
        <input type="button" onclick="edit_stock_details(this.id)" class="round" style="width:30px;border:none;height:30px;background:url(images/edit_new.png)" id="item" value="">
    </td>
    <td>
        <input type="button" item");$(this).closest("tr").remove();"="" onclick="reduce_balance(" class="round" style="width:30px;border:none;height:30px;background:url(images/close_new.png)" id="item" value="">
    </td>
</tr>

certes j'ai utilisé des valeurs par défaut pour les variables mais le résultat est là ...CODE NON CONFORME..., regarde avec la coloration syntaxique ce qu'il en est.

[doriginal]

Ok merci, mais je ne vois pas plus ou est l'erreur.
Avec Firebug sous Firefox lorsque je clique sur le bouton supprimer, il affiche une erreur "SyntaxError: syntax error".

[NoSmoking]

Ok merci, mais je ne vois pas plus ou est l'erreur.

regarde cette ligne et observe sa syntaxe, c'est ce à quoi arrive jQuery avec la chaine que tu lui passes.

Code html :

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

<input type="button" item");$(this).closest("tr").remove();"="" onclick="reduce_balance(" class="round" style="width:30px;border:none;height:30px;background:url(images/close_new.png)" id="item" value="">

Avec Firebug sous Firefox lorsque je clique sur le bouton supprimer, il affiche une erreur "SyntaxError: syntax error".

c'est justement lié, ta ligne est mal formée.


Si tu ne veux pas utiliser la méthode de l'exemple 2 de la FAQ, simplifie toi la vie en écrivant ta chaine en plusieurs fois, cela n'en sera que plus lisible.

Il te faudra quand même être vigilant à l'utilisation des quotes simples et des quotes doubles, c'est le problème principale qui ressort de ton code.
exemple

Code :

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

1
2
3
var la_chaine = 'Bonjours vous!';                        // simple quote pour délimiter un chaine en javascript
    la_chaine = 'Je vous ai vu l\'autre jour';           // échappement de la simple quote contenu dans la chaine
    la_chaine = 'Je vous ai senti "Heureux" ce jour là'; // utilisation basique des doubles quotes

Ton code pourrait devenir un truc dans le style de une ligne par élément crée...

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
var cde  = '<tr id="'+item+'">';
    cde += '<td><label id="'+item+'roll" class="jibi007">'+roll+'</label>';
    cde += '</td><td>';
    cde += '<input type="hidden" value="'+item+'" id="'+item+'id">';
    cde += '<input type="text" name="stock_name[]" id="'+item+'st" style="width: 150px" class="round  my_with" readonly="readonly">';
    cde += '</td><td>';
    cde += '<input type="text" name="quty[]"  readonly="readonly" value="'+quty+'"  id="'+item+'q"  class="round my_with" style="text-align:right;">';
    cde += '</td><td>';
    cde += '<input type="text" name="sell[]"  readonly="readonly" value="'+sell+'"  id="'+item+'s"  class="round my_with" style="text-align:right;">';
    cde += '</td><td>';
    cde += '<input type="text" name="stock[]" readonly="readonly" value="'+disc+'"  id="'+item+'p"  class="round my_with" style="text-align:right;">';
    cde += '</td><td>';
    cde += '<input type="text" name="jibi[]"  readonly="readonly" value="'+total+'" id="'+item+'to" class="round my_with" style="width: 120px;margin-left:20px;text-align:right;">';
    cde += '<input type="hidden" name="total[]" id="'+item+'my_tot" value="'+main_total+'">';
    cde += '</td><td>';
    cde += '<input type="button" value="" id="'+item+'" style="width:30px;border:none;height:30px;background:url(images/edit_new.png)"  class="round" onclick="edit_stock_details(this.id)">';
    cde += '</td><td>';
    cde += '<input type="button" value="" id="'+item+'" style="width:30px;border:none;height:30px;background:url(images/close_new.png)" class="round" onclick="reduce_balance(\'' +item +'\');$(this).closest(\'tr\').remove();">';
    cde += '</td><td>';
    cde += '</tr>';
 
$( cde).fadeIn("slow").appendTo('#item_copy_final');

cela te permettra de voir que les ID ne sont pas uniques.
De plus il est inutile d'affecter des ID à des éléments que l'on ne souhaite pas atteindre, d'ailleurs il y a d'autre moyen de les atteindre.

On peut également voir qu'il subsiste des informations de style inline alors que tu utilises des class, cela est à simplifier.

[doriginal]

Merci vraiment pour tes réponses, je comprend un peu mieux.
J'ai modifié le code avec l'exemple que tu a mis mais malheureusement le bouton supprimer ne fonctionne toujours pas sous IE mais fonctionne sous Firefox.

MAJ: J'ai mis une alerte pour voir si il y avait quelque chose de mieux sous IE11 et l'alerte apparait seulement avec Firefox ou Chrome.

Code :

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

onclick="reduce_balance(\''+item+'\');alert(\'worked\');$(this).closest(\'tr\').remove();"

J'ai l'impression que pour IE quelque chose ne lui plais toujours pas.

MAJ2: j'ai essayé en enlevant les partie du code une par une et lorsque que j'enlève

Code :

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

reduce_balance(\''+item+'\');

la j'ai bien le message d'alerte sous IE11

Code :

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

onclick="alert(\'worked\');$(this).closest(\'tr\').remove();"

Ce serais donc

Code :

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

reduce_balance(\''+item+'\');

ou la fonction appelé qui poserais problème?

MAJ3: Si je met

Code :

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

reduce_balance(this.id)

au lieu de

Code :

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

reduce_balance(\''+item+'\');

ça fonctionne avec IE11.
Crois tu que ç a pose problème si c'est this.id au lieu de item?

[doriginal]

Après plusieurs tests en ayant remplacé item par this.id ça a l'air de fonctionner correctement, merci beaucoup pour ton aide.

Je me suis aperçu d'un autre bug dans IE11 mais pas FF ou Chrome.
Lorsque j'ajoute plus de un produit il y a un bug d'affichage dans le nom et le total. Le nom du deuxième produit s'inscrit dans le premier et le total du deuxième remplace le premier. (captures jointes)

Firefox:


IE11:

[NoSmoking]

Arrange toi pour que tes ID soient UNIQUES et qu'elles commencent par une lettre, cela n'est plus obligatoire en HTML5 mais ne connaissant pas le DOCTYPE de ta page.
- l'attribut ID en HTML4
- l'attribut ID en HTML5

[doriginal]

J'ai modifié les id pour qu'elles soient uniques.
Maintenant je n'ai plus le nom du produit qui s'affiche par contre le total de chaque ligne est bon maintenant.
Les boutons ne fonctionne plus depuis le changement des id

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
var cde  = '<tr id="ligne_produit">';
    cde += '<td><label id="ligne_roll" class="jibi007">'+roll+'</label>';
    cde += '</td>';
    cde += '<td><input type="text" name="stock_ref[]" id="ligne_ref" value="'+ref+'" style="width: 150px" class="round  my_with" readonly="readonly"></td>';
    cde += '<td>';
    cde += '<input type="hidden" value="'+item+'" id="ligne_id">';
    cde += '<input type="text" name="stock_name[]" id="ligne_st" style="width: 150px" class="round  my_with" readonly="readonly">';
    cde += '</td><td>';
    cde += '<input type="text" name="quty[]"  readonly="readonly" value="'+quty+'"  id="ligne_q"  class="round my_with" style="text-align:right;">';
    cde += '</td><td>';
    cde += '<input type="text" name="sell[]"  readonly="readonly" value="'+sell+'"  id="ligne_s"  class="round my_with" style="text-align:right;">';
    cde += '</td><td>';
    cde += '<input type="text" name="stock[]" readonly="readonly" value="'+disc+'"  id="ligne_p"  class="round my_with" style="text-align:right;">';
    cde += '</td><td>';
    cde += '<input type="text" name="jibi[]"  readonly="readonly" value="'+total+'" id="ligne_to" class="round my_with" style="width: 120px;margin-left:20px;text-align:right;">';
    cde += '<input type="hidden" name="total[]" id="ligne_my_tot" value="'+main_total+'">';
    cde += '</td><td>';
    cde += '<input type="button" value="" id="ligne_modif" style="width:30px;border:none;height:30px;background:url(images/edit_new.png)"  class="round" onclick="edit_stock_details(this.id)">';
    cde += '</td><td>';
    cde += '<input type="button" value="" id="ligne_supp" style="width:30px;border:none;height:30px;background:url(images/close_new.png)" class="round" onclick="reduce_balance(this.id);$(this).closest(\'tr\').remove();">';
    cde += '</td><td>';
    cde += '</tr>';

MAJ: Lorsque j'ai posté ce message, j'ai vu que +item+ était en bleu alors que les autres variables +quty+ .. sont en noir.
Du coup je me suis dit peut être que IE11, interprète mal la variable ou récupère item du formulaire. j'ai changé item par item 1 et ça a l'air de fonctionner. (j'ai remis le code a l'originale pour voir si c'est bien ça l'erreur)

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
         if(document.getElementById('edit_guid').value==""){
     if(document.getElementById('item').value!="" && document.getElementById('quty').value!="" &&  document.getElementById('total').value!="" ){
 
                    if(document.getElementById('quty').value!=0){
 
    ref=document.getElementById('reference').value;                    
    code=document.getElementById('item').value;
    quty=document.getElementById('quty').value;
    sell=document.getElementById('sell').value;
    disc=document.getElementById('stock').value;
    total=document.getElementById('total').value;
    item1=document.getElementById('guid').value;
    main_total=document.getElementById('posnic_total').value;
    roll=parseInt(document.getElementById('roll_no').value);
 
/*    $('<tr id="'+item+'"><td><label id="'+item+'roll" class="jibi007">'+roll+'</label></td><td><input type="text" name="stock_ref[]" id="'+item+'r" value="'+ref+'" style="width: 150px" class="round  my_with" readonly="readonly"></td><td><input type="hidden" value="'+item+'" id="'+item+'id"><input type="text" name="stock_name[]" id="'+item+'st" style="width: 150px" class="round  my_with" readonly="readonly"></td><td><input type="text" name="quty[]" readonly="readonly" value="'+quty+'"" id="'+item+'q" class="round  my_with" style="text-align:right;"></td><td><input type="text" name="sell[]" readonly="readonly" value="'+sell+'" id="'+item+'s" class="round  my_with" style="text-align:right;"></td><td><input type="text" name="stock[]" readonly="readonly" value="'+disc+'" id="'+item+'p" class="round  my_with" style="text-align:right;"></td><td><input type="text" name="jibi[]" readonly="readonly" value="'+total+'" id="'+item+'to" class="round  my_with" style="width: 120px;margin-left:20px;text-align:right;"><input type="hidden" name="total[]" id="'+item+'my_tot" value="'+main_total+'"></td><td><input type="button" value="" id="'+item+'" style="width:30px;border:none;height:30px;background:url(images/edit_new.png)" class="round" onclick="edit_stock_details(this.id)"></td><td><input type="button" value="" id="'+item+'" style="width:30px;border:none;height:30px;background:url(images/close_new.png)" class="round" onclick="reduce_balance(\''+item+'\');$(this).closest(\'tr\').remove();"></td></tr>').fadeIn("slow").appendTo('#item_copy_final');   */
    var cde  = '<tr id="'+item1+'">';
    cde += '<td><label id="'+item1+'roll" class="jibi007">'+roll+'</label>';
    cde += '</td>';
    cde += '<td><input type="text" name="stock_ref[]" id="'+item1+'r" value="'+ref+'" style="width: 150px" class="round  my_with" readonly="readonly"></td>';
    cde += '<td>';
    cde += '<input type="hidden" value="'+item1+'" id="'+item1+'id">';
    cde += '<input type="text" name="stock_name[]" id="'+item1+'st" style="width: 150px" class="round  my_with" readonly="readonly">';
    cde += '</td><td>';
    cde += '<input type="text" name="quty[]"  readonly="readonly" value="'+quty+'"  id="'+item1+'q"  class="round my_with" style="text-align:right;">';
    cde += '</td><td>';
    cde += '<input type="text" name="sell[]"  readonly="readonly" value="'+sell+'"  id="'+item1+'s"  class="round my_with" style="text-align:right;">';
    cde += '</td><td>';
    cde += '<input type="text" name="stock[]" readonly="readonly" value="'+disc+'"  id="'+item1+'p"  class="round my_with" style="text-align:right;">';
    cde += '</td><td>';
    cde += '<input type="text" name="jibi[]"  readonly="readonly" value="'+total+'" id="'+item1+'to" class="round my_with" style="width: 120px;margin-left:20px;text-align:right;">';
    cde += '<input type="hidden" name="total[]" id="'+item1+'my_tot" value="'+main_total+'">';
    cde += '</td><td>';
    cde += '<input type="button" value="" id="'+item1+'" style="width:30px;border:none;height:30px;background:url(images/edit_new.png)"  class="round" onclick="edit_stock_details(this.id)">';
    cde += '</td><td>';
    cde += '<input type="button" value="" id="'+item1+'" style="width:30px;border:none;height:30px;background:url(images/close_new.png)" class="round" onclick="reduce_balance(this.id);$(this).closest(\'tr\').remove();">';
    cde += '</td><td>';
    cde += '</tr>';
 
$( cde).fadeIn("slow").appendTo('#item_copy_final');
 
    document.getElementById('quty').value="";
    document.getElementById('sell').value="";
    document.getElementById('stock').value="";
    document.getElementById('roll_no').value=roll+1;
    document.getElementById('total').value="";
    document.getElementById('item').value="";
    document.getElementById('guid').value="";
    if(document.getElementById('grand_total').value==""){
        document.getElementById('grand_total').value=main_total;
    }else{

[NoSmoking]

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
if (document.getElementById('quty').value != 0) {
  ref = document.getElementById('reference').value;
  code = document.getElementById('item').value;
  quty = document.getElementById('quty').value;
  sell = document.getElementById('sell').value;
  disc = document.getElementById('stock').value;
  total = document.getElementById('total').value;
  item1 = document.getElementById('guid').value;
  main_total = document.getElementById('posnic_total').value;
  roll = parseInt(document.getElementById('roll_no').value);
  //...
}

et il est où le mot magique qui évite les problèmes, je parle de var ?

et ça a l'air de fonctionner. (j'ai remis le code a l'originale pour voir si c'est bien ça l'erreur)

et donc, bon or not ?

[doriginal]

Le code que tu a mis avec var, je l'ai bien mis, regarde mon poste. ça a corrigé une énorme partie du problème je t'en remercie.

Oui on peu clore le poste c'est résolu pour moi.

Merci beaucoup pour ton aide.