Requête AJAX, retour de la réponse
Résolu
Bonjour,
J'ai une erreur dans le réponse de ma requête AJAX, bien qu'il me semble que j'ai fait comme la première fois.
Il y' a une différence dans la charge utile de la réponse qui est le premier terme (voir photo: REF_MAG ou id suivant la requête que j'ai lancée).
Je ne vois pas pourquoi.
Merci d'avance pour ton aide.

Ci dessous le code PHP et JS.
PHP
JS:
J'ai une erreur dans le réponse de ma requête AJAX, bien qu'il me semble que j'ai fait comme la première fois.
Il y' a une différence dans la charge utile de la réponse qui est le premier terme (voir photo: REF_MAG ou id suivant la requête que j'ai lancée).
Je ne vois pas pourquoi.
Merci d'avance pour ton aide.

Ci dessous le code PHP et JS.
PHP
<?php
header("Content-Type: application/json; charset=UTF-8");
error_reporting(E_ALL);
ini_set('display_errors', TRUE);
ini_set('display_startup_errors', TRUE);
//--------------------------------------------------------------------------//
// fonctions diverses...
//--------------------------------------------------------------------------//
$entreeErr = $errIdM = $errRefMagM = 0;
if (empty($_GET["IdM"]) && empty($_GET["refMagM"])){
$entreeErr = "UNE ENTREE EST DEMANDEE";
};
if (!filter_input(INPUT_GET, "IdM", FILTER_VALIDATE_INT,
array("options" => array("min_range"=>100001, "max_range"=>102000))) === false){
$errIdM = ("IdM NON VALIDE");
};
if (!filter_input(INPUT_GET, "refMagM", FILTER_VALIDATE_INT)){
$errRefMagM = ("refMag NON VALIDE");
};
function cleanDataPOST($dataToClean=NULL,$defaultValue=""){
$result = !empty($_POST[$dataToClean]) ? trim($_POST[$dataToClean]) : $defaultValue;
$result = stripslashes($result);
return $result;
}
//--------------------------------------------------------------------------//
// Variables ..
//--------------------------------------------------------------------------//
$VM = array();
$resultat = array();
$VM0 = cleanDataPOST("idM");
$VM1 = cleanDataPOST("refMagM");
$VM = array ("id"=>$VM0,
"REF_MAG"=>$VM1
);
//print_r ($VM);
if ($VM0==""){
$VM = $VM1;
$condition = "REF_MAG";
}else{$VM = $VM0;
$condition = "id";
};
echo $condition;
$datas = array();
$datas[":".$condition]=$VM;
//--------------------------------------------------------------------------//
//connexion à la bdd
//--------------------------------------------------------------------------//
require_once "cnxbdd.php";
//--------------------------------------------------------------------------//
// REQUETE
//--------------------------------------------------------------------------//
$sql = 'SELECT id FROM cutting_tools_01 WHERE ' .$condition .' != :' .$condition;
try{
$requete = $connexion->prepare($sql);
$requete->execute($datas);
$resultatM1 = $requete->fetchAll(PDO::FETCH_ASSOC);
}catch(PDOException $e){
echo 'ECHEC : ' .$e->getMessage();
}
echo json_encode(array('result'=>$resultatM1,'sql'=>$sql,'datas'=>$datas));
JS:
// TRI DU TABLEAU PAR CLICK SUR UNE ENTETE DE COLONNE
// Sources: https://www.pierre-giraud.com/trier-tableau-javascript/
// Many thanks to Pierre.
// 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));
}));
//ECOUTE DU CLICK SUR BOUTON CREER
let creation = document.getElementById('creer') ;
creation.addEventListener('click',fCreation) ;
//ECOUTE DU CLICK SUR BOUTON RECHERCHE
let recherche = document.getElementById('chercher') ;
recherche.addEventListener('click',fRecherche) ;
//ECOUTE DU CLICK SUR BOUTON MODIFIER
let modification = document.getElementById('modifier') ;
modification.addEventListener('click',fModification) ;
//ECOUTE DU CLICK SUR BOUTON RESET
let raz = document.getElementById('reset') ;
raz.addEventListener('click',fReset) ;
//---------*************----------************-------------
// BOUTON CREER //
//---------*************----------************-------------
function fCreation(){
console.log("On entre dans la fonction 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 (){
console.log("On ferme la fenetre Creation");
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'
}
//---------*************----------************-------------
// BOUTON RECHERCHER //
//---------*************----------************-------------
function fRecherche(){
console.log("On entre dans la fonction 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) ;
} // SORTIE DE LA FONCTION fRecherche
//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 (){
console.log("On entre dans la fonction 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
let boutonValiderRecherche = document.getElementById('idboutonValiderRecherche');
boutonValiderRecherche.addEventListener('click',validerRecherche);
//boutonValiderRecherche.onclick = "validerRecherche()" ;
// FONCTIONS AJAX
function validerRecherche(){
console.log("Récupération des variables");
// RECUPERATION DES VARIABLES DU FORMULAIRE RECHERCHE
var idSlctidR = "";
var idSlctRef_MagR = "";
var idSlctFamilleR = document.getElementById('idSlctFamilleR').value;
var idSlctS_FamilleR = document.getElementById('idSlct_S_FamilleR').value;
var idSlctMatiereR = document.getElementById('idSlctMatiereR').value;
var idInputNbreZR = "";
var idInputDia1R = document.getElementById('idInputDia1R').value;
var idInputLong1R = document.getElementById('idInputLong1R').value;
var idInputDia2R = document.getElementById('idInputDia2R').value;
var idInputDia3R = document.getElementById('idInputDia3R').value;
var idInputLongUtileR = document.getElementById('idInputLongUtileR').value;
var idInputLongTotaleR = document.getElementById('idInputLongTotaleR').value;
var idInputCaract1R = document.getElementById('idInputCaract1R').value;
var idInputCaract2R = "";
var idInputFournisseurR = document.getElementById('idInputFournisseurR').value;
var idInputRef_FournisseurR = document.getElementById('idInputRef_FournisseurR').value;
var idInputPrixR = document.getElementById('idInputPrixR').value;
var idInputQteMiniR = document.getElementById('idInputQteMiniR').value;
var idInputCasEmploi1R = document.getElementById('idInputCasEmploi1R').value;
var idInputCasEmploi2R = document.getElementById('idInputCasEmploi2R').value;
var idInputCasEmploi3R = "";
var idInputCasEmploi4R = "";
var idInputCasEmploi5R = "";
var idInputCasEmploi6R = "";
var filtre = { id: idSlctidR,
RefMag: idSlctRef_MagR,
familleOutil: idSlctFamilleR ,
SousFamille: idSlctS_FamilleR,
Matiere: idSlctMatiereR,
Dia1: idInputDia1R,
Dia2: idInputDia2R,
LongUtile: idInputLongUtileR,
Caract1: idInputCaract1R,
Fournisseur: idInputFournisseurR,
Ref_Fournisseur: idInputRef_FournisseurR,
CasEmploi1R: idInputCasEmploi1R,
CasEmploi2R: idInputCasEmploi2R
};
function creerFiltreSend(obj) {
var resultat = "";
for (var i in obj) {
if (obj.hasOwnProperty(i) && obj[i]!="" ) {
resultat += i + "=" + obj[i] + "&";
}
}
return resultat;
}
var filtreSend = creerFiltreSend(filtre);
filtreSend = filtreSend.slice(0, filtreSend.length-1);
//alert(filtreSend);
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);
if(typeof(resultRecherche)!='undefined' && resultRecherche!=null){
var result = typeof(resultRecherche.result)!='undefined' ? resultRecherche.result : null;
if(result!=null){
console.log('RESULT :',result);
for (x in result){
console.log('id = ',x, result[x].id);
var y = result[x].id;
idRow = document.getElementById(y);
idRow.style.display = 'none';
}
}
}else{
console.log('no result !');
}
}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(filtreSend);
}
//---------*************----------************-------------
//---------*************----------************-------------
// BOUTON MODIFIER //
//---------*************----------************-------------
//---------*************----------************-------------
function fModification(){
console.log("On entre dans la fonction fModification");
let formModif1 = document.getElementById('idFormModifier1') ;
let formModif2 = document.getElementById('idFormModifier2') ;
let formModifDiv = document.getElementById('idDIVFModifier') ;
formModif1.style.display = 'block' ;
formModif2.style.display = 'block' ;
let validRechercheModif= document.getElementById('idboutonRechercheModif');
validRechercheModif.addEventListener('click',validerModification1) ;
// 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 MODIFICATION
//****************************
let boutonFermerModif = document.getElementById('idboutonFermerModification');
console.log(" variable boutonFermerModification créée ") ;
boutonFermerModif.addEventListener('click',fermerModification) ;
// FONCTION DU BOUTON FERMER DU FORMULAIRE MODIFIER
function fermerModification(){
console.log("On ferme la fenetre Modification");
let formModification1 = document.getElementById('idFormModifier1') ;
let formModification2 = document.getElementById('idFormModifier2') ;
creation.addEventListener('click',fCreation) ;
recherche.addEventListener('click',fRecherche) ;
modification.addEventListener('click',fModification) ;
raz.addEventListener('click',fReset);
formModification1.style.display = 'none';
formModification2.style.display = 'none';
}
//*********************************
//BOUTON RECHERCHE OUTIL A MODIFIER
//*********************************
function validerModification1(){
console.log("Récupération des variables formulaires Modif 1");
// RECUPERATION DES VARIABLES DU FORMULAIRE MODIFIER 1
var idM = refMagM = "";
var idInputNumIdM = document.getElementById('idInputNumIdM').value;
var idInputRefMagM = document.getElementById('idInputRefMagM').value;
var filtre = { "idM":idInputNumIdM,
"refMagM":idInputRefMagM
};
//alert( filtre.idM +
// "\n" + filtre.refMagM );
let critere ="";
if (filtre.idM != "" && filtre.refMagM!=""){
alert('UNE SEULE ENTREE EST DEMANDEE');
}else if(filtre.idM=="" && filtre.refMagM==""){
alert("AU MOINS UNE VALEUR EST DEMANDEE");
}else if(filtre.idM==""){
critere = 'refMagM='+idInputRefMagM;
}else if(filtre.refMagM==""){
critere = 'idM='+idInputNumIdM;
}else{alert('VERIFIE TON CODE JC')};
//alert(critere);
console.log('critere =', critere );
console.log("On entre dans la fonction RechercheModif");
var xmlhttpM ="", resultModif1 = "",xM="", idRowM ="" ;
xmlhttpM = new XMLHttpRequest();
xmlhttpM.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
console.log("Success",xmlhttpM);
resultModif1 = JSON.parse(this.responseText);
if(typeof(resultModif1)!='undefined' && resultModif1!=null){
var resultM1 = typeof(resultModif1.result)!='undefined'? resultModif1.result : null;
if(resultM1!=null){
console.log('RESULT :',resultM1);
for (x in resultM1){
console.log('id = ',x, resultM1[x].id);
var y = resultM1[x].id;
idRow = document.getElementById(y);
idRow.style.display = 'none';
}
}
}else{
console.log('no result !');
}
}else {
console.log(xmlhttpM, xmlhttpM.status);
}
};
xmlhttpM.open("POST", "modifier1.php", true);
xmlhttpM.onerror = function () {
console.log(xmlhttpM, xmlhttpM.status);
alert("Erreur ajax : Regarder la console pour plus de détails !");
};
xmlhttpM.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttpM.send(critere);
}
//---------*************----------************--------
// BOUTON RESET //
//---------*************----------************--------
function fReset(){
alert('Reset tableau outils!!') ;
}
Configuration: Windows / Opera 67.0.3575.137