Discussion :

[CocoFlouq]

Bonjour à tous,

J'ai créé une page afin de m'afficher un tableau basé sur un json et sur une entrée de l'utilisateur.

Mon problème est le suivant : lorsque je mets l'entrée utilisateur dans mon formulaire et que je la soumets (bouton go), celle-ci s'efface et n'est pas prise en compte.

Plus étonnant, si j'entre à nouveau exactement la même entrée, elle est prise en compte et mon tableau s'affiche sans aucun problème.

J'ai cherché à inverser les positions mais rien n'y fait...

Mon script :

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
function get_values(){
/*  for(i=0; i = document.getElementByID("mon_tableau").getElementsByTagName('tr').length; i++){
      document.getElementById("mon_tableau").deleteRow(i);
      console.log("Coucou");
  } (J'essaye ici d'effacer l'ancien tableau lors d'un nouveau clic mais ça ne marche pas pour le moment
*/
  var json = "http://****/get_json.php?callback=?";
  if(document.getElementById('Filtre_ti').value != ""){
    json = json + "&nom_TI=" + document.getElementById('Filtre_ti').value;
  }
  console.log(json);
  var titre_colindex = 0;
  $.getJSON(json ,function(data){
    newRow = document.getElementById('mon_tableau').getElementsByTagName('tbody')[0].insertRow(-1);
    $.each(data[0], function(index, valeur){ //Pour chaque colonne
      newCell = newRow.insertCell(titre_colindex);
      newCell.innerHTML = index;
      titre_colindex+=1;
    });
    $.each(data, function(i,ti){
       var newRow;
       var newCell;
            newRow = document.getElementById('mon_tableau').getElementsByTagName('tbody')[0].insertRow(-1);
            newCell = newRow.insertCell(0);
            newCell.innerHTML = ti.TI;
        var i_colindex=1;
            $.each(ti, function(index, valeur){
              if(index != "TI"){
                newCell = newRow.insertCell(i_colindex);
                newCell.innerHTML = valeur;
                i_colindex+=1;
              }
            });
          });  //End each
        console.log("End fct");
        });    //End getJSON
}

Mon formulaire et mon tableau de test :

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
<FORM action="#" class="tableau"> <!--Creation du formulaire pour l'entree utilisateur-->
    </br></br>Quel TI recherchez vous ?</br></br>
    <TABLE BORDER=0>
        <TR>
            <TD>Nom du TI</TD>
            <TD>
                <INPUT type="text" name="nom_TI" id="Filtre_ti">
            </TD>
        </TR>
        <TR>
            <TD COLSPAN=1>
                <button onclick="get_values()">GO</button>
            </TD>
        </TR>
    </TABLE></br>
    <table id="mon_tableau" border=1><tbody></tbody></table>
</FORM>

Avez vous des pistes ?

Merci,
Corentin.

[CocoFlouq]

Vous pouvez voir sur cette image que je n'arrive pas à rentrer dans la fonction lors du premier clic sur "go", mais que j'y rentre ensuite au deuxième clic si j'entre exactemement la même saisie...

[SpaceFrog]

Code :

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

 json = json + "&nom_TI=" + document.getElementById('Filtre_ti').value;

un json n'est pas une chaine get ...

[CocoFlouq]

Bonjour Spacefrog,

Avec cette ligne, je tente d'ajouter la condition saisie par l'utilisateur au json.
Ce n'est pas la bonne méthode ? Peux tu développer ?

Avec des console.log(), je me rends compte qu'au premier clic sur mon bouton "go", je ne rentre pas dans mon $.getJSON à l'intérieur de la fonction get_values() mais que j'y rentre au deuxième clic... Le problème proviendrait de mon affectation à la variable json ?

Merci de ton aide,
Corentin.

[SpaceFrog]

un json n'est pas un string ...
mais un objet

Code :

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

1
2
 
json[ "nom_TI"]= document.getElementById('Filtre_ti').value;

ou

Code :

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

1
2
 
json.nom_TI= document.getElementById('Filtre_ti').value;

[CocoFlouq]

Ce que je tente de faire ici est de transformer :
http://****/InfoTI/get_json.php?callback=?
en : http://****/InfoTI/get_json.php?callback=?&nom_TI=cbou (par exemple) afin que mon fichier get_json.php prenne en compte l'entrée utilisateur dans une requete SQL.

Comme tu le dis je n'utilise pas la bonne méthode, mais c'est le seul moyen que j'ai trouvé pour aller dans mon get_json sans changer de page.
Y a t il d'autres solutions ?