ma requête AJAX de JS vers PHP ne fonctionne pas Résolu

Question

Bonjour, Je débute en programmation et je suis en train de faire mon premier projet et je bloque sur une requête AJAX. 1°) J' ai affiché sur une page web un tableau de ma base de données MySQL, ensuite je veux le filtrer en ne gardant que des éléments déterminés dans un formulaires multicritères html. J'ai testé la requête du PHP dans la table MySQL, ça marche. Je pense que le problème se situe dans la requête JS ou bien la réception dans le PHP. 2°) Il faut aussi que j'inverse le résultat de ma requête, car pour l'instant j' efface les éléménts que je veux garder, je n'ai pas encore réfléchi à ce problème. Merci par avance pour votre aide. Le formulaire, le JS et le PHP sont dans 3 fichiers différents, mais je pense que cela ne gêne pas. Le code ci-dessous Formulaire HTML :

* ** *** **** ***** ****** ******* ******** ********* ********** ***********CRITERES de SELECTION***********

CODE JAVA SCRIPT //BOUTON VALIDER RECHERCHE // reference www.w3schools.com -> JAVA SCRIPT / JSON PHP let boutonValiderRecherche = document.getElementById('idboutonValiderRecherche'); boutonValiderRecherche.addEventListener('click',validerRecherche) ;function validerRecherche(){ var xmlhttp ="", resultRecherche = "", x ="", idRow ="" ; xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { resultRecherche = JSON.parse(this.responseText); for (x in resultRecherche) { idRow = document.getElementById('x'); idRow.style.display = 'none'; } } }; xmlhttp.open("POST", "trouver.php", true);xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");xmlhttp.send(); } FICHIER PHP header("Content-Type: application/json; charset=UTF-8"); $_POST = json_decode($_POST["x"], false); $VR = []; $VR0=$VR1=$VR2=$VR3=$VR4=$VR5=$VR6=$VR7=$VR8=$VR9=$VR10=$VR11=$VR12= $VR13=$VR14=$VR15=$VR16=$VR17=$VR18=$VR19=$VR20=$VR21=$VR22=$VR23=""; $_POST["id"]=""; // à enlever lors des implementations dans recherche.php $_POST["RefMag"]=""; // à enlever $_POST["Caract2"]="";// à enlever function cleanData($dataToClean){ $dataToClean = trim($dataToClean); $dataToClean = stripslashes($dataToClean); $dataCleaned = htmlspecialchars($dataToClean); return $dataCleaned; } $VR0 = cleanData($_POST["id"]); $VR1 = cleanData($_POST["RefMag"]); $VR2 = cleanData($_POST["familleOutil"]); $VR3 = cleanData($_POST["SousFamille"]); $VR4 = cleanData($_POST["Matiere"]); $VR5 = cleanData($_POST["NbreZ"]); $VR6 = cleanData($_POST["Dia1"]); $VR7 = cleanData($_POST["Long1"]); $VR8 = cleanData($_POST["Dia2"]); $VR9 = cleanData($_POST["Dia3"]); $VR10 = cleanData($_POST["LongUtile"]); $VR11 = cleanData($_POST["LongTotale"]); $VR12 = cleanData($_POST["Caract1"]); $VR13 = cleanData($_POST["Caract2"]); $VR14 = cleanData($_POST["Fournisseur"]); $VR15 = cleanData($_POST["Ref_Fournisseur"]); $VR16 = cleanData($_POST["Prix"]); $VR17 = cleanData($_POST["QteMini"]); $VR18 = cleanData($_POST["CasEmploi1"]); $VR19 = cleanData($_POST["CasEmploi2"]); $VR20 = cleanData($_POST["CasEmploi3"]); $VR21 = cleanData($_POST["CasEmploi4"]); $VR22 = cleanData($_POST["CasEmploi5"]); $VR23 = cleanData($_POST["CasEmploi6"]); // colonne de la table $VR = array ("id"=>"$VR0", "REF_MAG"=>"$VR1", "FAMILLE_OUTIL"=>"$VR2", "SOUS_FAMILLE"=>"$VR3", "MATIERE_OUTIL"=>"$VR4", "NBRE_Z"=>"$VR5", "DIA_1"=>"$VR6", "LONGUEUR_1"=>"$VR7", "DIA_2"=>"$VR8", "DIA_3"=>"$VR9", "LONG_UTILE"=>"$VR10", "LONG_TOTALE"=>"$VR11", "CARACT_1"=>"$VR12", "CARACT_2"=>"$VR13", "FOURNISSEUR"=>"$VR14", "REF_FOURNISSEUR"=>"$VR15", "PRIX"=>"$VR16", "QTE_MINI"=>"$VR17", "CAS_EMPLOI_1"=>"$VR18", "CAS_EMPLOI_2"=>"$VR19", "CAS_EMPLOI_3"=>"$VR20", "CAS_EMPLOI_4"=>"$VR21", "CAS_EMPLOI_5"=>"$VR22", "CAS_EMPLOI_6"=>"$VR23"); $concat = "" ; foreach($VR as $VRn => $VRn_value){ if($VRn_value !== ""){ $concat = $concat. 'AND '.$VRn.' = \''.$VRn_value.'\' '; }; }; $condition = ltrim($concat,"AND"); // echo 'Concat = ' .$concat; //echo ' et Condition = '.$condition; /* *************************************************** *//* REQUETE *//* *************************************************** */ $serveur = "localhost"; $login = "root"; $pass = ""; try{ $connexion = new PDO("mysql:host=$serveur;dbname=hydro", $login, $pass); $connexion->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); $requete = $connexion->query('SELECT id FROM cutting_tools_01 WHERE' . $condition ); $resultat = $requete->fetchAll(PDO::FETCH_ASSOC); echo json_encode($resultat); } catch(PDOException $e){ echo 'ECHEC : ' .$e->getMessage(); } JC EDIT : remise en forme partielle du code...

jordane45 · Answer

Bonjour,

J'ai essayé de remettre un peu en forme ton code en y ajoutant des retours à la ligne et en utilisant les balises de code.
Explications disponibles ici :https://codes-sources.commentcamarche.net/faq/11288-poster-un-extrait-de-code.

Ensuite, pour déterminer d'où vient le souci, commence par afficher l'onglet "console" de ton navigateur internet et regarde ce qu'il t'affiche quand tu essaies de faire appel à ta fonction ajax.
Pense aussi à activer la gestion des erreurs PHP et la gestion des erreurs PDO;

Voici quelques conseils à suivre :
 https://forums.commentcamarche.net/forum/affich-37584947-php-gestion-des-erreurs-debogage-et-ecriture-du-code
https://forums.commentcamarche.net/forum/affich-37584941-php-pdo-gerer-les-erreurs

Reviens nous voir avec ton code modifié si ton souci persiste.

JC_8280 · Answer

Bonsoir Jordane, Je te renvoie mon code en 4 parties(4 fichiers) avec une meilleure présentation. Je n'avais pas compris comment le poster. Sauf erreur la detection des erreurs est activé. Je ne vois pas de message d'alarme dans ma console... Merci d'avance. OUTILS COUPANTS HYDRO CHATEAUROUX setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); $requete = $connexion->prepare(" SELECT*FROM cutting_tools_01"); $requete->execute(); // sans affichage $resultat = $requete->fetchAll(); } catch(PDOException $e){ echo 'Echec : ' .$e->getMessage(); } ?> '>

N° ordre	Réference magasin	Famille	Sous-famille	Matière	Nombre de dents	Ø1	Longueur 1	Ø2	Ø3	Longueur taillée	Longueur totale	Caractéristique 1	Caractéristique 2	Fournisseur	Référence fournisseur	Prix	Quantité à stocker	Cas emploi 1	Cas emploi 2	Cas emploi 3	Cas emploi 4	Cas emploi 5	Cas emploi 6

Nombre de references		valeur

Renseigner les champs pour le tri

FAMILLE OUTIL

SOUS FAMILLE

MATIERE OUTIL

NOMBRE DE DENTS OUTIL

DIAMETRE 1

LONGUEUR 1

DIAMETRE 2

DIAMETRE 3

LONGUEUR UTILE

LONGUEUR TOTALE

CARASTERISTIQUE 1

FOURNISSEUR

REFERENCE FOURNISSEUR

PRIX & QUANTITE MINI

CAS D'EMPLOI 1

CAS D'EMPLOI 2

CAS D'EMPLOI 3

CAS D'EMPLOI 4

CAS D'EMPLOI 5

CAS D'EMPLOI 6

// TRI DU TABLEAU PAR CLICK SUR UNE ENTETE DE COLONNE // Sources: https://www.pierre-giraud.com/trier-tableau-javascript/ // FONCTION DE TRIAGE DES LIGNES const compare = (ids, asc) => (row1, row2) => { const tdValue = (row, ids) => row.children[ids].textContent; const tri = (v1, v2) => v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2) ? v1 - v2 : v1.toString().localeCompare(v2); return tri(tdValue(asc ? row1 : row2, ids), tdValue(asc ? row2 : row1, ids)); }; // RECUPERATION DES VALEURS DU TABLEAU D'OUTILS const table_outils_originale = document.querySelector('tbody'); const entetes_colonnes_tableau = document.querySelectorAll('th'); const lignes_tableau = table_outils_originale.querySelectorAll('tr'); // ECOUTE DU CLICK SUR ENTETE DE COLONNE POUR TRI DU TABLEAU // ci-dessous, th est une variable qui aurait pu être nommée differement. entetes_colonnes_tableau.forEach(th => th.addEventListener('click', () => { let classe = Array.from(lignes_tableau).sort(compare(Array.from(entetes_colonnes_tableau).indexOf(th), this.asc = !this.asc)); classe.forEach(tr => table_outils_originale.appendChild(tr)); })); //---------*************----------************------------- // BOUTON CREER // //---------*************----------************------------- function fCreation(){ let page = document.body ; let formCreation = document.getElementById('idFormCreer') ; let formCreationDiv = document.getElementById('idDIVFCreer') ; formCreation.style.display = 'block' ; // NEUTRALISER LES 4 BOUTONS : CREER, RECHERCHER, MODIFIER, RESET. creation.removeEventListener('click',fCreation) ; recherche.removeEventListener('click',fRecherche) ; modification.removeEventListener('click',fModification) ; raz.removeEventListener('click',fReset) ; // BOUTON FERMER CREATION let boutonFermerCreation = document.getElementById('idboutonFermerCreation'); boutonFermerCreation.addEventListener('click',fermerCreation ) ; // FONCTION DU BOUTON FERMER DU FORMULAIRE CREER function fermerCreation (){ creation.addEventListener('click',fCreation) ; recherche.addEventListener('click',fRecherche) ; modification.addEventListener('click',fModification) ; raz.addEventListener('click',fReset) ; formCreation.style.display = 'none' } } //ECOUTE DU CLICK SUR BOUTON CREER let creation = document.getElementById('creer') ; creation.addEventListener('click',fCreation) ; //---------*************----------************------------- // BOUTON RECHERCHER // //---------*************----------************------------- function fRecherche(){ let page = document.body ; let formRecherche = document.getElementById('idFormRechercher') ; let formRechercheDiv = document.getElementById('idDIVFrechercher') ; formRecherche.style.display = 'block' ; // NEUTRALISER LES 4 BOUTONS : CREER, RECHERCHER, MODIFIER, RESET. creation.removeEventListener('click',fCreation) ; recherche.removeEventListener('click',fRecherche) ; modification.removeEventListener('click',fModification) ; raz.removeEventListener('click',fReset) ; //BOUTON FERMER RECHERCHE let boutonFermerRecherche = document.getElementById('idboutonFermerRecherche'); boutonFermerRecherche.addEventListener('click',fermerRecherche ) ; // FONCTION DU BOUTON FERMER DU FORMULAIRE RECHERCHE // Revalider les quatres boutons de l'entete - voir à utiliser attribut onclick de form function fermerRecherche (){ creation.addEventListener('click',fCreation) ; recherche.addEventListener('click',fRecherche) ; modification.addEventListener('click',fModification) ; raz.addEventListener('click',fReset) ; formRecherche.style.display = 'none'; } //BOUTON VALIDER RECHERCHE // reference www.w3schools.com -> JAVA SCRIPT / JSON PHP let boutonValiderRecherche = document.getElementById('idboutonValiderRecherche'); boutonValiderRecherche.addEventListener('click',validerRecherche) ; function validerRecherche(){ var xmlhttp ="", resultRecherche = "", x ="", idRow ="" ; xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { resultRecherche = JSON.parse(this.responseText); for (x in resultRecherche) { idRow = document.getElementById('x'); idRow.style.display = 'none'; } } }; xmlhttp.open("POST", "trouver.php", true); xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xmlhttp.send(); } }//fermeture fRecherche-finale //ECOUTE DU CLICK SUR BOUTON RECHERCHE let recherche = document.getElementById('chercher') ; recherche.addEventListener('click',fRecherche) ; //---------*************----------************------------- // BOUTON MODIFIER // //---------*************----------************------------- function fModification(){ document.getElementById('table_outils').style.marginTop = '75px' ; alert('Modifier une référence!!') ; } //ECOUTE DU CLICK SUR BOUTON MODIFIER let modification = document.getElementById('modifier') ; modification.addEventListener('click',fModification) ; // BOUTON RESET function fReset(){ alert('Reset tableau outils!!') ; } //ECOUTE DU CLICK SUR BOUTON RESET let raz = document.getElementById('reset') ; raz.addEventListener('click',fReset) ; "$VR0", "REF_MAG"=>"$VR1", "FAMILLE_OUTIL"=>"$VR2", "SOUS_FAMILLE"=>"$VR3", "MATIERE_OUTIL"=>"$VR4", "NBRE_Z"=>"$VR5", "DIA_1"=>"$VR6", "LONGUEUR_1"=>"$VR7", "DIA_2"=>"$VR8", "DIA_3"=>"$VR9", "LONG_UTILE"=>"$VR10", "LONG_TOTALE"=>"$VR11", "CARACT_1"=>"$VR12", "CARACT_2"=>"$VR13", "FOURNISSEUR"=>"$VR14", "REF_FOURNISSEUR"=>"$VR15", "PRIX"=>"$VR16", "QTE_MINI"=>"$VR17", "CAS_EMPLOI_1"=>"$VR18", "CAS_EMPLOI_2"=>"$VR19", "CAS_EMPLOI_3"=>"$VR20", "CAS_EMPLOI_4"=>"$VR21", "CAS_EMPLOI_5"=>"$VR22", "CAS_EMPLOI_6"=>"$VR23"); $concat = "" ; foreach($VR as $VRn => $VRn_value){ if($VRn_value !== ""){ $concat = $concat. 'AND '.$VRn.' = \''.$VRn_value.'\' '; }; }; $condition = ltrim($concat,"AND"); // echo 'Concat = ' .$concat; //echo ' et Condition = '.$condition; /* *************************************************** */ /* REQUETE */ /* *************************************************** */ require_once "cnxbdd.php"; try{ $connexion = new PDO("mysql:host=$serveur;dbname=hydro", $login, $pass); $connexion->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); $requete = $connexion->query('SELECT id FROM cutting_tools_01 WHERE' . $condition ); $resultat = $requete->fetchAll(PDO::FETCH_ASSOC); print_r ($resultat); } catch(PDOException $e){ echo 'ECHEC : ' .$e->getMessage(); }

JC_8280 · Answer

Bonjour Jordan 45 ,
Merci pour ce tuyau, et en effet, je vois une erreur 404, mais je ne comprends pas pourquoi il me met ça.

http://hydro/favicon.ico - qu'est-ce que c'est que ce favicon.ico?

Merci de ton retour.

jordane45 · Answer

Côté PHP, j'ai également revu un peu ton code
essaye le et montre nous le résultat dans la console. (pense à déplier, comme sur ma capture d'écran, les petites flêches qui se trouvent devant les ligne xmlhttprequest.. )

<?php
header("Content-Type: application/json; charset=UTF-8");

error_reporting(E_ALL);
ini_set('display_errors', TRUE);
ini_set('display_startup_errors', TRUE);

//$_POST = json_decode($_POST["x"], false); // c'est quoi t'est-ce pourquoi pour ????!!!
//--------------------------------------------------------------------------//
// fonctions diverses...
//--------------------------------------------------------------------------//
function cleanData($dataToClean=NULL){
	$dataToClean = !empty($dataToClean) ? trim($dataToClean) : ""; 
	$dataToClean = stripslashes($dataToClean);
	//$dataCleaned = htmlspecialchars($dataToClean);// Jamais pour le traitement en BDD.. seulement à l'affichage !
	return $dataCleaned;
}

//--------------------------------------------------------------------------//
//connexion à la bdd
//--------------------------------------------------------------------------//
require_once "cnxbdd.php";

//--------------------------------------------------------------------------//
// Variables ..
//--------------------------------------------------------------------------//
$VR = array();
$resultat = array();    
	
$VR0 = cleanData($_POST["id"]);                                  
$VR1 = cleanData($_POST["RefMag"]);
$VR2 = cleanData($_POST["familleOutil"]);
$VR3 = cleanData($_POST["SousFamille"]);
$VR4 = cleanData($_POST["Matiere"]);
$VR5 = cleanData($_POST["NbreZ"]);
$VR6 = cleanData($_POST["Dia1"]);
$VR7 = cleanData($_POST["Long1"]);
$VR8 = cleanData($_POST["Dia2"]);
$VR9 = cleanData($_POST["Dia3"]);
$VR10 = cleanData($_POST["LongUtile"]);
$VR11 = cleanData($_POST["LongTotale"]);
$VR12 = cleanData($_POST["Caract1"]);
$VR13 = cleanData($_POST["Caract2"]);
$VR14 = cleanData($_POST["Fournisseur"]);
$VR15 = cleanData($_POST["Ref_Fournisseur"]);
$VR16 = cleanData($_POST["Prix"]);
$VR17 = cleanData($_POST["QteMini"]);
$VR18 = cleanData($_POST["CasEmploi1"]);
$VR19 = cleanData($_POST["CasEmploi2"]);
$VR20 = cleanData($_POST["CasEmploi3"]);
$VR21 = cleanData($_POST["CasEmploi4"]);
$VR22 = cleanData($_POST["CasEmploi5"]);
$VR23 = cleanData($_POST["CasEmploi6"]); 
	
// colonne de la table
$VR = array ("id"=>$VR0, 
			"REF_MAG"=>$VR1, 
			"FAMILLE_OUTIL"=>$VR2,
			"SOUS_FAMILLE"=>$VR3,
			"MATIERE_OUTIL"=>$VR4, 
			"NBRE_Z"=>$VR5,
			"DIA_1"=>$VR6, 
			"LONGUEUR_1"=>$VR7, 
			"DIA_2"=>$VR8,
			"DIA_3"=>$VR9,
			"LONG_UTILE"=>$VR10,
			"LONG_TOTALE"=>$VR11, 
			"CARACT_1"=>$VR12,
			"CARACT_2"=>$VR13, 
			"FOURNISSEUR"=>$VR14,
			"REF_FOURNISSEUR"=>$VR15, 
			"PRIX"=>$VR16, 
			"QTE_MINI"=>$VR17,
			"CAS_EMPLOI_1"=>$VR18, 
			"CAS_EMPLOI_2"=>$VR19, 
			"CAS_EMPLOI_3"=>$VR20,
			"CAS_EMPLOI_4"=>$VR21, 
			"CAS_EMPLOI_5"=>$VR22, 
			"CAS_EMPLOI_6"=>$VR23
		);
			  
$concat = "" ; 
$datas = array();
foreach($VR as $VRn => $VRn_value){
	if($VRn_value !== ""){
	  $concat = $concat. " AND ".$VRn. " = :" .$VRn ;  
	  $datas[":" .$VRn] = $VRn_value;	
	};
};
$condition = ltrim($concat,"AND");

//--------------------------------------------------------------------------//
//  REQUETE                                       
//--------------------------------------------------------------------------//

$sql = 'SELECT id FROM cutting_tools_01 ';
$sql .= !empty($condition)? ' WHERE' . $condition : "";

try{             
	$requete = $connexion->prepare($sql);
	$requete->execute($datas);                                                                    
	$resultat = $requete->fetchAll(PDO::FETCH_ASSOC);            
}catch(PDOException $e){
	echo 'ECHEC  : ' .$e->getMessage();
}

//--------------------------------------------------------------------------//
//on renvoi la réponse au script ajax au format json
//--------------------------------------------------------------------------//
echo json_encode(array('result'=>$resultat,'sql'=>$sql,'datas'=>$datas);

JC_8280 · Answer

Salut Jordan45;

J'ai essayé ton code, toujours pas de réaction au niveau du navigateur.
Je joint ma capture écran de la console , ma je n' arrive pas à afficher les onglets paramètres et réponses comme sur la tienne. Comment fais tu?


J'ai aussi fait une modif dans ton retour de PHP sur le nom de la variable à retourner.
function cleanData($dataToClean=NULL){
	$dataToClean = !empty($dataToClean) ? trim($dataToClean) : ""; 
	$dataToClean = stripslashes($dataToClean);
	//$dataCleaned = htmlspecialchars($dataToClean);// Jamais pour le traitement en BDD.. seulement à l'affichage !
	return $dataToclean;
}

JC_8280 · Answer

Bien sur, je vous renvoie tout le projet: Hydro_01.php OUTILS COUPANTS HYDRO CHATEAUROUX setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); $requete = $connexion->prepare(" SELECT*FROM cutting_tools_01"); $requete->execute(); // sans affichage $resultat = $requete->fetchAll(); } catch(PDOException $e){ echo 'Echec : ' .$e->getMessage(); } ?> '>

N° ordre	Réference magasin	Famille	Sous-famille	Matière	Nombre de dents	Ø1	Longueur 1	Ø2	Ø3	Longueur taillée	Longueur totale	Caractéristique 1	Caractéristique 2	Fournisseur	Référence fournisseur	Prix	Quantité à stocker	Cas emploi 1	Cas emploi 2	Cas emploi 3	Cas emploi 4	Cas emploi 5	Cas emploi 6

Nombre de references		valeur

creation.php

Renseigner les informations.

Les informations ombrées sont obligatoires.

FAMILLE OUTIL

SOUS FAMILLE

MATIERE OUTIL

NOMBRE DE DENTS OUTIL

DIAMETRE 1

LONGUEUR 1

DIAMETRE 2

DIAMETRE 3

LONGUEUR UTILE

LONGUEUR TOTALE

CARASTERISTIQUE 1

FOURNISSEUR

REFERENCE FOURNISSEUR

PRIX & QUANTITE MINI

CAS D'EMPLOI 1

CAS D'EMPLOI 2

CAS D'EMPLOI 3

CAS D'EMPLOI 4

CAS D'EMPLOI 5

CAS D'EMPLOI 6

creer.php setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); $requete = $connexion->prepare( "INSERT INTO cutting_tools_01(REF_MAG,FAMILLE_OUTIL, SOUS_FAMILLE,MATIERE_OUTIL,NBRE_Z,DIA_1,LONGUEUR_1, DIA_2,DIA_3,LONG_UTILE,LONG_TOTALE,CARACT_1,CARACT_2, FOURNISSEUR,REF_FOURNISSEUR,PRIX,QTE_MINI,CAS_EMPLOI_1, CAS_EMPLOI_2,CAS_EMPLOI_3,CAS_EMPLOI_4,CAS_EMPLOI_5,CAS_EMPLOI_6) VALUES(:REF_MAG,:FAMILLE_OUTIL, :SOUS_FAMILLE,:MATIERE_OUTIL,:NBRE_Z,:DIA_1,:LONGUEUR_1, :DIA_2,:DIA_3,:LONG_UTILE,:LONG_TOTALE,:CARACT_1,:CARACT_2, :FOURNISSEUR,:REF_FOURNISSEUR,:PRIX,:QTE_MINI,:CAS_EMPLOI_1, :CAS_EMPLOI_2,:CAS_EMPLOI_3,:CAS_EMPLOI_4,:CAS_EMPLOI_5,:CAS_EMPLOI_6)" ); $requete->bindParam(':REF_MAG', $V1); $requete->bindParam(':FAMILLE_OUTIL', $V2); $requete->bindParam(':SOUS_FAMILLE', $V3); $requete->bindParam(':MATIERE_OUTIL', $V4); $requete->bindParam(':NBRE_Z', $V5); $requete->bindParam(':DIA_1', $V6); $requete->bindParam(':LONGUEUR_1', $V7); $requete->bindParam(':DIA_2', $V8); $requete->bindParam(':DIA_3', $V9); $requete->bindParam(':LONG_UTILE', $V10); $requete->bindParam(':LONG_TOTALE', $V11); $requete->bindParam(':CARACT_1', $V12); $requete->bindParam(':CARACT_2', $V13); $requete->bindParam(':FOURNISSEUR', $V14); $requete->bindParam(':REF_FOURNISSEUR', $V15); $requete->bindParam(':PRIX', $V16); $requete->bindParam(':QTE_MINI', $V17); $requete->bindParam(':CAS_EMPLOI_1', $V18); $requete->bindParam(':CAS_EMPLOI_2', $V19); $requete->bindParam(':CAS_EMPLOI_3', $V20); $requete->bindParam(':CAS_EMPLOI_4', $V21); $requete->bindParam(':CAS_EMPLOI_5', $V22); $requete->bindParam(':CAS_EMPLOI_6', $V23); //echo 'Cas d\' emploi 6 : '.$V23; $requete->execute(); $V0 = $connexion->lastInsertId(); //echo 'id V0=' .$V0; mkdir('C:/wamp64/www/HYDRO/DOCUMENTS_OUTILS/'.$V0,0777); //echo 'arret script'; echo ''; } catch(PDOException $e){ echo 'ECHEC : ' .$e->getMessage(); } $connexion = null; ?> // $newstr = filter_var($str, FILTER_SANITIZE_STRING); recherche.php

Renseigner les champs pour le tri

FAMILLE OUTIL

SOUS FAMILLE

MATIERE OUTIL

NOMBRE DE DENTS OUTIL

DIAMETRE 1

LONGUEUR 1

DIAMETRE 2

DIAMETRE 3

LONGUEUR UTILE

LONGUEUR TOTALE

CARASTERISTIQUE 1

FOURNISSEUR

REFERENCE FOURNISSEUR

PRIX & QUANTITE MINI

CAS D'EMPLOI 1

CAS D'EMPLOI 2

CAS D'EMPLOI 3

CAS D'EMPLOI 4

CAS D'EMPLOI 5

CAS D'EMPLOI 6

trouver.php $VR0, "REF_MAG"=>$VR1, "FAMILLE_OUTIL"=>$VR2, "SOUS_FAMILLE"=>$VR3, "MATIERE_OUTIL"=>$VR4, "NBRE_Z"=>$VR5, "DIA_1"=>$VR6, "LONGUEUR_1"=>$VR7, "DIA_2"=>$VR8, "DIA_3"=>$VR9, "LONG_UTILE"=>$VR10, "LONG_TOTALE"=>$VR11, "CARACT_1"=>$VR12, "CARACT_2"=>$VR13, "FOURNISSEUR"=>$VR14, "REF_FOURNISSEUR"=>$VR15, "PRIX"=>$VR16, "QTE_MINI"=>$VR17, "CAS_EMPLOI_1"=>$VR18, "CAS_EMPLOI_2"=>$VR19, "CAS_EMPLOI_3"=>$VR20, "CAS_EMPLOI_4"=>$VR21, "CAS_EMPLOI_5"=>$VR22, "CAS_EMPLOI_6"=>$VR23 ); $concat = "" ; $datas = array(); foreach($VR as $VRn => $VRn_value){ if($VRn_value !== ""){ $concat = $concat. " AND ".$VRn. " = :" .$VRn ; $datas[":" .$VRn] = $VRn_value; }; }; $condition = ltrim($concat,"AND"); //--------------------------------------------------------------------------// // REQUETE //--------------------------------------------------------------------------// $sql = 'SELECT id FROM cutting_tools_01 '; $sql .= !empty($condition)? ' WHERE' . $condition : ""; try{ $requete = $connexion->prepare($sql); $requete->execute($datas); $resultat = $requete->fetchAll(PDO::FETCH_ASSOC); }catch(PDOException $e){ echo 'ECHEC : ' .$e->getMessage(); } //--------------------------------------------------------------------------// //on renvoi la réponse au script ajax au format json //--------------------------------------------------------------------------// echo json_encode(array('result'=>$resultat,'sql'=>$sql,'datas'=>$datas); GESTION_OUTILS.js // TRI DU TABLEAU PAR CLICK SUR UNE ENTETE DE COLONNE // Sources: https://www.pierre-giraud.com/trier-tableau-javascript/ // FONCTION DE TRIAGE DES LIGNES const compare = (ids, asc) => (row1, row2) => { const tdValue = (row, ids) => row.children[ids].textContent; const tri = (v1, v2) => v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2) ? v1 - v2 : v1.toString().localeCompare(v2); return tri(tdValue(asc ? row1 : row2, ids), tdValue(asc ? row2 : row1, ids)); }; // RECUPERATION DES VALEURS DU TABLEAU D'OUTILS const table_outils_originale = document.querySelector('tbody'); const entetes_colonnes_tableau = document.querySelectorAll('th'); const lignes_tableau = table_outils_originale.querySelectorAll('tr'); // ECOUTE DU CLICK SUR ENTETE DE COLONNE POUR TRI DU TABLEAU // ci-dessous, th est une variable qui aurait pu être nommée differement. entetes_colonnes_tableau.forEach(th => th.addEventListener('click', () => { let classe = Array.from(lignes_tableau).sort(compare(Array.from(entetes_colonnes_tableau).indexOf(th), this.asc = !this.asc)); classe.forEach(tr => table_outils_originale.appendChild(tr)); })); //---------*************----------************------------- // BOUTON CREER // //---------*************----------************------------- function fCreation(){ let page = document.body ; let formCreation = document.getElementById('idFormCreer') ; let formCreationDiv = document.getElementById('idDIVFCreer') ; formCreation.style.display = 'block' ; // NEUTRALISER LES 4 BOUTONS : CREER, RECHERCHER, MODIFIER, RESET. creation.removeEventListener('click',fCreation) ; recherche.removeEventListener('click',fRecherche) ; modification.removeEventListener('click',fModification) ; raz.removeEventListener('click',fReset) ; } // BOUTON FERMER CREATION let boutonFermerCreation = document.getElementById('idboutonFermerCreation'); boutonFermerCreation.addEventListener('click',fermerCreation ) ; // FONCTION DU BOUTON FERMER DU FORMULAIRE CREER function fermerCreation (){ let formCreation2 = document.getElementById('idFormCreer') ; creation.addEventListener('click',fCreation) ; recherche.addEventListener('click',fRecherche) ; modification.addEventListener('click',fModification) ; raz.addEventListener('click',fReset) ; formCreation2.style.display = 'none' } //ECOUTE DU CLICK SUR BOUTON CREER let creation = document.getElementById('creer') ; creation.addEventListener('click',fCreation) ; //---------*************----------************------------- // BOUTON RECHERCHER // //---------*************----------************------------- function fRecherche(){ let page = document.body ; let formRecherche = document.getElementById('idFormRechercher') ; let formRechercheDiv = document.getElementById('idDIVFrechercher') ; formRecherche.style.display = 'block' ; // NEUTRALISER LES 4 BOUTONS : CREER, RECHERCHER, MODIFIER, RESET. creation.removeEventListener('click',fCreation) ; recherche.removeEventListener('click',fRecherche) ; modification.removeEventListener('click',fModification) ; raz.removeEventListener('click',fReset) ; } //BOUTON FERMER RECHERCHE let boutonFermerRecherche = document.getElementById('idboutonFermerRecherche'); boutonFermerRecherche.addEventListener('click',fermerRecherche ) ; // FONCTION DU BOUTON FERMER DU FORMULAIRE RECHERCHE // Revalider les quatres boutons de l'entete - voir à utiliser attribut onclick de form function fermerRecherche (){ let formRecherche2 = document.getElementById('idFormRechercher') ; creation.addEventListener('click',fCreation) ; recherche.addEventListener('click',fRecherche) ; modification.addEventListener('click',fModification) ; raz.addEventListener('click',fReset) ; formRecherche2.style.display = 'none'; } //BOUTON VALIDER RECHERCHE // reference www.w3schools.com -> JAVA SCRIPT / JSON PHP let boutonValiderRecherche = document.getElementById('idboutonValiderRecherche'); boutonValiderRecherche.addEventListener('click',validerRecherche) ; function validerRecherche(){ console.log("On entre dans la fonction validerRecherche"); var xmlhttp ="", resultRecherche = "", x ="", idRow ="" ; xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { console.log("Success",xmlhttp); resultRecherche = JSON.parse(this.responseText); for (x in resultRecherche) { idRow = document.getElementById('x'); idRow.style.display = 'none'; } } else { console.log(xmlhttp, xmlhttp.status); } }; xmlhttp.open("POST", "trouver.php", true); xmlhttp.onerror = function () { console.log(xmlhttp, xmlhttp.status); alert("Erreur ajax : Regarder la console pour plus de détails !"); }; xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xmlhttp.send(); } //ECOUTE DU CLICK SUR BOUTON RECHERCHE let recherche = document.getElementById('chercher') ; recherche.addEventListener('click',fRecherche) ; //---------*************----------************------------- // BOUTON MODIFIER // //---------*************----------************------------- function fModification(){ document.getElementById('table_outils').style.marginTop = '75px' ; alert('Modifier une référence!!') ; } //ECOUTE DU CLICK SUR BOUTON MODIFIER let modification = document.getElementById('modifier') ; modification.addEventListener('click',fModification) ; // BOUTON RESET function fReset(){ alert('Reset tableau outils!!') ; } //ECOUTE DU CLICK SUR BOUTON RESET let raz = document.getElementById('reset') ; raz.addEventListener('click',fReset) ; entete.php

BASE DE GESTION DES OUTILS COUPANTS

style.css body{ margin: 0px; padding: 0px; } h1{ text-align: center; float: none; color: rgb(85, 10, 160) ; width: 50% ; // background-color:#444d55; border: thick groove rgb(224,240,255); margin-left: 25%; } h3{ text-align: center; float: none; color: rgb(10,10,20); width: 50% ; // background-color: #444d55; border: thick groove rgb(10,240,10); margin-left: 25%; } .classButton{ //background: #444d55; } /* *************************************** */ /* LES 4 BOUTONS */ /* *************************************** */ .bouton_creer{ width: 200px; height: 40px; color: yellow; background-color: red; float: left; margin-bottom: 1px; margin-left: 2px; } .bouton_chercher{ width: 200px; height: 40px; color: yellow; background-color: blue; float: left; margin-bottom: 10px; } .bouton_modifier{ width: 200px; height: 40px; color: yellow; background-color: green; float: left; margin-bottom: 10px; } .bouton_reset{ width: 200px; height: 40px; font-weight: bolder; color: white; background-color: black; float: left; margin-bottom: 10px; } .classButton{ /* border: normal solid rgb(0,0,0); */ background-color: rgb(240,240,240); margin-top: 15px; padding: 5px; width: 100%; height: 40px; margin-left: 0px; } /* *************************************** */ /* FORMULAIRE & FENETRE DE CREATION */ /* *************************************** */ #idFormCreer{ display: none; border: 3px solid rgb(255,0,0); width: 1200px; background-color: rgb(255,0,10); padding-bottom: 10px; } .legende{ display: block; grid-template-columns: 1fr 1fr ; border: thin solid white; padding: 5px; margin-left: 10px; margin-top: 5px; margin-bottom: 5px; width: 560px; } #legende1{ display: inline; margin-left: 10px; color: rgb(255,255,255); font-size: large; } #legende2{ display: inline; margin-left: 1px; color: rgb(255,255,255); background-color: rgb(151,151,151); font-size: large; padding-left: 5px; padding-right: 5px; } .classFCreer{ background-color: rgba(255,155,200, 1); margin-left: 10px; margin-right: 10px; padding-top: 10px; } /* *************************************** */ /* INTERIEUR FORM CREATION */ /* *************************************** */ .classFCreer_P1{ display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 65px 65px 65px ; border: 3px solid rgb(102,0,255); padding: 10px ; margin: 10px ; margin-top: 0px; height: 200px; } .classChoixFamille{ display: block; background-color: rgba(10, 10, 220, 0.3); width: 80%; height: 55px; border: thin solid rgb(10,10,220); } #idLblCFamille{ display: block; text-align: center; margin-top: 5px; } #idSlctCFamille{ display: block; margin-left: 25px; margin-top: 5px; // margin-bottom: 5px; } .classChoix_S_Famille{ display: block; background-color: rgba(10, 10, 220, 0.3); width: 80%; height: 55px; border: thin solid rgb(10,10,220); } #idLblC_S_Famille{ display: block; text-align: center; margin-top: 5px; } #idSlctC_S_Famille{ display: block; margin-left: 10px; margin-top: 5px; margin-bottom: 5px; } .classChoixMatiere{ display: block; background-color: rgba(10, 10, 220, 0.3); width: 80%; height: 55px; border: thin solid rgb(10,10,220); } #idLblCMatiere{ text-align: center; display: block; margin-top: 5px; } #idSlctCMatiere{ display: block; margin-left: 25px; margin-top: 5px; } .classNbreZ{ display: block; background-color: rgba(10, 10, 220, 0.3); width: 80%; height: 55px; border: thin solid rgb(10,10,220); } #idLblCNbreZ{ text-align: center; display: block; margin-top: 5px; } #idInputNbreZ{ display: block; margin-left: 40px; margin-top: 5px; } .classDia1{ display: block; background-color: rgba(10, 10, 220, 0.3); width: 80%; margin-top: 5px; height: 55px; border: thin solid rgb(10,10,220); } #idLblCDia1{ text-align: center; display: block; margin-top: 5px; } #idInputDia1{ display: block; margin-left: 40px; margin-top: 5px; } .classLong1{ display: block; background-color: rgba(10, 10, 220, 0.3); width: 80%; margin-top: 5px; height: 55px; border: thin solid rgb(10,10,220); } #idLblCLong1{ text-align: center; display: block; margin-top: 5px; } #idInputLong1{ display: block; margin-left: 40px; margin-top: 5px; } .classDia2{ display: block; //background-color: rgba(10, 10, 220, 0.3); width: 80%; margin-top: 10px; height: 55px; border: thin solid rgb(10,10,220); } #idLblCDia2{ text-align: center; display: block; margin-top: 5px; } #idInputDia2{ display: block; margin-left: 40px; margin-top: 5px; } .classDia3{ display: block; //background-color: rgba(10, 10, 220, 0.3); width: 80%; margin-top: 10px; height: 55px; border: thin solid rgb(10,10,220); } #idLblCDia3{ text-align: center; display: block; margin-top: 5px; } #idInputDia3{ display: block; margin-left: 40px; margin-top: 5px; } .classLongUtile{ display: block; background-color: rgba(10, 10, 220, 0.3); width: 80%; margin-top: 10px; height: 55px; border: thin solid rgb(10,10,220); } #idLblCLongUtile{ display: block; text-align: center; margin-top: 5px; } #idInputLongUtile{ display: block; margin-left: 40px; margin-top: 5px; } .classLongTotale{ display: block; background-color: rgba(10, 10, 220, 0.3); width: 80%; margin-top: 10px; height: 55px; border: thin solid rgb(10,10,220); } #idLblCLongTotale{ display: block; text-align: center; margin-top: 5px; } #idInputLongTotale{ display: block; margin-left: 40px; margin-top: 5px; } .classCaract1{ display: block; //background-color: rgba(10, 10, 220, 0.3); width: 80%; margin-top: 10px; border: thin solid rgb(10,10,220); } #idLblCCaract1{ display: block; text-align: center; margin-top: 5px; } #idInputCaract1{ display: block; margin-left: 40px; margin-top: 5px; } .classFCreer_P2{ display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 75px ; border: 3px solid rgb(255,0,100); padding: 10px ; margin: 10px ; } .classFournisseur{ display: block; background-color: rgba(200,20,25,0.3); width: 80%; padding: 10px ; border: thin solid rgb(200,20,25); } #idLblCFournisseur{ display: block; text-align: center; margin-top: 5px; margin-bottom: 10px; } #idInputFournisseur{ display: block; margin-left: 75px; } .classRef_Fournisseur{ display: block; background-color: rgba(200,20,25,0.3); width: 80%; padding: 10px ; border: thin solid rgb(200,20,25); } #idLblCRef_Fournisseur{ display: block; text-align: center; margin-top: 5px; margin-bottom: 10px; } #idInputRef_Fournisseur{ display: block; margin-left: 75px; } .classPrix{ display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 10px ; //grid-auto-rows: minmax(auto,auto); background-color: rgba(200,20,25,0.3); //width: 100%; padding: 10px ; border: thin solid rgb(200,20,25); } #idLblCPrix_QteMini{ display: block; text-align: center; grid-column: 1 / 3; grid-row: 1; //margin-top: 5px; //margin-bottom: 10px; //max-width: 100%; } #idInputPrix{ display: block; grid-column: 1 / 2; grid-row: 2; // max-width: 40%; } #idInputQteMini{ display: block; grid-column: 2 / 3; grid-row: 2; // max-width: 40%; } .classFCreer_P3{ display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 50px 50px ; border: 3px solid rgb(20,100,20); padding: 20px ; margin: 10px ; height: 80px; } .classCasEmploi{ display: block; } #idInputCasEmploi1, #idInputCasEmploi2 , #idInputCasEmploi3 , #idInputCasEmploi4 , #idInputCasEmploi5 , #idInputCasEmploi6{ margin-left: 10px; //border: medium solid rgb(204,0,0); } /* *************************************** */ /* 3 BOUTONS DE CREATION */ /* *************************************** */ .boutonsCreation{ //border: thin solid black; margin-top: 10px; margin-left: 10px; margin-bottom: 10px; height: 45px; } #idboutonResetCreation{ background-color: rgb(255,115,0); font-size: x-large; margin-right: 10px; } #idboutonValiderCreation{ background-color: rgb(0,176,32); font-size: x-large; margin-right: 10px; } #idboutonFermerCreation{ background-color: rgb(255,51,102); font-size: x-large; margin-right: 10px; } /* *************************************** */ /* FORMULAIRE RECHERCHE */ /* *************************************** */ #idFormRechercher{ display: none; border: 3px solid rgb(0,0,255); width: 1200px; background-color: rgb(10,0,255); padding-bottom: 10px; } .legendeR{ display: block; grid-template-columns: 1fr ; border: thin solid white; padding: 5px; margin-left: 10px; margin-top: 5px; margin-bottom: 5px; width: 280px; } #legendeR1{ display: inline; margin-left: 10px; color: rgb(255,255,255); font-size: large; } /* #legendeR2{ display: inline; margin-left: 1px; color: rgb(255,255,255); background-color: rgb(151,151,151); font-size: large; padding-left: 5px; padding-right: 5px; } */ .classFRechercher{ background-color: rgba(155,155,255, 1); margin-left: 10px; margin-right: 10px; padding-top: 10px; } .classFRechercher_P1{ display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 65px 65px 65px ; border: 3px solid rgb(102,0,255); padding: 10px ; margin: 10px ; margin-top: 0px; height: 200px; } .classChoixFamilleR{ display: block; //background-color: rgba(10, 10, 220, 0.3); width: 80%; height: 55px; border: thin solid rgb(10,10,220); } #idLblCFamilleR{ display: block; text-align: center; margin-top: 5px; } #idSlctCFamilleR{ display: block; margin-left: 25px; margin-top: 5px; // margin-bottom: 5px; } .classChoix_S_FamilleR{ display: block; //background-color: rgba(10, 10, 220, 0.3); width: 80%; height: 55px; border: thin solid rgb(10,10,220); } #idLblC_S_FamilleR{ display: block; text-align: center; margin-top: 5px; } #idSlctC_S_FamilleR{ display: block; margin-left: 10px; margin-top: 5px; margin-bottom: 5px; } .classChoixMatiereR{ display: block; //background-color: rgba(10, 10, 220, 0.3); width: 80%; height: 55px; border: thin solid rgb(10,10,220); } #idLblCMatiereR{ text-align: center; display: block; margin-top: 5px; } #idSlctCMatiereR{ display: block; margin-left: 25px; margin-top: 5px; } .classNbreZR{ display: none; //background-color: rgba(10, 10, 220, 0.3); width: 80%; height: 55px; border: thin solid rgb(10,10,220); } #idLblCNbreZR{ text-align: center; display: block; margin-top: 5px; } #idInputNbreZR{ display: block; margin-left: 40px; margin-top: 5px; } .classDia1R{ display: block; //background-color: rgba(10, 10, 220, 0.3); width: 80%; margin-top: 5px; height: 55px; border: thin solid rgb(10,10,220); } #idLblCDia1R{ text-align: center; display: block; margin-top: 5px; } #idInputDia1R{ display: block; margin-left: 40px; margin-top: 5px; } .classLong1R{ display: none; //background-color: rgba(10, 10, 220, 0.3); width: 80%; margin-top: 5px; height: 55px; border: thin solid rgb(10,10,220); } #idLblCLong1R{ text-align: center; display: block; margin-top: 5px; } #idInputLong1R{ display: block; margin-left: 40px; margin-top: 5px; } .classDia2R{ display: block; //background-color: rgba(10, 10, 220, 0.3); width: 80%; margin-top: 10px; height: 55px; border: thin solid rgb(10,10,220); } #idLblCDia2R{ text-align: center; display: block; margin-top: 5px; } #idInputDia2R{ display: block; margin-left: 40px; margin-top: 5px; } .classDia3R{ display: none; //background-color: rgba(10, 10, 220, 0.3); width: 80%; margin-top: 10px; height: 55px; border: thin solid rgb(10,10,220); } #idLblCDia3R{ text-align: center; display: block; margin-top: 5px; } #idInputDia3R{ display: block; margin-left: 40px; margin-top: 5px; } .classLongUtileR{ display: block; //background-color: rgba(10, 10, 220, 0.3); width: 80%; margin-top: 10px; height: 55px; border: thin solid rgb(10,10,220); } #idLblCLongUtileR{ display: block; text-align: center; margin-top: 5px; } #idInputLongUtileR{ display: block; margin-left: 40px; margin-top: 5px; } .classLongTotaleR{ display: none; //background-color: rgba(10, 10, 220, 0.3); width: 80%; margin-top: 10px; height: 55px; border: thin solid rgb(10,10,220); } #idLblCLongTotaleR{ display: block; text-align: center; margin-top: 5px; } #idInputLongTotaleR{ display: block; margin-left: 40px; margin-top: 5px; } .classCaract1R{ display: block; //background-color: rgba(10, 10, 220, 0.3); width: 80%; margin-top: 10px; border: thin solid rgb(10,10,220); } #idLblCCaract1R{ display: block; text-align: center; margin-top: 5px; } #idInputCaract1R{ display: block; margin-left: 40px; margin-top: 5px; } .classFRechercher_P2{ display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 75px ; border: 3px solid rgb(255,0,100); padding: 10px ; margin: 10px ; } .classFournisseurR{ display: block; //background-color: rgba(200,20,25,0.3); width: 80%; padding: 10px ; border: thin solid rgb(200,20,25); } #idLblCFournisseurR{ display: block; text-align: center; margin-top: 5px; margin-bottom: 10px; } #idInputFournisseurR{ display: block; margin-left: 75px; } .classRef_FournisseurR{ display: block; //background-color: rgba(200,20,25,0.3); width: 80%; padding: 10px ; border: thin solid rgb(200,20,25); } #idLblCRef_FournisseurR{ display: block; text-align: center; margin-top: 5px; margin-bottom: 10px; } #idInputRef_FournisseurR{ display: block; margin-left: 75px; } .classPrixR{ display: none; grid-template-columns: repeat(2, 1fr); grid-gap: 10px ; //grid-auto-rows: minmax(auto,auto); //background-color: rgba(200,20,25,0.3); //width: 100%; padding: 10px ; border: thin solid rgb(200,20,25); } #idLblCPrix_QteMiniR{ display: block; text-align: center; grid-column: 1 / 3; grid-row: 1; //margin-top: 5px; //margin-bottom: 10px; //max-width: 100%; } #idInputPrixR{ display: block; grid-column: 1 / 2; grid-row: 2; // max-width: 40%; } #idInputQteMiniR{ display: block; grid-column: 2 / 3; grid-row: 2; // max-width: 40%; } .classFRechercher_P3{ display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 50px 50px ; border: 3px solid rgb(20,100,20); padding: 20px ; margin: 10px ; height: 80px; } .classCasEmploiR{ display: block; } #idInputCasEmploi1R, #idInputCasEmploi2R{ margin-left: 10px; //border: medium solid rgb(204,0,0); } #idInputCasEmploi3R, #idLblCCasEmploi3R, #idInputCasEmploi4R, #idLblCCasEmploi4R, #idInputCasEmploi5R, #idLblCCasEmploi5R ,#idInputCasEmploi6R, #idLblCCasEmploi6R{ display: none; margin-left: 10px; //border: medium solid rgb(204,0,0); } /* *************************************** */ /* 3 BOUTONS DE RECHERCHE */ /* *************************************** */ .boutonsRecherche{ //border: thin solid black; margin-top: 10px; margin-left: 10px; margin-bottom: 10px; height: 45px; } #idboutonResetRecherche{ background-color: rgb(255,115,0); font-size: x-large; margin-right: 10px; } #idboutonValiderRecherche{ background-color: rgb(0,176,32); font-size: x-large; margin-right: 10px; } #idboutonFermerRecherche{ background-color: rgb(255,51,102); font-size: x-large; margin-right: 10px; } /* *************************************** */ /* TABLE OUTILS */ /* *************************************** */ table{ text-align: center; margin-top: 10px; border : solid green 2px; border-collapse: separate; } th,td{ margin: 0px; padding: 0px 4px; border: 1px solid black; } th{ background-color: rgb(48,127,208); } tr:nth-child(even) { background-color: rgba(0,192,64, 0.5); }

JC_8280 · Answer

Si je fais ça, les boutons ne fonctionnent plus, le lien est cassé.

JC_8280 · Answer

Toujours rien, pas de changement dans le navigateur.
Ci joint capture écran.

JC_8280 · Answer

J'ai rajouté des consoles.log ailleurs dans le JS. Ils apparaissent dans la console du navigateur.
Il n'y que dans l'appel de l' AJAX qu'il n'apparaissent pas.

JC_8280 · Answer

Bonjour Jordan, ok, j'ai trouvé le problème avec le bouton , maintenant on rentre bien dans la fonction, j'ai une erreur avec le json . J'ai refait le bouton valider: il manquait la destination pour le formulaire Recherche : action="":

JC_8280 · Answer

Ici la réponse avec readyState = 4, mais j'arrive pas à tout exporter. Success XMLHttpRequest { onreadystatechange: onreadystatechange(), readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, responseURL: "http://hydro/trouver.php", status: 200, statusText: "OK", responseType: "", response: "

( ! ) Notice: Undefined index: id in C:\wamp64\www\HYDRO\trouver.php on line 32
Call Stack
#	Time	Memory	Function	Location
1	0.0005	407024	{main}( )	...\trouver.php:0

jordane45 · Answer

Voici un début de correction

<?php
header("Content-Type: application/json; charset=UTF-8");

error_reporting(E_ALL);
ini_set('display_errors', TRUE);
ini_set('display_startup_errors', TRUE);

//$_POST = json_decode($_POST["x"], false); // c'est quoi t'est-ce pourquoi pour ????!!!
//--------------------------------------------------------------------------//
// fonctions diverses...
//--------------------------------------------------------------------------//
function cleanDataPOST($dataToClean=NULL,$defaultValue=""){
	$result = !empty($_POST[$dataToClean]) ? trim($_POST[$dataToClean]) : $defaultValue; 
	$result = stripslashes($result);
	return $result;
}

//--------------------------------------------------------------------------//
//connexion à la bdd
//--------------------------------------------------------------------------//
require_once "cnxbdd.php";

//--------------------------------------------------------------------------//
// Variables ..
//--------------------------------------------------------------------------//
$VR = array();
$resultat = array();    
$VR0 = cleanDataPOST("id");                                  
$VR1 = cleanDataPOST("RefMag");
$VR2 = cleanDataPOST("familleOutil");
$VR3 = cleanDataPOST("SousFamille");
$VR4 = cleanDataPOST("Matiere");
$VR5 = cleanDataPOST("NbreZ");
$VR6 = cleanDataPOST("Dia1");
$VR7 = cleanDataPOST("Long1");
$VR8 = cleanDataPOST("Dia2");
$VR9 = cleanDataPOST("Dia3");
$VR10 = cleanDataPOST("LongUtile");
$VR11 = cleanDataPOST("LongTotale");
$VR12 = cleanDataPOST("Caract1");
$VR13 = cleanDataPOST("Caract2");
$VR14 = cleanDataPOST("Fournisseur");
$VR15 = cleanDataPOST("Ref_Fournisseur");
$VR16 = cleanDataPOST("Prix");
$VR17 = cleanDataPOST("QteMini");
$VR18 = cleanDataPOST("CasEmploi1");
$VR19 = cleanDataPOST("CasEmploi2");
$VR20 = cleanDataPOST("CasEmploi3");
$VR21 = cleanDataPOST("CasEmploi4");
$VR22 = cleanDataPOST("CasEmploi5");
$VR23 = cleanDataPOST("CasEmploi6"); 
	
// colonne de la table
$VR = array ("id"=>$VR0, 
			"REF_MAG"=>$VR1, 
			"FAMILLE_OUTIL"=>$VR2,
			"SOUS_FAMILLE"=>$VR3,
			"MATIERE_OUTIL"=>$VR4, 
			"NBRE_Z"=>$VR5,
			"DIA_1"=>$VR6, 
			"LONGUEUR_1"=>$VR7, 
			"DIA_2"=>$VR8,
			"DIA_3"=>$VR9,
			"LONG_UTILE"=>$VR10,
			"LONG_TOTALE"=>$VR11, 
			"CARACT_1"=>$VR12,
			"CARACT_2"=>$VR13, 
			"FOURNISSEUR"=>$VR14,
			"REF_FOURNISSEUR"=>$VR15, 
			"PRIX"=>$VR16, 
			"QTE_MINI"=>$VR17,
			"CAS_EMPLOI_1"=>$VR18, 
			"CAS_EMPLOI_2"=>$VR19, 
			"CAS_EMPLOI_3"=>$VR20,
			"CAS_EMPLOI_4"=>$VR21, 
			"CAS_EMPLOI_5"=>$VR22, 
			"CAS_EMPLOI_6"=>$VR23
		);
			  
$concat = "" ; 
$datas = array();
foreach($VR as $VRn => $VRn_value){
	if($VRn_value !== ""){
	  $concat = $concat. " AND ".$VRn. " = :" .$VRn ;  
	  $datas[":" .$VRn] = $VRn_value;	
	};
};
$condition = ltrim($concat,"AND");

//--------------------------------------------------------------------------//
//  REQUETE                                       
//--------------------------------------------------------------------------//

$sql = 'SELECT id FROM cutting_tools_01 ';
$sql .= !empty($condition)? ' WHERE' . $condition : "";

try{             
	$requete = $connexion->prepare($sql); // A corriger en fonction du contenu de ton fichier cnxbdd.php  
	$requete->execute($datas);                                                                    
	$resultat = $requete->fetchAll(PDO::FETCH_ASSOC);            
}catch(PDOException $e){
	echo 'ECHEC  : ' .$e->getMessage();
}

//--------------------------------------------------------------------------//
//on renvoi la réponse au script ajax au format json
//--------------------------------------------------------------------------//
echo json_encode(array('result'=>$resultat,'sql'=>$sql,'datas'=>$datas);

Il reste un souci avec la variable $connexion .....
peux tu nous montrer le code de ton fichier  cnxbdd.php ?
c'est $connexion qui s'y trouve pour la connexion à ta bdd ... ou bien $bdd ?

JC_8280 · Answer

Ci joint le fichier cnxbdd:

<?php
    $serveur = "localhost";
    $login = "root";
    $pass = "";

JC

JC_8280 · Answer

En fait il y' a peut être un autre problème: 
le programme trouver ne semble passer aucun paramètre, et du coup en résultat rien n'est filtré.

Ci-joint captures:

jordane45 · Answer

En même temps... tu ne lui donne aucune variable à envoyer...
En général, on fait ça dans le .send

xmlhttp.send("foo=bar&lorem=ipsum");
 
mais là.. ça n'a plus de rapport avec le forum PHP....
Je te laisse modifier ton code pour lui passer les paramètres que tu veux et si tu bloques, ouvres une nouvelle discussion dans le forum Javascript (en montrant ton code).

Et pense à mettre cette discussion en résolue.

JC_8280 · Answer

Bonsoir,

encore une question,

J'ai repassé le bouton en type "submit" et cette fois j'ai bien les paramètres d'entrée dans la console, mais la réponse donne un problème de synthaxe. D'où est ce que ça vient?

Je rejoint le code PHP