Rechercher valeur dans Table et affichage avec Ajax sans rafraîchissement de la page

**michgoarin** · 17/10/2015, 23h52

Bonjour à tous,

Adepte du PHP, je développe une solution de gestion de stock magasin. Lors de la rédaction d'un bon de commande, je souhaiterai pouvoir effectuer une recherche dans la base de données 'stock' à partir d'un input type text et d'un bouton 'rechercher'. Rien de plus simple me diriez vous !!! le problème : le rafraîchissement efface les éléments déjà saisi dans le bon le commande.
Je pense qu'il n'y a qu'une solution : Ajax !!!
Je souhaiterai charger la recherche suivante sans perte d'information. Genre InnerHTML...

Affichage du tableau de résultats :

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
 
<?php
// Connexion à la base de données
include("menu//chiens.php");
// $_POST['recherche_article'] serait la valeur postée.
// Recherche le nombre de résultats dans la base de données
$result = $bdd->query("SELECT count(REF_INTERNE) FROM `stock` WHERE REF_INTERNE LIKE '%".$_POST['recherche_article']."%' OR REFERENCE_ORIGINE LIKE '%".$_POST['recherche_article']."%' OR REFERENCE_MARQUE_PROPOSEE LIKE '%".$_POST['recherche_article']."%' OR DESIGNATION LIKE '%".$_POST['recherche_article']."%' ");
$row = $result->fetch();
$result->closeCursor();
$total = $row[0];
//=========================================
// si on a récupéré un resultat on l'affiche.
//=========================================
if($total){ 
$resultats = $bdd->query("SELECT*FROM `stock` WHERE REF_INTERNE LIKE '%".$_POST['recherche_article']."%' OR REFERENCE_ORIGINE LIKE '%".$_POST['recherche_article']."%' OR REFERENCE_MARQUE_PROPOSEE LIKE '%".$_POST['recherche_article']."%' OR DESIGNATION LIKE '%".$_POST['recherche_article']."%' ORDER BY REF_INTERNE ASC limit 0,20");
// début du tableau
echo ("<div id='tableau_resultats'>");
echo ("<table width='780'>\n");
echo ("<tr>");
echo ("<td colspan='11'><h1>Liste des articles trouvés...</h1></td>");
echo ("</tr>");
echo ("<tr>");
echo ("</tr>");
echo ("<tr>");
echo ("<td colspan='11'>Nbre référence(s) trouvée(s): <strong>".$total."</strong></td>");
echo ("</tr>");
echo ("<tr>");
echo ("<td width='25'><strong>ID</strong></td>");
echo ("<td width='35'><strong>REF VILLE</strong></td>");
echo ("<td width='160'><strong>DESIGNATION</strong></td>");
echo ("<td width='80'><strong>FOURNISSEUR</strong></td>");
echo ("<td width='45'><strong>REF FOURNISSEUR</strong></td>");
echo ("<td width='95'><strong>MARQUE</strong></td>");
echo ("<td width='35'><strong>STOCK</strong></td>");
echo ("<td width='40'><strong>PRIX (HT)</strong></td>");
echo ("<td width='30'><strong>GIS</strong></td>");
echo ("</tr>");
 
$i=0;
// lecture et affichage des résultats sur 2 colonnes
// On récupère tout le contenu de la table	
while($row = $resultats->fetch()){
	//Récupération des variables
	$id= $row['ID'];
	$ref_ville = $row['REF_INTERNE'];
	$designation = $row['DESIGNATION'];
	$fournisseur = $row['FOURNISSEUR'];
	$ref_fournisseur = $row['REFERENCE_MARQUE_PROPOSEE'];
	$marque = $row['MARQUE_PROPOSEE'];
	$stock = $row['STOCK'];
	$prix = $row['PRIX_UNITAIRE_HT'];
	$gisement = $row['GISEMENT'];
	echo ("<tr bgcolor='".( ($i++ % 2 == 0) ? '#dddddd' : '#eeeeee' )."'>");
	echo ("<td>".$id."</td>");
	echo ("<td>".$ref_ville."</td>");
	echo( "<td>".$designation."</td>");
	echo( "<td>".$fournisseur."</td>");
	echo( "<td>".$ref_fournisseur."</td>");
	echo( "<td>".$marque."</td>");
	echo( "<td>".$stock."</td>");
	echo( "<td>".$prix."</td>");
	echo( "<td>".$gisement."</td>");
	echo ('</tr>'."\n");
	echo ('</form>');
}
echo ('</table></div>'."\n");
$resultats->closeCursor();
?>

Je reste convaincu que tout est possible !!! Auriez vous une solution ?

**NoSmoking** · 18/10/2015, 17h07

Bonjour,

Je pense qu'il n'y a qu'une solution : Ajax !!!

On peut te conseiller au moins Comprendre les mécanismes d'AJAX

**ABCIWEB** · 18/10/2015, 22h36

Après suivant les cas tu peux utiliser jquery et le module autocomplete si tu veux gagner un peu de temps...

**michgoarin** · 19/10/2015, 19h02

Bonjour à tous,
Voici la solution que j'ai trouvée :
Le premier fichier est le formulaire bdc.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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
 
<!doctype html>
<html>
<head>
	<meta charset='utf-8'>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="styles.css">
	<link rel="icon" type="image/png" href="images/design/ico.png" /> 
	<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
	<script src="script.js"></script>
	<title>Bon de commande</title>
</head>
<body>
<script type="text/javascript">
	$(document).ready( function() {
	  // détection de la saisie dans le champ de recherche
	  $('#q').keyup( function(){
		$field = $(this);
		$('#results').html(''); // on vide les resultats
		$('#ajax-loader').remove(); // on retire le loader
 
		// on commence à traiter à partir du 2ème caractère saisie
		if( $field.val().length > 1 )
		{
		  // on envoie la valeur recherché en GET au fichier de traitement
		  $.ajax({
		type : 'GET', // envoi des données en GET ou POST
		url : 'ajax-search.php' , // url du fichier de traitement
		data : 'q='+$(this).val() , // données à envoyer en  GET ou POST
		beforeSend : function() { // traitements JS à faire AVANT l'envoi
			$field.after('<img src="ajax-loader.gif" alt="loader" id="ajax-loader" />'); // ajout d'un loader pour signifier l'action
		},
		success : function(data){ // traitements JS à faire APRES le retour d'ajax-search.php
			$('#ajax-loader').remove(); // on enleve le loader
			$('#results').html(data); // affichage des résultats dans le bloc
		}
		  });
		}		
	  });
	});
 
	</script>
<?php
include('include/entete.html');
?>
<div id='contenu'>
 
<!-- J'ai supprimer la partie bon de commande-->
 
<!-- Fin du bon de commande-->
 
 
 
	<!--debut du formulaire de recherche-->
	<form class="ajax" action="bdc.php" method="get">
		<p>
			<label for="q">Rechercher un article</label>
			<input type="text" name="q" id="q" />
		</p>
	</form>
	<!--fin du formulaire-->
 
	<!--preparation de l'affichage des resultats-->
	<div id="results"></div>
</div>
<?php
include('include/sidebar.html');
include('include/pied_de_page.html');
?>
</html>

le fichier de recherche :

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
 
<?php
// Connexion à la base de données
include("menu//chiens.php");
// $_POST['recherche_article'] serait la valeur postée.
// Recherche le nombre de résultats dans la base de données
$resultats = $bdd->query("SELECT count(REF_INTERNE) FROM `stock` WHERE REF_INTERNE LIKE '%". safe( $_GET['q'] ) ."%' OR REFERENCE_ORIGINE LIKE '%". safe( $_GET['q'] ) ."%' OR REFERENCE_MARQUE_PROPOSEE LIKE '%". safe( $_GET['q'] ) ."%' OR DESIGNATION LIKE '%". safe( $_GET['q'] ) ."%' ");
$row = $resultats->fetch();
$resultats->closeCursor();
$total = $row[0];
 
 
if($total){ 
$result = $bdd->query("SELECT*FROM `stock` WHERE REF_INTERNE LIKE '%". safe( $_GET['q'] ) ."%' OR REFERENCE_ORIGINE LIKE '%". safe( $_GET['q'] ) ."%' OR REFERENCE_MARQUE_PROPOSEE LIKE '%". safe( $_GET['q'] ) ."%' OR DESIGNATION LIKE '%". safe( $_GET['q'] ) ."%' ORDER BY REF_INTERNE ASC"); 
        $i=0;
        // début du tableau
        echo '<div class="article-result">';
        echo ("<table width='780'>\n");
        // La première ligne de présentation
        echo ("<tr>");
        echo ("<td colspan='11'>Nbre référence(s) trouvée(s): <strong>".$total."</strong></td>");
        echo ("</tr>");
        echo ("<tr>");
        echo ("<td style='width:55px; font-size:10px;'><strong>REF VILLE</strong></td>");
        echo ("<td style='width:290px; font-size:10px;'><strong>DESIGNATION</strong></td>");
        echo ("<td style='width:120px; font-size:10px;'><strong>FOURNISSEUR</strong></td>");
        echo ("<td style='width:90px; font-size:10px;'><strong>REF FOURNISSEUR</strong></td>");
        echo ("<td style='width:90px; font-size:10px;'><strong>MARQUE</strong></td>");
        echo ("<td style='width:45px; font-size:10px;'><strong>STOCK</strong></td>");
        echo ("<td style='width:45px; font-size:10px;'><strong>PRIX (HT)</strong></td>");
        echo ("<td style='width:45px; font-size:10px;'><strong>GIS</strong></td>");
        echo ("</tr>");
        // On récupère tout le contenu de la table    
        while($row = $result->fetch()){
                        //Récupération des variables
                        $ref_ville = $row['REF_INTERNE'];
                        $designation = $row['DESIGNATION'];
                        $fournisseur = $row['FOURNISSEUR'];
                        $ref_fournisseur = $row['REFERENCE_MARQUE_PROPOSEE'];
                        $marque = $row['MARQUE_PROPOSEE'];
                        $stock = $row['STOCK'];
                        $prix = $row['PRIX_UNITAIRE_HT'];
                        $gisement = $row['GISEMENT'];
                        echo ("<tr bgcolor='".( ($i++ % 2 == 0) ? '#dddddd' : '#eeeeee' )."'>");
                        echo ("<td style='width:55px; font-size:8px;'>".$ref_ville."</td>");
                        echo( "<td style='width:290px; font-size:8px;'>".$designation."</td>");
                        echo( "<td style='width:120px; font-size:8px;'>".$fournisseur."</td>");
                        echo( "<td style='width:90px; font-size:8px;'>".$ref_fournisseur."</td>");
                        echo( "<td style='width:90px; font-size:8px;'>".$marque."</td>");
                        echo( "<td style='width:45px; font-size:8px;'>".$stock."</td>");
                        echo( "<td style='width:45px; font-size:8px;'>".$prix."</td>");
                        echo( "<td style='width:45px; font-size:8px;'>".$gisement."</td>");
                        echo ('</tr>'."\n");
        }
echo ('</table></div>'."\n");
$result->closeCursor();
}
else {
        echo '<h3 style="text-align:center; margin:10px 0;">Pas de r&eacute;sultats pour cette recherche</h3>';
}
 
/*****
fonctions
*****/
function safe($var)
{
        $var = mysql_real_escape_string($var);
        $var = addcslashes($var, '%_');
        $var = trim($var);
        $var = htmlspecialchars($var);
        return $var;
}
?>