Table ajax maitre -> fiche client

Fonctionnement Access ( Windows koi )

11 décembre 2009 à 17:34:57

Bonjour...

Je veux faire ca :
http://www.pcsoft-windev-webdev.com/vi [...] les-ajax.html

L’action qui quand on click sur une ligne du tableau ca met a jour les champs du bas en ajax

En codage normal nodepad <-> lignes de commande <-> a la main ( php / mysql / javascript… )

J’sais pas si ca servira pour ca mais j’utilise déjà JQuery pour mon menu

J’ai bien fouillé le WEB et soit je ne comprends pas comment adapter les exemples basics à ce dont j ai besoin soit ???

Si vous avez qq tutos en français si possible ??? Je suis preneur….

PS : mon niveau est novis mais pas trop non plus

Merci…

LCaba

12 décembre 2009 à 2:39:36

Salut,

Regarde par ici :

http://www.siteduzero.com/tutoriel-3-4 [...] vascript.html

Cabinet vétérinaire à Angers

maxcolm

16 décembre 2009 à 3:35:38

Merci ( un peu tardif mais j’ai u de la lecture ) pour la réponse…

J’avais déjà jeté un coup d’œil à cette page et c’est donc bien moi qui n’arrivais pas à comprendre les exemples de base.

J’me suis donc replonger dans la lecture de ce tuto et qq autres.

Au final j’ai 4 tuto logués sur une base test MYSQL en local qui fonctionne ( sur divers événements mais on s’en fout ).

J’ai simplifié ( enlevé les lignes inutiles ) le plus possible.

Ca marche, j'sais pas trop comment mais ca marche.

Ce que j’ai cru comprendre :
javascript interroge une page PHP qui interroge MYSQL et qui généralement renvoie du texte de type html -> ce qui pourrait ressembler à un include ou une iframe.

Je me suis surtout basé sur cet exemple :
http://siddh.developpez.com/articles/ajax/

Que j ai modifié de cette façon :
aaa.php

<html>
<head>
<title>My webpage is rich</title>

<script type='text/javascript'>

function getXhr(){

var xhr = null;

if(window.XMLHttpRequest){ // Firefox et autres
xhr = new XMLHttpRequest();
}

else if(window.ActiveXObject){ // Internet Explorer

try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
}

catch (e) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
}

else { // XMLHttpRequest non supporté par le navigateur
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
xhr = false;
}

return xhr;

}// fin function getXhr

/**
* Méthode qui sera appelée sur le click du bouton
*/
function change(){

var xhr = getXhr();

// On défini ce qu'on va faire quand on aura la réponse
xhr.onreadystatechange = function(){

// test
//alert(xhr.readyState);

// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
if(xhr.readyState == 4 && xhr.status == 200){
di = document.getElementById('livre');
di.innerHTML = xhr.responseText;
}
}

// Ici on va voir comment faire du post
xhr.open("POST","bbb.php",true);

// ne pas oublier ça pour le post
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

// ne pas oublier de poster les arguments
// ici, l'id de l'auteur
idauteur = document.getElementById('auteur').options[document.getElementById('auteur').selectedIndex].value;

//alert(idauteur);
xhr.send("idAuteur="+idauteur);

}// fin function change

</script>

</head>

<body>

<form>

<label>label1</label>

<select name='auteur' id='auteur' onchange='change()'>

<option value='-1'>Aucun</option>

<?php

require 'mysql.php';

$res = mysql_query("SELECT * FROM tlm ORDER BY ord");

while($row = mysql_fetch_assoc($res)){
echo "<option value='".$row["ord"]."'>".$row["titre_fr"]."</option>";
}

?>

</select>

<label>label2</label>

<div id='livre' style='display:inline'>

<select name='livre'> </select>

</div>

</form>

</body>

</html>

Qui appel bbb.php :

<?php

require 'mysql.php';

echo "<select name='livre'>";

if(isset($_REQUEST["idAuteur"])){

$res = mysql_query("SELECT * FROM tlm WHERE ord=".$_REQUEST["idAuteur"]." ORDER BY num_VIDEO_PRO");

while($row = mysql_fetch_assoc($res)){
echo "<option value='".$row["ord"]."'>".$row["titre_en"]."</option>";
}

}

else
echo "<option value='-1'>Choisir un auteur</option>";

echo "</select>";//fin select

?>

Bon pour info je viens de la programmation windows ( access / c# / windev ) et faire une requête pour afficher par exemple le prénom qui est dans la colonne juste à coté de la colonne nom de la même table ben ca me fait un peu mal.

Mais bon c’est peut être moi qui fait mal.

Donc ma / mes question j’suis dans la bonne direction ?
Y a pas plus simple ?

Parce que remplacer une div complète j'le sent pas trop moi.
Bon ouhai sur le doc maitre une div vide qui est remplacée par une div crée sur le doc esclave mais bon ca m’aide pas pour la mise en page tout ca.
J’aurais mieux vu un truc du genre variable à la php mais sur le doc maitre -> donc mise en page plus simple a gérer.

Enfin j'sais pas trop, c’est nouveau tout ca pour moi et j'me sens un peu perdu.

Vous en pensez koi ?

LCaba

16 décembre 2009 à 7:33:28

Tous d'abord, colorons ton code (avec le script au bon endroit

)

<html>
<head>
<title>My webpage is rich</title>
</head>


<body>
<form>

<label for="auteur">label1</label>

<select name='auteur' id='auteur' onchange='change()'>

<option value='-1'>Aucun</option>

<?php

require 'mysql.php';

$res = mysql_query("SELECT * FROM tlm ORDER BY ord");

while($row = mysql_fetch_assoc($res)){
echo "<option value='".$row["ord"]."'>".$row["titre_fr"]."</option>";
}

?>

</select>

<label>label2</label>

<div id='livre' style='display:inline'>

<select name='livre'> </select>

</div><!-- fin div livre -->

</form>


<script type='text/javascript'>

function getXhr(){
   var xhr = null;
   if(window.XMLHttpRequest){ // Firefox et autres
      xhr = new XMLHttpRequest();
   }
   else if(window.ActiveXObject){ // Internet Explorer
      try {
         xhr = new ActiveXObject("Msxml2.XMLHTTP");
      }
      catch (e) {
         xhr = new ActiveXObject("Microsoft.XMLHTTP");
      }
   }
   else { // XMLHttpRequest non supporté par le navigateur
      alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
      xhr = false;
   }
   return xhr;
}   // fin function getXhr

function change(){   // Méthode qui sera appelée sur le click du bouton
   var xhr = getXhr();
   xhr.onreadystatechange = function() {  // On défini ce qu'on va faire quand on aura la réponse

   //alert(xhr.readyState);  //   test
   
   if(xhr.readyState == 4 && xhr.status == 200){  // On ne fait quelque chose que si on a tout reçu et que le serveur est ok
      di = document.getElementById('livre');
      di.innerHTML = xhr.responseText;
   }
}

xhr.open("POST","bbb.php",true);   // Ici on va voir comment faire du post
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');   // ne pas oublier ça pour le post

idauteur = document.getElementById('auteur').options[document.getElementById('auteur').selectedIndex].value;   // ne pas oublier de poster les arguments. Ici, l'id de l'auteur

//alert(idauteur);
xhr.send("idAuteur="+idauteur);

} // fin function change

</script>

</body>
</html>

<?php

require 'mysql.php';

echo "<select name='livre'>";

if(isset($_REQUEST["idAuteur"])){

$res = mysql_query("SELECT * FROM tlm WHERE ord=".$_REQUEST["idAuteur"]." ORDER BY num_VIDEO_PRO");

while($row = mysql_fetch_assoc($res)){
echo "<option value='".$row["ord"]."'>".$row["titre_en"]."</option>";
}

}

else
echo "<option value='-1'>Choisir un auteur</option>";

echo "</select>";//fin select

?>

Citation

pour afficher par exemple le prénom qui est dans la colonne juste à coté de la colonne nom de la même table ben ca me fait un peu mal.

tu n'as pas vraiment le choix à vrai dire, cela dit, pour optimiser te requete, tu peux remplacer SELECT * par SELECT ord, titre_en afin de ne pas encombrer la mémoire avec des colonnes inutiles.

Citation

Bon ouhai sur le doc maitre une div vide qui est remplacée par une div crée sur le doc esclave mais bon ca m’aide pas pour la mise en page tout ca.

Tu ne remplace pas un div par un autre, tu remplace son contenu, ça ne pause aucun problème de mise en page. Rien ne t'empêche de donner des class et id aux éléments que tu rajoutes et de gérer la mise en page en css même pour des éléments qui n'existent pas encore.

Enfin, il y a plus classe que innerHTML mais faisons avec pour le moment.

Il y a autre chose que tu veux éclaircir ?

Cabinet vétérinaire à Angers