Formulaire/ json / Js : Input non pris en compte

**CocoFlouq** · 19/03/2015, 11h41

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** · 19/03/2015, 14h56

Nom : Problème.jpg
Affichages : 127
Taille : 85,4 Ko

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** · 19/03/2015, 16h00

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** · 19/03/2015, 16h13

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** · 19/03/2015, 16h14

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** · 19/03/2015, 16h31

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 ?

**headmax** · 19/03/2015, 17h00

Pour que ta page recoit ton parametre GET

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
  var json = "http://****/get_json.php";
  if(document.getElementById('Filtre_ti').value != ""){
     //ici tu passe ton paramètre GET {'nom_du_parametre' : sa_valeur}
     $.getJSON( json , {'callback' : '?', 'nom_TI' : document.getElementById('Filtre_ti').value}) 
         .done(function( json ) {
            var myjson = json; //json générer par ton php en retour attention bien mettre type content en json au niveau du header soit :
                                        // header('Content-type: application/json');
                                       //test traitements sur test data json
 
         }) .fail(function( jqxhr, textStatus, error ) {
            var err = textStatus + ", " + error;
            console.log( "Request Failed: " + err );
        })
     );
}

niveau php tu check ta variable GET ici nom_IT
check au niveau de générator de json

Code php :

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

1
2
3
4
5
6
7
8
9
10
header('Cache-Control: no-cache, must-revalidate');
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
header('Content-type: application/json');
 
$array_IT = array('billy','paul','jacques'...);
 
if(isset($_GET['nom_IT']) && in_array($array_IT)){
     //tes traitements
    echo json_encode($tableau_php_to_json);
}

Pour faire simple j'espère que ça t'aidera.
gl

**SpaceFrog** · 19/03/2015, 17h07

HAaaaaaaaa. dons dans ton code ... json c'est une url ??? ...

logique ...

Code :

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

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

le value peut il comporter des esapce ou caractère à échapper pour une URL ?

=>

Code :

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

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

**CocoFlouq** · 19/03/2015, 18h05

Merci beaucoup pour votre aide !

@SpaceFrog, j'ai en effet parfois des caractères à échapper, ta fonction va me servir.

@Headmax :

J'ai adapté ton code et je récupère désormais parfaitement le json dans ma page principale (je le vois désormais dans la console de chrome), chose que je n'arrivais pas à faire avant, merci !
Toutefois j'ai toujours le même problème : Mon tableau n'est affiché qu'au deuxième appel de ma fonction get_values() et ce uniquement lorsque ('Filtre_ti') est identique à la saisie précédente.
C'est rageant par ce que ça marche parfaitement au deuxième appel...

Je vous joint mon script et mon php si vous avez un peu de temps pour y jeter un oeil car là je sèche...

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
38
39
function get_values(){
 
  var titre_colindex = 0;
  var json = "http://****/get_json.php?callback=?";
 // if(document.getElementById('Filtre_ti').value!=""){
    $.getJSON( json , {'nom_TI' : (encodeURIComponent(document.getElementById('Filtre_ti').value})).done(function( json ) {
     var myjson = json;
     console.log(myjson);
     newRow = document.getElementById('mon_tableau').getElementsByTagName('tbody')[0].insertRow(-1);
 
      $.each(myjson[0], function(index, valeur){ //Pour chaque colonne
        newCell = newRow.insertCell(titre_colindex);
        newCell.innerHTML = index;
        titre_colindex+=1;
        console.log("premier for each");
      });
 
      $.each(myjson, 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;
        console.log("deuxieme");
 
           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
    });  //End getJSON
  //}
}

Fichier jet_json.php :

Code php :

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
<?php
 header('Cache-Control: no-cache, must-revalidate');
 header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
 header("content-type: application/json");
 
  $DB_HOST="ligh***.fr";
  $DB_PORT="***07";
  $DB_USER="ro***db_14";
  $DB_PASS="C0n****4t_6u4";
  $DB_NAME="i******ght";
 
 
     $pdo = new PDO('mysql:host='.$DB_HOST.';port='.$DB_PORT.';dbname='.$DB_NAME, $DB_USER, $DB_PASS); //Connexion base de donnees
     $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); //Affichage des erreurs
 
     $mon_tableau = array();
 
     if (isset($_GET['nom_TI'])){
 
        $ti = $_GET['nom_TI'];
 
        $sql = "
                SELECT ti.TI, ti.SYSTEM_TYPE, ti.SYSTEM_NAME, ti.ENTITY_IN_CHARGE
                FROM technical_item ti
                WHERE ti.TI LIKE '%$ti%';
                ";
 
        //La connexion est lancee et stockee dans l'objet $pdo
        $sth = $pdo->prepare($sql);
        $sth->bindvalue(':ti','%'.$ti.'%', PDO::PARAM_STR); //On selectionne en fonction de la saisie de l'utilisateur
        $sth->execute();
        $result = $sth->fetchall(PDO::FETCH_ASSOC);
 
        if($result){
          foreach ($result as $donnees){
          $mon_tableau[] = $donnees;
          } //end foreach
        }
    }//end if
 
    if(isset($_GET['callback'])){
       echo $_GET['callback']. '('. json_encode($mon_tableau) . ')';
    }
    else {
    echo  'callback('. json_encode($mon_tableau) . ')';
    }
?>

Merci de votre aide,
Corentin.

**headmax** · 19/03/2015, 18h12

Peut être un problème de génération du dom avant ta balise <script>

Essaye de mettre ta balise script celle qui contient ta function js en bas de ta page juste avant la fin du tag </body>

Autre modification :

Code php :

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
<?php
 header('Cache-Control: no-cache, must-revalidate');
 header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
 header("content-type: application/json");
 
  $DB_HOST="ligh***.fr";
  $DB_PORT="***07";
  $DB_USER="ro***db_14";
  $DB_PASS="C0n****4t_6u4";
  $DB_NAME="i******ght";
 
 
     $pdo = new PDO('mysql:host='.$DB_HOST.';port='.$DB_PORT.';dbname='.$DB_NAME, $DB_USER, $DB_PASS); //Connexion base de donnees
     $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); //Affichage des erreurs
 
     $mon_tableau = array();
 
     if (isset($_GET['nom_TI'])){
 
        $ti = $_GET['nom_TI'];
 
        $sql = "
                SELECT ti.TI, ti.SYSTEM_TYPE, ti.SYSTEM_NAME, ti.ENTITY_IN_CHARGE
                FROM technical_item ti
                WHERE ti.TI LIKE '%$ti%';
                ";
 
        //La connexion est lancee et stockee dans l'objet $pdo
        $sth = $pdo->prepare($sql);
        $sth->bindvalue(':ti','%'.$ti.'%', PDO::PARAM_STR); //On selectionne en fonction de la saisie de l'utilisateur
        $sth->execute();
        $result = $sth->fetchall(PDO::FETCH_ASSOC);
 
        if($result){
          foreach ($result as $donnees){
          $mon_tableau[] = $donnees;
          } //end foreach
        }
    }//end if
 
    if(isset($_GET['callback'])){
       //ici juste ceci est nécessaire (la function js callback peut tout a fait etre applé en retour de ce json dans .done(function(){ ... }) 
       echo json_encode($mon_tableau);
    }
    else {
    //ici juste ceci est nécessaire (la function js callback peut tout a fait etre applé en retour de ce json dans .done(function(){ ... }) 
   $mon_tableu = array('error',true);
    echo   json_encode($mon_tableau);
    }
?>

**CocoFlouq** · 20/03/2015, 11h52

J'ai effectué divers tests et modifications suivant tes conseils headmax, il m'est toujours impossible d'entrer dans $.getJSON de la fonction getvalues(), et désormais quelque soit le nombre de saisies identiques

Je vérifie pourtant que 'Filtre_ti' est cohérent, j'ai même essayé de supprimer la condition d'entrée mais rien n'y fait.

J'ai simplifié mes deux pages afin de les poster ici si vous avez encore la bonté d'y jeter un œil

La page principale :

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
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
 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script src="http://****/js/jQuery.js"></script>
        <link rel="stylesheet" href="http://****/style.css"/>
        <title>****</title>
        <link href='http://fonts.googleapis.com/css?family=Audiowide|Artifika' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <script type="text/javascript">
 
 
function get_values(){
 
  var titre_colindex = 0;
  var json = "http://****get_json.php?callback=?";
  console.log(document.getElementById('Filtre_ti').value);
  if(document.getElementById('Filtre_ti').value!=""){
    $.getJSON( json , {'nom_TI' : document.getElementById('Filtre_ti').value}).done(function( json ) {
     var myjson = json;
     console.log(myjson);
     newRow = document.getElementById('mon_tableau').getElementsByTagName('tbody')[0].insertRow(-1);
 
      $.each(myjson[0], function(index, valeur){ //Pour chaque colonne
        newCell = newRow.insertCell(titre_colindex);
        newCell.innerHTML = index;
        titre_colindex+=1;
        console.log("premier for each");
      });
 
      $.each(myjson, 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;
        console.log("deuxieme");
 
           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
    });  //End getJSON
  }
}
        </script>
    </head>
      <body>
        <div class="contenu">
 
          <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>
      </div>
    </body>
</html>

La page get_json.php :

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
 
<?php
 header('Cache-Control: no-cache, must-revalidate');
 header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
 header("content-type: application/json");
 
  $DB_HOST="****";
  $DB_PORT="****";
  $DB_USER="****";
  $DB_PASS="****";
  $DB_NAME="***";
 
 
     $pdo = new PDO('mysql:host='.$DB_HOST.';port='.$DB_PORT.';dbname='.$DB_NAME, $DB_USER, $DB_PASS); //Connexion base de donnees
     $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); //Affichage des erreurs
 
     $mon_tableau = array();
 
     if (isset($_GET['nom_TI'])){
 
        $ti = $_GET['nom_TI'];
 
        $sql = "
                SELECT ti.TI, ti.SYSTEM_TYPE, ti.SYSTEM_NAME, ti.ENTITY_IN_CHARGE
                FROM technical_item ti
                WHERE ti.TI LIKE '%$ti%';
                ";
 
        //La connexion est lancee et stockee dans l'objet $pdo
        $sth = $pdo->prepare($sql);
        $sth->bindvalue(':ti','%'.$ti.'%', PDO::PARAM_STR); //On selectionne en fonction de la saisie de l'utilisateur
        $sth->execute();
        $result = $sth->fetchall(PDO::FETCH_ASSOC);
 
        if($result){
          foreach ($result as $donnees){
          $mon_tableau[] = $donnees;
          } //end foreach
        }
    }//end if
 
    if(isset($_GET['callback'])){
       echo json_encode($mon_tableau);
    }
    else {
    $mon_tableau = array('error',true);
    echo  json_encode($mon_tableau);
    }
?>

Merci encore,
Corentin.

**headmax** · 20/03/2015, 14h02

Salut, il me faudrait ton schema json SVP sans ça je vois pas trop a quel niveau tu as ce problème.

Petit essaye :

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
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
 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script src="http://****/js/jQuery.js"></script>
        <link rel="stylesheet" href="http://****/style.css"/>
        <title>****</title>
        <link href='http://fonts.googleapis.com/css?family=Audiowide|Artifika' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    </head>
      <body>
        <div class="contenu">
 
          <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>
      </div>
        <script type="text/javascript">
 
 
function get_values(){
 
  var titre_colindex = 0;
  var json = "http://****get_json.php?callback=?";
  console.log(document.getElementById('Filtre_ti').value);
  if(document.getElementById('Filtre_ti').value!=""){
    $.getJSON( json , {'nom_TI' : document.getElementById('Filtre_ti').value}).done(function( json ) {
     var myjson = json;
     console.log(myjson);
     newRow = document.getElementById('mon_tableau').getElementsByTagName('tbody')[0].insertRow(-1);
 
      $.each(myjson[0], function(index, valeur){ //Pour chaque colonne
        newCell = newRow.insertCell(titre_colindex);
        newCell.innerHTML = index;
        titre_colindex+=1;
        console.log("premier for each");
      });
 
      $.each(myjson, 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;
        console.log("deuxieme");
 
           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
    });  //End getJSON
  }
}
        </script>
    </body>
</html>

**CocoFlouq** · 20/03/2015, 14h44

J'ai trouvé l'erreur...
Un simple problème au niveau du button qui était par défault sur un submit...

Code :

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

<button type="button" onclick="get_values();">GO</button>

La page était réactualisée à chaque clic sur le bouton...

Bon ça ne marche qu'au clic et pas encore avec la touche entrée mais c'est déjà ça

Merci encore headmax pour le temps que tu as passé sur mon problème !

Corentin.

Formulaire/ json / Js : Input non pris en compte

JavaScript

Discussions similaires

Partager

Partager