Modérateur PHPfrance |
2575 Messages
06 juil. 2007, 02:25
Voici la solution la plus simple, utiliser le même div de réponse mais en y cumulant les réponses Ajax.
L'astuce est de modifier la ligne suivante dans la fonction ajax d'appel "getByAjax"
Code : Tout sélectionner
if(xhr.readyState == 4 && xhr.status == 200){
reponse.innerHTML += xhr.responseText; //Ecrit la réponse du serveur
}
Remarques le
+= qui fait le cumul des réponses reçues par Ajax dans le même conteneur reponse.
Le formulaire Ajax:
<script>
/**
* Moteur Ajax
*/
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;
}
/**
* Méthode qui appelle un script serveur et renvoit sa réponse
*
* serveur: l'url du script serveur appelé
* reponse: objet devant recevoir la réponse Ajax
* paramètres: liste des paramètres éventuellement passés au script serveur (param1=valeur1¶m2=valeur2...)
*/
function getByAjax(serveur, reponse, parametres){
var xhr = getXhr(); //Nouvelle instance Ajax
if (xhr && serveur){
// On défini la fonction observant la communication Ajax/serveur
xhr.onreadystatechange = function(){
// le code 4/200: détermine que Ajax a reçu une réponse du serveur
if(xhr.readyState == 4 && xhr.status == 200){
reponse.innerHTML += xhr.responseText; //Ecrit la réponse du serveur
}
}
// Déclenchement de l'appel Ajax/serveur (avec passage de paramètres en POST)
xhr.open("POST" ,serveur ,true);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send(parametres);
}
}
//Cette fonction envoit plusieurs posts au serveur de recherches via ajax et reçoit plusieurs réponses
function AfficheResult() {
////vider le div de reponse avant de lancer la recherche
document.getElementById('div_reponse').innerHTML = "";
//Elements du form à traiter
var critInputs = document.criteria.elements;
var myInput;
for ( var i = 0 ; i < critInputs.length ; i++ ) {
myInput = critInputs[i];
//traiter seulement les checkbox cochées
if ( myInput.type == 'checkbox' && myInput.checked ) {
//Déterminer les paramètres de recherche id_cat et id_crit (seront envoyés par Post via Ajax)
var explode = myInput.value.split('/');
var id_cat = explode[0];
var id_crit = explode[1];
var post_params = "cat=" + id_cat + "&crit=" + id_crit;
//Envoit le postage au serveur de recherche via Ajax et attend la réponse
getByAjax('result-request.php', document.getElementById('div_reponse'), post_params);
}
}
}
</script>
<?php
echo "<br /><br />Choose the different criteria which correspond to your request : ";
/*---------------------------------*/
//on ouvre le fichier criteria.xml
if (!$cfg['ressources_root']) $cfg['ressources_root'] = ".";
$criteriaFile = $cfg['ressources_root'].'/criteria.xml';
$domCriteria = new DOMDocument('1.0','UTF-8');
$domCriteria->load($criteriaFile);
$xpCriteria = new DOMXPath($domCriteria);
$cat_criteria = $domCriteria->getElementsByTagName('cat');
$result_find_criteria = $domCriteria->getElementsByTagName('criteria');
echo "<form name='criteria' method='post'>";
echo "<table align='center'><tr>";
foreach($cat_criteria as $cat){
$name_cat = $cat->getAttribute('name');
$id_cat = $cat->getAttribute('id');
echo "<td valign='top'><br /><strong>".$name_cat." : </strong>";
foreach ($cat->childNodes as $criteria)
{
if ($criteria->nodeType != XML_ELEMENT_NODE) continue;
if ($criteria->tagName == 'criteria')
{
$name_criteria = $criteria->getAttribute('name');
$id_criteria = $criteria->getAttribute('id');
echo "<ul><input type='checkbox' id='crit[]' name='crit[]' value='$id_cat/$id_criteria'>$name_criteria</input></ul>";
}
}
}
echo "</tr></table>";
?>
<div align="center"><input type="button" onClick="AfficheResult();" value="Search (Ajax)" /></div>
</form>
<p>Result</p>
<div id="div_reponse"></div>
Et pour ceux qui nous lisent et qui veulent tester:
La page de recherche: result-request.php
<?php
/*-----------------------------------------------------*/
//on affiche le résultat en fonction d'un seul critère //
/*-----------------------------------------------------*/
if (!$cfg['ressources_root']) $cfg['ressources_root'] = ".";
$link_file = $cfg['ressources_root'].'/matrix/criteria-practice.xml';
$xml = simplexml_load_file($link_file);//on ouvre le fichier xml
//on vérifie l'existence des varaibles passées par le formulaire si elles n'existent pas, on meur affecte une valeur vide
if (!isset($_POST['cat'])) { $_POST['cat'] = ''; }
if (!isset($_POST['crit'])) { $_POST['crit'] = ''; }
//si les variables ne sont pas vides
if ( ($_POST['cat'] != '') or ($_POST['crit'] != '') )
{
$id_practice = null;
foreach($xml->link as $value)
{
foreach($value->criteria as $criteria)
{
if( trim($criteria->idcat)==trim($_POST['cat']) and trim($criteria->idcrit) == trim($_POST['crit']) )
{
$id_practice = $criteria->practice->id;
break;
}
}
}
if ( (isset($id_practice)) and ($id_practice != '') ) // si $id_practice est trouvé
{
//on ouvre le document xml qui correspond à la recherche
$practiceFile = $cfg['ressources_root'].'/content/practice/'.$id_practice.'.xml';
$domPractice = new DOMDocument('1.0','UTF-8');
$domPractice->load($practiceFile);
$xpPractice = new DOMXPath($domPractice);
$item_practice = $domPractice->getElementsByTagName('item');
foreach ($item_practice as $item)
{
foreach ($item->childNodes as $child)
{
if($child->nodeType != XML_ELEMENT_NODE) continue;
if($child->tagName == 'title')
{
$titre = utf8_decode($child->firstChild->nodeValue);
}
elseif ($child->tagName == 'short_description')
{
$short_description = utf8_decode($child->firstChild->nodeValue);
}
}
$msg = "<p>$titre<br/>$short_description</p>";
}
}
else
{
$msg = "<p>There is no practice which corresponds to your request. Please refine your search</p>";
}
}
else
{
$msg = "<p>Choose your crireria before starting your search</p>";
}
echo $msg;
?>
Et les fichiers XML de test:
criteria.xml (contenant les critères de recherche)
Code : Tout sélectionner
<doc>
<cat name="name_cat_1" id="id_cat_1">
<criteria name="name_criteria_1.1" id="id_criteria_1.1" />
<criteria name="name_criteria_1.2" id="id_criteria_1.2" />
<criteria name="name_criteria_1.3" id="id_criteria_1.3" />
</cat>
<cat name="name_cat_2" id="id_cat_2">
<criteria name="name_criteria_2.1" id="id_criteria_2.1" />
<criteria name="name_criteria_2.2" id="id_criteria_2.2" />
<criteria name="name_criteria_2.3" id="id_criteria_2.3" />
</cat>
<cat name="name_cat_3" id="id_cat_3">
<criteria name="name_criteria_3.1" id="id_criteria_3.1" />
<criteria name="name_criteria_3.2" id="id_criteria_3.2" />
<criteria name="name_criteria_3.3" id="id_criteria_3.3" />
</cat>
</doc> (contenant les liens entre critères et les "practice" recherchés)
Code : Tout sélectionner
<doc>
<link>
<criteria>
<idcat>id_cat_1</idcat>
<idcrit>id_criteria_1.1</idcrit>
<practice><id>id_practice_1</id></practice>
</criteria>
<criteria>
<idcat>id_cat_1</idcat>
<idcrit>id_criteria_1.2</idcrit>
<practice><id>id_practice_2</id></practice>
</criteria>
<criteria>
<idcat>id_cat_1</idcat>
<idcrit>id_criteria_1.3</idcrit>
<practice><id>id_practice_3</id></practice>
</criteria>
</link>
<link>
<criteria>
<idcat>id_cat_2</idcat>
<idcrit>id_criteria_2.1</idcrit>
<practice><id>id_practice_4</id></practice>
</criteria>
<criteria>
<idcat>id_cat_2</idcat>
<idcrit>id_criteria_2.2</idcrit>
<practice><id>id_practice_5</id></practice>
</criteria>
<criteria>
<idcat>id_cat_2</idcat>
<idcrit>id_criteria_2.3</idcrit>
<practice><id>id_practice_6</id></practice>
</criteria>
</link>
<link>
<criteria>
<idcat>id_cat_3</idcat>
<idcrit>id_criteria_3.1</idcrit>
<practice><id>id_practice_7</id></practice>
</criteria>
<criteria>
<idcat>id_cat_3</idcat>
<idcrit>id_criteria_3.2</idcrit>
<practice><id>id_practice_8</id></practice>
</criteria>
<criteria>
<idcat>id_cat_3</idcat>
<idcrit>id_criteria_3.3</idcrit>
<practice><id>id_practice_9</id></practice>
</criteria>
</link>
</doc>
Et finalement des fichiers "practice" qu'on recherche par les critères
exemple:
content/practice/id_practice_1.xml
Code : Tout sélectionner
<item>
<title>Practice 1</title>
<short_description>Short description of Practice 1</short_description>
</item>Code : Tout sélectionner
<item>
<title>Practice 2</title>
<short_description>Short description of Practice 2</short_description>
</item>
etc... jusqu'à 9 pour cet exemple
--------
//////----
//---
//----
//////
-------
//---
//----
//---
//----
//---
//
------
//////----
//////-----
//////
-----
||--------
||--
||---
||
Prendre le recul n'est pas une perte de temps.
ps:
Affrontez moi dans l'arène
