Forums des Zéros

20 novembre 2017 à 13:51:59

Bien le bonjour,

Me voici entrain d’apprendre le javascript l'ajax etc..

Et je bloque sur un petit point

Voici le problème j'ai deux formulaire :

Le premier cherche un serveur ou plusieurs avec une actualisation dynamique et le deuxième qui cherche un emplacement de serveur qui lui aussi et en actualisation dynamique.

Voila les deux marche très bien quand on les utilise séparément.

Mais j'aimerai les utilisées ensemble.

En gros:

filtre serveur : KWA

il me donne: KWAV02 emplacement1

KWAV02 emplacement2

KWAV02 emplacement3

KWAZ01 emplacement1

et si on ajoute le deuxieme filtre donc : filtreServeur :KWA + filtreEmplacement: emplacement1

ce qui me donnerai : KWAV02 emplacement1

KWAZ01 emplacement1

Le seul problème ces que je ne trouve pas comment sauvegarder le premier filtre quand je tape dans le deuxième et vise versa

Voila les code

<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Recherche outil de suivie</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
 </head>
 <body>
  <div class="container">
   <br />
   <h2 align="center">Outil de suivie</h2><br />
   <div class="form-group">
   <div class="input-group">
    <table class="table table bordered">
    <tr>
     <th>Serveur</th>
     <th>Emplacement</th>
    </tr>
	<tr> 
	<th> <input type="text" name="recherche_Serveur" id="recherche_Serveur" placeholder="Recherche serveur" class="form-control"  /> </th>
    	<th> <input type="text" name="recherche_Emplacement" id="recherche_Emplacement" placeholder="Recherche emplacement" class="form-control"  /> </th>
	</tr>
	</table>
  
   </div>
   </div>
   <br />
   <div id="result"></div>
  </div>
 </body>
</html>


<script>
$(document).ready(function(){

 load_data();

 function load_data(query)
 {
  $.ajax({
   url:"fetch.php",
   method:"POST",
   data:{query:query},
   success:function(data)
   {
    $('#result').html(data);
   }
  });
 }
 $('#recherche_Serveur').keyup(function(){
  var search = $(this).val();
  if(search != '')
  {
   load_data(search);
  }
  else
  {
   load_data();
  }
 });
 
 
 
 load_data1();

 function load_data1(query1)
 {
  $.ajax({
   url:"fetch.php",
   method:"POST",
   data:{query1:query1},
   success:function(data)
   {
    $('#result').html(data);
   }
  });
 }
 $('#recherche_Emplacement').keyup(function(){
  var search = $(this).val();
  if(search != '')
  {
   load_data1(search);
  }
  else
  {
   load_data1();
  }
 });

 
 
});
</script>

<?php
//fetch.php
$connect = mysqli_connect("localhost", "root", "", "testing");
$output = '';
if(!isset($_POST["query1"]) )
{
	
}
else 
{
	$emplacement = mysqli_real_escape_string($connect, $_POST["query1"]);
}
	
if(!isset($_POST["query"]) )
{
	
}
else{
	$search = mysqli_real_escape_string($connect, $_POST["query"]);
}

 if(isset($_POST["query1"]) || isset($_POST["query"]  ))
{
	
 $query = "
  SELECT * FROM tbl_customer 
  WHERE CustomerName LIKE '".$search."%'
   and Address LIKE '".$emplacement."%' 

 ";
}
else
{
 $query = "
  SELECT * FROM tbl_customer ORDER BY CustomerID
 ";
}
$result = mysqli_query($connect, $query);
if(mysqli_num_rows($result) > 0)
{
 $output .= '
  <div class="table-responsive">
   <table class="table table bordered">
    <tr>
     <th>nom Name</th>
     <th>Address</th>

astomerName"].'</td>
    <td>'.$row["nom"].'</td>
    <td>'.$row["adresse"].'</td>

   </tr>
  ';
 }
 echo $output;
}
else
{
 echo 'Data Not Found';
}

?>

De plus est-il possible de raccourcir dans les balise script le code ?

Merci d'avance ! :p

20 novembre 2017 à 14:41:55

Salut,

Le plus simple c'est d'inclure tes 2 champs dans un formulaire (donnons lui l'id recherche-form). Du coup, tu peux simplifier ton code ainsi :

var $form = $('form#recherche');

$form.find('input').on('input', function(e) {
  // cherche 'événement input' pour comprendre l'interet 
  // de l'utiliser à la place de keyup

  $.post({
    url: 'fetch.php',
    data: $form.serialize(), // on envoie les 2 input en meme temps
    dataType: 'json',
    success: function(data) {
      
    }
  });

});

Coté PHP, je te conseille de renvoyer les données au format JSON (avec json_encode) pour pouvoir les strucurer facilement.

20 novembre 2017 à 15:21:05

Merci pour la réponse rapide

Mais je n'arrive pas très bien a comprendre ces 2 lignes

var $form = $('form#recherche');

$form.find('input').on('input', function(e)

Sur la première ligne: form prend la valeur des deux filtres ?

Sur la deuxième ligne: le .find et le .on a quoi serve t'il ?

De plus comment différencier sur la page php le filtre serveur et le filtre emplacement ?

Avant $emplacement= mysqli_real_escape_string($connect, $_POST["query1"]);

$search= mysqli_real_escape_string($connect, $_POST["query"]);

maintenant ?

edit:

Donc j'ai modifier le code dans les balise script en rajoutant le code au dessus ou j'ai surement du oublie quelque chose.

<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Recherche outil de suivie</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
 </head>
 <body>
  <div class="container">
   <br />
   <h2 align="center">Outil de suivie</h2><br />
   <div class="form-group">
   <div class="input-group">
    <table class="table table bordered">
    <tr>
     <th>Serveur</th>
     <th>Emplacement</th>
    </tr>
    <tr>
    <th> <input type="text" name="recherche_Serveur" id="recherche_Serveur" placeholder="Recherche serveur" class="form-control"  /> </th>
        <th> <input type="text" name="recherche_Emplacement" id="recherche_Emplacement" placeholder="Recherche emplacement" class="form-control"  /> </th>
    </tr>
    </table>
   
   </div>
   </div>
   <br />
   <div id="result"></div>
  </div>
 </body>
</html>
 
 
<script>

var $form = $('form#recherche');
 
$form.find('input').on('input', function(e) {

 
  $.post({
    url: 'fetch.php',
    data: $form.serialize(), // on envoie les 2 input en meme temps
    dataType: 'json',
    success: function(data) {
       
    }
  });
 
});
</script>

Puis j'ai essayer de modifier le code php pour recevoir les donnée des filtre ou la aussi j'ai du faire quelque chose d’incorrect je précise que j'ai recherche ce que serialize() servait mais je n'est pas trouver comment l'utilisé correctement dans mon cas :/

 $search = mysqli_real_escape_string($connect, $_POST["unserialize(0)"]);
 $emplacement = mysqli_real_escape_string($connect, $_POST["unserialize(1)"]);

-
Edité par lois22 20 novembre 2017 à 17:09:10

20 novembre 2017 à 18:52:49

lois22 a écrit:

Mais je n'arrive pas très bien a comprendre ces 2 lignes

var $form = $('form#recherche');

$form.find('input').on('input', function(e)

Sur la première ligne: form prend la valeur des deux filtres ?

Je récupère l'objet jQuery qui correspond au formulaire (formulaire qu'il faut ajouter dans ton HTML et qui doit contenir tes inputs). Comme je fais appel plusieurs fois à cet élément, je le stocke dans une variable plutôt que de le recréer à chaque fois avec $() - question de performance.

Sur la deuxième ligne: le .find et le .on a quoi serve t'il ?

Je cherche les input dans ce formulaire. J'aurais pu écrire $('#recherche input') mais toujours pour une question de perfomanc, une recherche dans un petit formulaire prenra moins de temps que de chercher dans tout le document.

Quand tu écris .keyup(function() {...}) en fait c'est une méthode raccourcie pour on('keyup', function() {...}). L'événement input n'a pas de raccourci : .input() n'existe pas donc je dois utiliser la méthode on().

De plus comment différencier sur la page php le filtre serveur et le filtre emplacement ?

$form.serialise() renvoie la meme query string que celle qui aurait été envoyée si le formulaire avec été soumis. Cela veut dire que côté PHP, les 2 variables existent. Par contre les noms sont ceux qui sont dans les attributs name de tes input.

-
Edité par LCaba 20 novembre 2017 à 18:53:49

20 novembre 2017 à 21:46:17

Merci pour la précision des information je vois déjà plus clair

Mais quelque erreur persiste

Voici mon formulaire :

<form id = "recherche-form">
    <tr>
    <th> <input type="text" name="recherche_Serveur" id="recherche_Serveur" placeholder="Recherche serveur" class="form-control"  /> </th>
    <th> <input type="text" name="recherche_Emplacement" id="recherche_Emplacement" placeholder="Recherche emplacement" class="form-control"  /> </th>
    </tr>
</form>

Du coup je prend le code que tu ma donner precedement pour le mettre dans les balise script

En changeant var $form = $('from#recherche'); en var $form = $('recherche-form'); vu que j'ai changer le nom du formulaire

<script>

var $form = $('recherche-form');
 
$form.find('input').on('input', function(e) {
  
 
  $.post({
    url: 'fetch.php',
    data: $form.serialize(), // on envoie les 2 input en meme temps
    dataType: 'json',
    success: function(data) {
       
    }
  });
 
});
</script>

J'ai du oublié encore quelque chose puisque aucune information n'est transmise au serveur quand on touche au filtre aucun POST :/

-
Edité par lois22 20 novembre 2017 à 22:39:09

20 novembre 2017 à 22:11:01

Le sélecteur d'id doit commencer par un #

Et enlève les espaces superflus autour du = dans ton HTML

20 novembre 2017 à 22:40:54

Toujours pas x)

Quand sa veut pas sa veut pas

<form id="recherche-form">
    <tr>
    <th> <input type="text" name="recherche_Serveur" id="recherche_Serveur" placeholder="Recherche serveur" class="form-control"  /> </th>
    <th> <input type="text" name="recherche_Emplacement" id="recherche_Emplacement" placeholder="Recherche emplacement" class="form-control"  /> </th>
    </tr>
</form>

<script>

var $form = $('#recherche-form');
 
$form.find('input').on('input', function(e) {
 
  $.post({
    url: 'fetch.php',
    data: $form.serialize(), // on envoie les 2 input en meme temps
    dataType: 'json',
    success: function(data) {
       
    }
  });
 
});
</script>

20 novembre 2017 à 22:59:23

Je vois pas d'erreur. Tu vérifies ta requête dans l'onglet réseau de la console ?

20 novembre 2017 à 23:17:37

Tout à fait aucune requête et envoyer au serveur quand j‘écris dans les filtres

D'Après mes petits test le problème viendrai de la

$form.find('input').on('input', function(e) {

-
Edité par lois22 20 novembre 2017 à 23:34:44

20 novembre 2017 à 23:59:18

Non, en fait je viens de tester, je me suis simplement trompé dans l'utilisation de la fonction $.post(), je laisse regarder la doc jquery pour corriger

https://api.jquery.com/jquery.post/

21 novembre 2017 à 14:00:03

Salut !

Alors la j'ai essayer tellement de chose...

Voici la nouvelle fonction j'ai seulement ajouter POST mais il est initialisé par default donc bon

De plus j'ai l'impression que ces l’événement qui ne s'active pas...

  <script>

var $form = $('#recherche-form');
 
$form.find('input').on('input', function(e) {

 
  $.post({
	type: "POST",
	url: "fetch.php",
	data: $form.serialize(),
	success: function(data)
	    {
		    $('#result').html(data);
		},
	dataType: "jason"

        });
		
		

 
});
</script>

-
Edité par lois22 21 novembre 2017 à 14:06:52

21 novembre 2017 à 16:58:33

L'événément est déclenché, c'est pas le souci (t'as qu'à écrire console.log('test') à la ligne 6).

'json', pas 'jason'

et pour $.post, la doc est pourtant claire, tu l'as lu ?

$.post('fetch.php',  {
  // tous les autres paramètres sauf l-URL
});

// qui est équivalent à 

$.ajax({
  url: 'fetch.php',
  type: 'POST',
  // tous les autres paramètres sauf l'URL
});

-
Edité par LCaba 21 novembre 2017 à 16:58:55

21 novembre 2017 à 17:33:34

Oui je les bien relu 10 15 fois mais bon l'anglais sa aide pas trop x)

Voila le Post que j'ai modifier

 <script>
 
var $form = $('#recherche-form');
  
$form.find('input').on('input', function(e) {
 
  
  $.post("fetch.php",{ data: $form.serialize(), success: function(data) { $('#result').html(data); },dataType: "json" });
         
});
</script>

21 novembre 2017 à 18:06:32

Si tu utilise dataType:'json' alors les données reçues sont automatiquement parsés pour donner un objet ou un array javascript. Du coup, si ton PHP renvoie pas du json, tu vas avoir une erreur - pour le voir, tu peux ajouter dans tes paramètres ajax :

  success: function() {...},
  error: function(err) {
    console.log(err);
  }

21 novembre 2017 à 19:34:53

Merci je viens de modifié

Mais je n'est toujours aucun envoie...

21 novembre 2017 à 22:14:08

C'est peut-être parce que le HTML est mal formé. Le form (ou n'importe quelle autre élément) ne peux pas être imbriqué avec les autres éléments (tr th td...) du tableau. Soit il englobe toute la table, soit il est dans une cellule.

J'ai fait un test qui n'utilisait pas de tableaux et ça fonctionnait bien

22 novembre 2017 à 22:28:23

Bravo c’était bien sa le souci !

A celui-la je m'en souviendrai !!!

Maintenant je passe a la deuxième étape la page php

Donc voila ce que j'ai fait:

$emplacement = mysqli_real_escape_string($connect, $_POST["recherche_Emplacement"]);

Vu que tu m'avais expliqué que les variable reprenais le nom des names dans les inputs.

Qui bien sur ne fonctionne pas puisque dans le corps de la demande qui voici:

data=recherche_Serveur%3Dtestemplacement%26recherche_Emplacement%3Dtestemplacement&success=undefined&dataType=json

Ma question est donc comment récupérer les valeur dans le data sans prendre le tout ? Si possible une piste pas la réponse

23 novembre 2017 à 10:45:42

Je suis désolé, je me suis encore planté j'utilise pas $.ajax et ses alias même quand j'utilise jQuery. $.post() n'accepte pas d'objet en argument. L'utilisation correcte est la suivante :

$.post('fetch.php', $form.serialize(), function(data) {
  console.log(data);
}, 'json')

// ou alors plus long mais plus clair :

$.ajax({
  url: 'fetch.php', 
  method: 'post'
  dataType: 'json',
  data: $form.serialize(),
  success: function(data) {
    console.log(data);
  },
  error: function(xhr, err) {
    console.log('Erreur : ' + err);
  }
});

// ou alors plus court :

$.getJSON('fetch.php', $form.serialize(), function(data) {
  console.log(data);
});

Désolé de t'avoir induit en erreur en te faisant utiliser une autre fonction que $.ajax() qui a le mérite de lever toute ambiguité

23 novembre 2017 à 15:33:02

Parfait j'ai du modifier quelque petit chose dans le code ! Mais sa a fonctionner nickel ! Merci !

23 novembre 2017 à 15:41:05

marque ton sujet en résolu alors