Bonjour à toute la communauté,

Je suis actuellement en formation dans le monde du développement WEB et de Jelix. Je commence donc à découvrir les joies d'AJAX mais j'ai un petit problème pour faire fonctionner mon application.

Voici la problèmatique : Sur une page se trouve une liste précédée d'un formulaire. Le but est de saisir les informations et de mettre à jour la liste des enregistrements sans rafraîchir la page. Les informations enregistrées sont juste le nom, le prénom, l'age et le mail d'un client potentiel (l'identifiant est en auto-increment). J'ai donc dans mon template mis le code suivant pour ma liste :

 <span id=identifiant>
 <table>
 {foreach $liste as $client}
 <tr>
	<td>{$client->Nom}</td>
	<td>{$client->Prenom}</td>
	<td>{$client->Age}</td>
 </tr>
 {/foreach}
 </table>
 </span>

Lors de la première exécution, ma méthode index() de mon contrôleur default affiche le tableau (grâce aux manipulations avec les daos). Mon bouton de formulaire déclenche la méthode Valider() du code javascript suivant :

 <script type="text/javascript">
 {literal}  
 
 var http; // Notre objet XMLHttpRequest

 function createRequestObject()
 {
    var httpBuffer;
    if(window.XMLHttpRequest)
    { // Mozilla, Safari, ...
        httpBuffer = new XMLHttpRequest();
    }
    else if(window.ActiveXObject)
    { // Internet Explorer
        httpBuffer = new ActiveXObject("Microsoft.XMLHTTP");
    }
    return httpBuffer;
 }

 function Valider(){
	document.getElementById('identifiant').innerHTML = '<em>Chargement...</em>';
 http = createRequestObject();
	var vNom = document.getElementById('Nom').value;
	var vPrenom = document.getElementById('Prenom').value;
	var vAge = document.getElementById('Age').value;
	var vMail = document.getElementById('Mail').value;
	var url ={/literal}{urljsstring 'exemple~default_createsave', array('Nom'=>'vNom'), array('Prenom'=>'vPrenom'), array('Age'=>'vAge'), array('Mail'=>'vMail')}{literal};
	http.open("post", url, true);
	http.onreadystatechange = handleAJAXReturn;
	http.send(null);
 }

 function handleAJAXReturn()
 { 
    if(http.readyState == 4)
    {
        if(http.status == 200)
        {
            document.getElementById('identifiant').innerHTML = http.responseText;
        }
        else
        {
            document.getElementById('identifiant').innerHTML = "<strong>N/A</strong>";
        }
    }
 }

Le code côté server est le suivant :

 function createsave()
	{
		$client = jDao::createRecord('exemple~client');
		$client->Nom = $this->param('Nom');
		$client->Prenom = $this->param('Prenom');
		$client->Age = $this->param('Age');
		$client->Mail = $this->param('Mail');
		
		$dao = jDao::get('exemple~client');
		$dao->insert($client);
				
		$rep = $this->getResponse('text');
		
		$cnx = jDb::getConnection();
		
		$rs = $cnx->query('SELECT * FROM client');
		$result = '<table>';
		while($client = $rs->fetch()){
			$result.='<tr>
					<td>'.$client->Nom.'</td>
					<td>'.$client->Prenom.'</td>
					<td>'.$client->Age.'</td>
				</tr>';
		}
		
		$result.='</table>';
		
		$rep->content = $result;
		
		return $rep;
	}

Visiblement je me suis planté dans l'appel de la fonction d'enregistrement createsave() et probablement que je gère mal le retour de cette même fonction. Elle est bien appelée mais l'enregistrement ne se fait pas.

Si quelqu'un pouvait m'éclairer, j'en serais ravie ces notions me semblent pas très simple d'accès.

Merci de votre compréhension et bonne journée à tous !!!

Rebonjour à tous !!!

Bon finalement le code ci-dessus marche bien quand je met l'url de ma fonction php createsave en dure avec les paramètres...

Désolé pour le dérangement... Je cherche pourquoi mon urljsstring ne marche pas... Vous avez probablement une idée.

Merci encore !

Salut,

Regarde ce que donne le javascript généré par urljsstring, et indique le nous.

Bon sinon, tu as mieux que faire un SELECT * ;-)

  foreach($dao->findAll() as $client) {
     $result.='...';
  }

Oui j'avais une url assez remarquable :-D

Là ca marche bien avec la petite correction... Ca me rassure.. Pas facile d'appréhender toutes ces notions en même temps entre AJAX et le fonctionnement de Jelix ^^ Mais ça commence à rentrer je vais pouvoir faire du bon boulot !!!

Sinon oui je vais suivre ton conseil pour le findAll. Autant profiter de la puissance du framework :-) Je change mon code de suite.

Merci à vous !!!

Salut gthomas; j'essaye de faire la même que toi mais sans sucés.peut tu m'aider stp ?

Oui, c'est se que j'ai. j'ai recopier ton code mais le problème persiste toujours :(.

tu as un bout de code qui marche?

Juste par curiosité, tu as quoi comme erreur ?

Sinon je peux te présenter un code d'exemple qui marche et que je viens de coder. Il s'agit uniquement de saisir un texte dans le champs de saisie, puis en cliquant sur OK, ce qui a été saisie sera envoyé au server puis renvoyé au client, puis mis dans la div d'idi "exemple". Ca sert à rien mais ça détend ;-). J'ai un peu commenté le bidul. Voilà un petit exemple qui marche.

Voici ce qui est contenu dans le template :

 <script type="text/javascript">
 {literal}
 // On ouvre la balise literal pour que le code javascript ne soit pas interprété par le moteur de jelix 
 var http; // Notre objet XMLHttpRequest
 // Fonction qui créée l'objet XTMLHttpRequest (et son homologue M$ suivant le navigateur)
 function createRequestObject()
 {
     var httpBuffer;
     if(window.XMLHttpRequest)
     { // Mozilla, Safari, ...
         httpBuffer = new XMLHttpRequest();
     }
     else if(window.ActiveXObject)
     { // Internet Explorer
         httpBuffer = new ActiveXObject("Microsoft.XMLHTTP");
     }
     return httpBuffer;
 }
 // Fonction appelée par un click sur le bouton OK
 function Valider()
 {
 	var vExemple = document.getElementById('saisieExemple').value;
 	var url ={/literal}{urljsstring 'exemple~default:exemple', array(), array('exemple'=>'vExemple')}{literal};
 	http = createRequestObject();
 	http.open("post", url, true);
 	http.onreadystatechange = handleAJAXReturn;
 	http.send(null);
 }
 // Fonction qui va attendre la réponse du server et faire les traitements côté client
 function handleAJAXReturn()
 {
     if(http.readyState == 4)
     {
         if(http.status == 200)
         {
 			// La réponse est arrivée !! On met dans la div d'id exemple le contenu texte de la réponse (ici ce sera ce qui a été envoyé au server mais tu peux également mettre du code HTML)
             document.getElementById('exemple').innerHTML = http.responseText;
         }
         else
         {
             document.getElementById('exemple').innerHTML = "<strong>N/A</strong>";
         }
     }
 }
 // On ferme la balise literal. Suivra le code HTML 
 {/literal}
 </script>
 <div id="exemple">
 Ici va s'inscrire le contenu du champs de saisie ci-dessous quand on cliquera sur OK
 </div>
 <input type="text" id="saisieExemple">
 <input type="button" value="OK" onClick="javascript:Valider()">

A ce stade, une fois que l'on clique sur OK, on récupère ce qui a été saisie, on le passe en paramètre dans la requête vers le server. Voici ce que tu auras dans ton contrôleur :

	function exemple()
	{
		$rep = $this->getResponse('text');
		$exemple = $this->param('exemple');
		$rep->content = $exemple;
		return $rep;
	}

Voilà c'est tout !! Cette fonction va uniquement récupérer ce que l'on a mis en paramètre dans la requête AJAX, puis le mettre dans la réponse texte qu'attend le client.

Bon courage !!!

Re-Bonjour; je te remercie pour ta patiente; c'est juste que je crois que y'a un petit problème avec le script.

rien ne s'affiche sur la Tpl, j'ai enlevé la ligne :

 var url ={/literal}{urljsstring 'exemple~default:exemple', array(),  array('exemple'=>'vExemple')}{literal};

et la zone de texte le bouton et le div s'affiche.

je sais pas exactement ce que je deverai faire.

merci d'avance.

Bonjour; j'ai copier ton code pour tester le malheur c'est ça marche pas chez moi.j'ai pu localiser le problème, c'est au niveau de la ligne :

 var url ={/literal}{urljsstring 'exemple~default:exemple', array(), array('exemple'=>'vExemple')}{literal};

en gardant cette ligne rien ne s'affiche sur la Tpl, et quand je l'ai enlevé le truc s'affiche.ça d'une part d'autre part, j'ai enlevé les balises {/literal}{literal} et le truc s'affiche.

mais le test ça marche pas, le texte que j'ai saisi ne s'affiche pas sur la template.

merci