Sujet : Ajax : "stocker" les retours des requêtes

Bonjour à tous !
Je suis nouvelle sur ce forum et ravie de l'avoir découvert !!!

Dans un tableau, j'ai un champ dans lequel je saisis une référence qui déclenche un ajax pour me ramener d'autres éléments.

$(document).ready(function() {
  $('#loading').hide();
  $('input[name^=art]').live('change',function() {
     $.ajax({
     type: "POST",
     url: "ajaxEtoile.php",
     data: "art="+$(this).val()+"&lprod="+$("#lprod").val(),
     cache: false,
     beforeSend: function(){
         $("#loading").show();
         $("#tabprod").html('');
     },
    success: function(html){
         $("#tabprod").html(html);
     },
    error: function(html,err){
        $("#tabprod").html("Error:<br>"+err);
     },
     complete: function(html){
         $("#loading").hide();
     }
  });
    return false;
  });
});

Jusque là tout va bien.
Avec la fonction .append(), j'ajoute une ligne à mon tableau

// Déclaration de l'indice de ligne de tableau en variable globale
var indTab = 2;
  $('#add').click( function(){
    $('#tabprod').last().append('<tr><td><input type="text" readonly id="ligne'+ indTab +'" name="ligne'+ indTab +'" size="1" value="'+ indTab +'"></td>'
                                    +'<td><input type="text" id="art'+ indTab +'" name="art'+ indTab +'" size="16"></td>'
                                    +'<td><div id="divartsap'+ indTab +'" name="divartsap'+ indTab +'">&nbsp;</div></td>'
                                    +'<td><div id="lib'+ indTab +'" name="lib'+ indTab +'">&nbsp;</div></td>'
                                    +'<td><input type="text" id="size'+ indTab +'" name="size" size="5"></td>'
                                    +'<td><div id="mill'+ indTab +'" name="mill'+ indTab +'">&nbsp;</div></td>'
                                    +'<td><div id="lp'+ indTab +'" name="lp'+ indTab +'">&nbsp;</div></td>'
                                    +'<td><input type="text" id="qte'+ indTab +'" name="qte'+ indTab +'" size="5"></td>'
                                    +'<td><input type="text" id="date'+ indTab +'" name="date'+ indTab +'" size="10"></td></tr>');
// Incrémentation de l'indice de ligne de tableau
//alert("ligne="+indTab);
nbRow = $('#tabprod tr').length+1;
//alert('nbRow : '+nbRow);
indTab++;
 });

A chaque nouvelle ligne, dans le champ qui commence par "art" (art1 pour la première ligne, art2 pour la 2ème ligne...), je saisis une autre référence pour relancer la requête ajax.
Pas de problème non plus, sauf que le retour ajax écrase la ligne précédente !

Comment puis-je "stocker" et afficher le retour de la première requête sur la 1ère ligne de mon tableau et afficher le retour de la 2ème sur la 2ème ligne et ainsi de suite ?

N'hésitez pas à me dire si ce n'est pas clair.
Merci d'avance pour votre aide.
Trish74

Re : Ajax : "stocker" les retours des requêtes

Pourrais tu nous donner un peu plus de détails (notamment sur la page qui traite les données, celle appelée par l'ajax, pour qu'on voit sous quelle forme est le retour), et peux tu préciser quelle fonction ajax est appelée lors du changement de valeur d'un champ art* (j'ai supposée que c'etait le bout de code affiché au dessus, mais pas sur...).

Au passage, je ne pense pas que $('#tabprod').last() soit vraiment pertinent, car il signifie "Sélectionne le dernier élément qui possède l'ID tabprod", or, logiquement (et semantiquement), tu ne devrais avoir qu'un seul et unique element qui porte l'ID tabprod, le last est donc inutile...

Re : Ajax : "stocker" les retours des requêtes

En effet, c'est le bout de code que j'ai mis et qui appelle la page ajaxEtoile.php
La fonction renvoie un <tr>

$i=1;
while (ocifetchinto($res, &$ligne, OCI_ASSOC))
{
?>
  <tr>
    <td><input readonly type="text" name="ligne<?php  echo $i; ?>" id="ligne<?php  echo $i; ?>" size="1" value="<?php  echo $i; ?>"></td>
    <td><?php  echo $ligne[ARTICLECO]; ?></td>
    <td><?php  echo $ligne[SAPRESULT]; ?></td>
    <td><?php  echo $ligne[ARTICLELLB]; ?></td>
    <td><?php  echo $ligne[SIZECO]; ?></td>
    <td><?php  echo $ligne[MILLESIDI]; ?></td>
    <td><?php  echo $ligne[LIGNPRODCO]; ?></td>
    <td><input type="text" name="qte<?php  echo $i; ?>" id="qte<?php  echo $i; ?>" size="5" value=""></td>
    <td><input type="text" name="date<?php  echo $i; ?>" id="date<?php  echo $i; ?>" size="10" value=""></td>
  </tr>

  <?php 
  }
$i++;
}
?>

Merci de ton aide

Re : Ajax : "stocker" les retours des requêtes

Alors ça semble logique, quand tu fait appel a la fonction html(), ça remplace le contenu actuel par ce que tu lui donne.
Dans ton cas, il faut donc faire dans ta fonction success:

$("#tabprod").html($("#tabprod").html()+html);

C'est a dire que tu reprend tu passe a la fonction html, le contenu actuel suivi du retour de ta fonction (c'est confusant, parce que tu as appelé ta variable de retour html, donc ça fait beaucoup de html pour une seule ligne... smile )

Je pense que tu peux même débrouiller le truc avec un append (toujours dans ta fonction success):

$("#tabprod").append(html);

wink

Re : Ajax : "stocker" les retours des requêtes

pas mieux !
sad

j'ai essayé tes 2 propositions...

Pour que ce soit moins "confusing", je remplace "html" par "retour"

$(document).ready(function() {
  $('#loading').hide();
  $('input[name^=art]').live('change',function() {
     $.ajax({
     type: "POST",
     url: "ajaxEtoile.php",
     data: "art="+$(this).val()+"&lprod="+$("#lprod").val(),
     cache: false,
     beforeSend: function(){
         $("#loading").show();
         $("#tabprod").html('');
     },
    success: function(retour){
        $("#tabprod").append(retour);
     },
    error: function(retour,err){
        $("#tabprod").html("Error:<br>"+err);
     },
     complete: function(retour){
         $("#loading").hide();
     }
  });
    return false;
  });
});

Re : Ajax : "stocker" les retours des requêtes

tabprod c'est l'id de ton element table qui doit contenir les lignes de retour ajax ?

Re : Ajax : "stocker" les retours des requêtes

en fait, c'est l'id d'un tbody car sans cela, IE (navigateur imposé) pose problème.

Re : Ajax : "stocker" les retours des requêtes

Ca devrait fonctionner aussi.

On va déjà faire un premier test: Virer l'ajax et voir si l'ajout de ligne en fin de tableau fonctionne, donc:

$(document).ready(function() {
  $('#loading').hide();
  $('input[name^=art]').live('change',function() {
     $("#tabprod").append('<tr><td colspan="9">CA MARCHE</td><tr>');
  });
});

Et vérifie que quand tu modifie un de tes champs texte, ça rajoute bien une ligne au tableau a chaque fois avec "CA MARCHE" ecrit dedans.

Si ça ne fonctionne pas, c'est que le problème vient de la mise à jour du DOM et pas de l'ajax.

Tu peux aussi essayer comme ça (l'alternative que je t'avais donné avant):

$(document).ready(function() {
  $('#loading').hide();
  $('input[name^=art]').live('change',function() {
     $("#tabprod").html($("#tabprod").html() + '<tr><td colspan="9">CA MARCHE</td><tr>');
  });
});

Confirme me moi que ça fonctionne ou pas, on verra quelle méthode adopter ensuite smile

Re : Ajax : "stocker" les retours des requêtes

Ca marche ! à chaque saisie d'article, une ligne "CA MARCHE" s'ajoute au tableau.

10

Re : Ajax : "stocker" les retours des requêtes

$(document).ready(function() {
  $('#loading').hide();
  $('input[name^=art]').live('change',function() {
     $("#tabprod").append('<tr><td colspan="9">CA MARCHE</td><tr>');
  });
});

Re : Ajax : "stocker" les retours des requêtes

Désolé pour la réponse tardive...

Tu peux essayer en simplifiant ton appel ajax:

$(document).ready(function() {
    $('#loading').hide();
    $('input[name^=art]').live('change',function() {
        $("#loading").show();
        $.ajax({
            type: "POST",
            url: "ajaxEtoile.php",
            data: "art="+$(this).val()+"&lprod="+$("#lprod").val(),
            success: function(retour){
                $("#loading").hide();
                //$("#tabprod").append(retour);
                alert(retour);
            }
        });
    });
});

Est-ce que tu as bien tes retours qui s'affichent dans une boite de dialogue ?

12

Re : Ajax : "stocker" les retours des requêtes

Non, c'est moi qui suis désolée de ne pas arriver à trouver la solution toute seule !!!
En effet, chaque retour s'affiche dans une boite de dialogue.

Je voulais te l'envoyer sous forme d'image, mais je n'y parviens pas.
Si besoin, je t'enverrai le code affiché dans l'alerte.

Merci de ton aide !

Re : Ajax : "stocker" les retours des requêtes

Si la boite de dialogue s'affiche c'est bon signe smile
Essaye ça maintenant:

$(document).ready(function() {
    $('#loading').hide();
    $('input[name^=art]').live('change',function() {
        $("#loading").show();
        $.ajax({
            type: "POST",
            url: "ajaxEtoile.php",
            data: "art="+$(this).val()+"&lprod="+$("#lprod").val(),
            success: function(retour){
                $("#loading").hide();
                $("#tabprod").append(retour);
            }
        });
    });
});

14

Re : Ajax : "stocker" les retours des requêtes

Re : Ajax : "stocker" les retours des requêtes

Je n'ai pas très bien compris...
Tu veux ajouter une ligne sur quel évènement exactement ?

16

Re : Ajax : "stocker" les retours des requêtes

celui décrit sur mon 1er post

// Déclaration de l'indice de ligne de tableau en variable globale
var indTab = 2;
  $('#add').click( function(){
    $('#tabprod').last().append('<tr><td><input type="text" readonly id="ligne'+ indTab +'" name="ligne'+ indTab +'" size="1" value="'+ indTab +'"></td>'
                                    +'<td><input type="text" id="art'+ indTab +'" name="art'+ indTab +'" size="16"></td>'
                                    +'<td><div id="divartsap'+ indTab +'" name="divartsap'+ indTab +'">&nbsp;</div></td>'
                                    +'<td><div id="lib'+ indTab +'" name="lib'+ indTab +'">&nbsp;</div></td>'
                                    +'<td><input type="text" id="size'+ indTab +'" name="size" size="5"></td>'
                                    +'<td><div id="mill'+ indTab +'" name="mill'+ indTab +'">&nbsp;</div></td>'
                                    +'<td><div id="lp'+ indTab +'" name="lp'+ indTab +'">&nbsp;</div></td>'
                                    +'<td><input type="text" id="qte'+ indTab +'" name="qte'+ indTab +'" size="5"></td>'
                                    +'<td><input type="text" id="date'+ indTab +'" name="date'+ indTab +'" size="10"></td></tr>');
// Incrémentation de l'indice de ligne de tableau
//alert("ligne="+indTab);
nbRow = $('#tabprod tr').length+1;
//alert('nbRow : '+nbRow);
indTab++;
 });

en cliquant sur le "+" vert (Ajouter une ligne)

Mais ce n'est pas obligatoire si on arrive à ajouter une ligne vierge automatiquement et dont le n° de ligne s'incrémente.

Re : Ajax : "stocker" les retours des requêtes

Tu veux donc ajouter une ligne quand on clique sur le "+" vert, et que la ligne s'autoremplisse lorsque tu change la valeur du champ "Art." ?

18

Re : Ajax : "stocker" les retours des requêtes

oui, mais lorsque j'utilise cette fonction, les lignes précédemment "autoremplies" ne s'affichent pas, seule la ligne "en cours" s'affiche.
Je pense que c'est normal dans la mesure où je n'affiche pas "retour" contenu dans la fonction ajax, et c'est là que je bloque !

$(document).ready(function() {
    $('#loading').hide();
    $('input[name^=art]').live('change',function() {
        $("#loading").show();
        $.ajax({
            type: "POST",
            url: "ajaxEtoile.php",
            data: "art="+$(this).val()+"&lprod="+$("#lprod").val(),
            success: function(retour){
                $("#loading").hide();
                $("#tabprod").append(retour);
            }
        });
    });
}); 

Re : Ajax : "stocker" les retours des requêtes

Bin en fait "retour" tu l'affiche dans ton .append(), donc ça devrait etre ok.
Pour ce qui est de l'incrémentation, je pense qu'il va falloir mouliner a chaque fois toutes els lignes pour obtenir les bons numéros.

Donc en gros, tu fais un each sur sur les ligne, tu crée une variable juste avant ton each, que tu initialise à 1 et ensuite dans chaque each tu affiche ta variable puis tu l'incrémente de 1 a la fin de chaque passage.

20

Re : Ajax : "stocker" les retours des requêtes

Je fais déjà un while sur la page ajaxEtoile.php dans lequel j'incrémente la variable $i, mais comment stocker la valeur du dernier $i++ puisque à chaque passage, je réinitialise $i à 1 ?? roll désolée...

$i=1;
while (ocifetchinto($res, &$ligne, OCI_ASSOC))
{
   <tr class="tablesorter">
    <td><input readonly type="text" name="ligne<?php  echo $i; ?>" id="ligne<?php  echo $i; ?>" size="1" value="<?php  echo $i; ?>"></td>
    <td><?php  echo $ligne[ARTICLECO]; ?></td>
    <td><?php  echo $ligne[SAPRESULT]; ?></td>
    <td><?php  echo $ligne[ARTICLELLB]; ?></td>
    <td><?php  echo $ligne[SIZECO]; ?></td>
    <td><?php  echo $ligne[MILLESIDI]; ?></td>
    <td><?php  echo $ligne[LIGNPRODCO]; ?></td>
    <td><input type="text" name="qte<?php  echo $i; ?>" id="qte<?php  echo $i; ?>" size="10" value=""></td>
    <td><input type="text" name="date<?php  echo $i; ?>" id="date<?php  echo $i; ?>" size="10" value=""></td>
  </tr>  <?php
  }
$i++;
}

Le each, tu le mettrais sur quelle page ?

Re : Ajax : "stocker" les retours des requêtes

22

Re : Ajax : "stocker" les retours des requêtes

$("#loading").hide();
  $("input[name^=art]").live("change",function() {
      $("#loading").show();
      $.ajax({
          type: "POST",
          url: "ajaxEtoile.php",
          data: "art="+$(this).val()+"&lprod="+$("#lprod").val()+"&numero_ligne=2",
          success: function(retour){
              $("#loading").hide();
              $("#tabprod").append(retour);
              //alert(retour);
          }
      });
  });

23

Re : Ajax : "stocker" les retours des requêtes

Solution trouvée !!!

var cpt_row = 1;

$("#bt_go").click(function() {
  //$("#art_search").change(function() {
      $("#loading").show();
      $.ajax({
          type: "POST",
          url: "ajaxEtoile.php",
          data: "art="+$("#art_search").val()+"&lprod="+$("#lprod").val()+"&numero_ligne="+cpt_row,
          success: function(retour){
              $("#loading").hide();
              $("#tabprod").append(retour);
              //alert(retour);

              // Association d"un datepicker aux elements dont le nom commence par "date"
              $("input[name^=date]").datepicker({
                  minDate: 0 //set today as minimum selectable date
              }).unbind("blur");
              
              if(retour !="") cpt_row++;
              $("#art_search").val(default_txt);
          }
      });
  });

Merci encore MaîtreKabba pour l'aide précieuse !!!  wink  big_smile