Partage

[Ajax - Prototype]: Ajax.Updater() => Jascript non évalué

8 octobre 2008 à 19:10:27

Bonjour,

Pour développer mes scripts Ajax, j'utilise la librairie protoype.
La fonction Ajax.Upadater() me permet d'afficher des div dynamique en changeant leur contenu.

Voici un exemple d'utilisation de la fonction (index.html):

<script>
	function chercheHTML() {
		var url = 'http://votreserveur/application/mapage.php';
		var myAjax = new Ajax.Updater('emplacement',url,{method: 'get', evalScripts: tue});
	}
</script>

<input type='button' value='ChercheHTML' onclick="chercheHTML()">
<div id="emplacement"></div>

Je le détaillerais pas, un codeur javascript ou un connaisseur de la librairie prototype le comprendra.
Voici mon script utilisé (mapage.php):

<script type="text/javascript">
function element_update(element){
			myJsProgressBarHandler.setPercentage('element'+element, '+1');
			var url = 'mapage.php?el';
			var parametres = 'el='+element;

			var myAjax = new Ajax.Updater(
				'action_result',
				url,
				{
					evalScripts:true,
					method: 'get',
					parameters: parametres
				}
			);
		}
</script>
<span class="progressBar" id="element1">70</span><span class="options"><a href="#" onclick="element_update('1');return false;"><img src="images/bramus/add.gif" alt="" title="" /></a></span>

Le soucis est que ce script est inclu dans ma div chargé dynamiquement grâce à cette librairie prototype.
De cette manière, tout le script javascript n'est pas évalué.
En gros, lorsque je fais clique sur OnClick="element_update(1)" rien ne se passe, ma fonction javascript n'est pas éxécutée.
Quelqu'un aurait t-il une solution pour remédier à ce problème?

Je précise que mon script javascript fonctionne en appelant la page directement dans mon navigateur (donc si je n'utilise pas la librairie prototype pour me charger cette page dynamquement dans une div).

PS: en fiate j'éssaie j'utilise également le script myJsProgressbarHandler (qui comprend donc du javascript) et j'éssaie donc d'afficher ces barres de progression dans ma div modifié avec ajax.updater()

smurf

9 octobre 2008 à 0:22:58

Salut,
Perso j'ai fait des scripts de ce style avec prototype et aucun problème (je préfère maintenant passer par des Event.observe).

2 détails qui n'ont pas forcement d'importance:
-si tu fais de l'ajax c'est que tu es en XHTML, et si tu est en XHTML, pas de majuscule dans les noms d'attributs (onclick et pas OnClick).
-Je ne vois pas de Event.stop(Event) dans ton code ? Est-ce normal ? En toute logique, si tu n'interromps pas la propagation de l'évènement onclick, celui ci va se propager de manière normale sur le lien et charger ta page au signet #

titipotter

9 octobre 2008 à 19:22:13

Ba en faite avec la fonction Ajax.Updater de Prototype, pas besoin de mettre Event.stop(Event).
Mais pour l'instant, le problème que j'ai est que mes fichiers PHP appelés avec Ajax.Updater() sont bel et bien affichés mais le code javascript qu'ils contiennent est éffacé (côté client bien sur).

smurf

9 octobre 2008 à 20:52:51

Si la fonction element_update est récupérée en AJAX, il est normal qu'elle ne marche pas. le code JS récupéré doit être évalué (fonction eval) mais pour cela, il doit être récupéré indépendamment du code HTML (l'évaluation du code JS permet au passage de faire du cross site en AJAX mais shuuut c'est un secret).

titipotter

9 octobre 2008 à 21:17:51

Oui mais t'aurais pas un exemple plus compréhensible car je ne suis pas doué avec le javascript.

smurf

9 octobre 2008 à 22:27:07

Essaies de remplacer ton Ajax.Updater dans chercheHTML par celui ci:

var myAjax = new Ajax.Updater('emplacment',url,{ method: 'get',parameters: parametres, evalScripts: true });

titipotter

10 octobre 2008 à 0:03:00

C fait mais la fonction element_update() ne fonctionne tojours pas et donc le javascript n'est tojours pas évalué.

titipotter

11 octobre 2008 à 12:17:26

Personne aurait une idée pour d'où pourrait venir le problème concenrnat mon javascript non-exécuté dans la div modifié par Ajax.updater sachant que j'ai evalScripts: true, ?
...

smurf

12 octobre 2008 à 11:13:11

Si ça peut t'aider, j'ai j'ai un test simple avec le code suivant et ma conclusion est que tu ne peux pas ajouter de fonction nommée dynamiquement. Par contre ça marche très bien avec les fonctions anonymes ajoutées dans le gestionnaire d'évènements (bien sûr ces fonctions peuvent contenir autant d'instruction qu'on veut).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
	<title>test JS AJAX</title>


<script type="text/javascript" src="prototype.js" ></script>
<script type="text/javascript" >
Event.observe(window,'load', init);
function init() {
	Event.observe('toto','click', function() { new Ajax.Updater('toto','toto.html',{ evalScripts: true});  });
}
</script>

<style type="text/css">
#toto, #toto2 { width:300px; height:30px; background-color:#CFC; text-align:center; line-height:30px; border:1px solid #CCF; margin:20px; cursor:pointer;}
</style>
</head>

<body>
	<div id="toto"></div>
	<div id="toto2"></div>
</body>

</html>

Fichier toto.html

<span style="font-weight:bold" id="span_toto"/>Coucou</span>

<script type="text/javascript" >
Event.observe('toto2','click', function() { $('toto2').update('on a cliqué sur toto2'); });

Event.observe('span_toto','click', function() { 
	alert('clic sur le span');
 });
</script>

Ce que fait ce script:
Quand on clique sur le premier div, il va chercher en AJAX le contenu et un script qui ajoute un évènement sur le clic du deuxième div et sur le span chargé dans le premier.

PS:

Au lieu de s'embêter avec tout ça, pourquoi ne pas mettre ta fonction directement dans ton fichier JS dès le début ????

Attention: ce code est bancal que ce soit au niveau de la déclaration des évènements ou au niveau de leur gestion

titipotter

12 octobre 2008 à 11:31:14

Oui, j'ai fait le test en mettant ma fonction dans un fichier js appellé dans mon header mais j'ai toujours le même problème, j'ai l'impression que ma fonction n'est pas lue.

smurf

12 octobre 2008 à 11:40:14

Après de nouveaux test, j'ai peut être ta solution. Déclares ta fonction de cette manière:

element_update=function(element) {

}

on notera que j'ai volontairement omis le "var" pour des questions de portée de variables

titipotter

12 octobre 2008 à 12:15:46

Toujours rien

Fonctionne pas...

Sinon j'ai cette érreur de retourner:
Erreur : this.pbArray[el] is undefined
Fichier Source : http://127.0.0.1/zip/js/bramus/jsProgressBarHandler.js
Ligne : 345
Voici le bloc concerné:

/**
			 * Set the percentage of a progressbar
			 *
			 * @param string el
			 * @param string percentage
			 * @return void
			 * -------------------------------------------------------------
			 */
				setPercentage		: function(el, percentage) {
					this.pbArray[el].setPercentage(percentage);
				},

smurf

12 octobre 2008 à 12:52:33

En marquand evalScripts: true au lieu de evalScripts: tue ça devrait mieux marcher...

Testé (avec succès) avec:

<script type="text/javascript" >
function chercheHTML() {
		var url = 'toto_3.html';
		var myAjax = new Ajax.Updater('emplacement',url,{ method: 'get', evalScripts: true});
	}
</script>

<input type='button' value='ChercheHTML' onclick="chercheHTML()">
<div id="emplacement"></div>

fichier toto_3.html

<script type="text/javascript">
element_update=function(element){
			var url = 'mapage.php?el';
			var parametres = 'el='+element;

			alert(url+" "+parametres);
		}
</script>
<span class="progressBar" id="element1">70</span><span class="options"><a href="#" onclick="element_update('1');return false;"><img src="images/bramus/add.gif" alt="" title="" /></a></span>

titipotter

12 octobre 2008 à 13:07:37

C'est moi qu'avait mal recopié sur le forum mais j'ai bien 'true'
Sinon sa fonctionne pas...

Parcontre j'ai cette érreur de retourner:
Erreur : this.pbArray[el] is undefined
Fichier Source : http://127.0.0.1/zip/js/bramus/jsProgressBarHandler.js
Ligne : 345
Voici le bloc concerné:

/**
			 * Set the percentage of a progressbar
			 *
			 * @param string el
			 * @param string percentage
			 * @return void
			 * -------------------------------------------------------------
			 */
				setPercentage		: function(el, percentage) {
					this.pbArray[el].setPercentage(percentage);
				},

smurf

12 octobre 2008 à 13:15:57

Vu que tu as cette erreur c'est que le JS est correctement chargé mais que tu sais pas utiliser les progressbar

code testé:

<script type="text/javascript" src="prototype.js" ></script>
<script type="text/javascript" src="jsProgressBarHandler.js" ></script>
<script type="text/javascript" >
function chercheHTML() {
		var url = 'toto_3.html';
		var myAjax = new Ajax.Updater('emplacement',url,{ method: 'get', evalScripts: true});
	}
</script>
</head>

<body>
<input type='button' value='ChercheHTML' onclick="chercheHTML()">
<div id="emplacement"></div>
<span class="progressBar" id="element1">15%</span>
</body>

fichier toto_3.html

<script type="text/javascript">
element_update=function(element){
			myJsProgressBarHandler.setPercentage('element'+element, '+1');

			var url = 'mapage.php?el';
			var parametres = 'el='+element;

		}
</script>
<a href="#" onclick="element_update('1');return false;">AVANCER DE 1</a>

titipotter

12 octobre 2008 à 13:26:13

Ba sans Ajax.Updater, mon code marche correctement.
Et avec Ajax.Updater, ba pu rien.
Pourtant zé fait aucune modif entre les 2 sauf mis evalScripts: true, et transformé ma fonction update_element() par update_element = function(){...}
Normalement sa devrait fonctionner.

Si t'as le temps, sa te dirais que je je fais un zip pour que tu puisse jeter un oeil au fichier en question.
Peut être que tu sera plus apte que moi à traquer l'érreur.

smurf

12 octobre 2008 à 13:31:17

Visiblement tu ne peux pas charger la barre de progression via AJAX (tu peux agir dessus en AJAX uniquement).

titipotter

12 octobre 2008 à 13:35:48

Ba déja, AGIR sa serait déja une première chose.
Mais moi elle ne se charge pas et je peux rien incrémenter.
SNIFFF !!!

Au pire l'autre solution est de chargé cette barre via Ajax et une iframe.
le script Ajaxtabs gère très bien sa. Je l'avais déja utilisé et sa marchait niquel mais je l'avait supprimé au profit de Prototype qui gérait très bien les mises à jour des div jusqu'à ce que je me rencontre qu'il ne charge pas mes barres de progression.

smurf

12 octobre 2008 à 13:44:29

En même temps c'est pas très compliqué de créer ta propre barre de progression avec prototype...

titipotter

12 octobre 2008 à 14:03:42

Je suis tout ouïe car moi j'y connais pas grand chose en javascript.
Donc...

beb3r

6 novembre 2008 à 11:19:24

Salut à vous deux et autres,

je deterre un vieux post parce que celui-ci ma pas mal aidé et j'utilise une partie de celui seulement j'ai un problème que vous n'avez pas l'air d'avoir et je comprend pas pourquoi même en cherchant sur le net ...

<html>
<head>
        <title>test JS AJAX</title>

<script type="text/javascript" src="./prototype-1.6.0.3.js" ></script>

<script type="text/javascript" >
function chercheHTML(url) 
{
        alert('test');
        var myAjax = new Ajax.Updater('emplacement',url,{ method: 'get', evalScripts: true});
}
</script>

</head>

<body>

<input type='button' value='Menu' onclick='chercheHTML("./menu.html")'>
<input type='button' value='Page1' onclick='chercheHTML("./page1.html")'>
<input type='button' value='Page2' onclick='chercheHTML("./page2.html")'>
<input type='button' value='Page3' onclick='chercheHTML("./page3.html")'>
<div>
<div id="emplacement" name="emplacement">Menu</div>
</div>
</body>

</html>

Donc voila simplement 4 boutons qui change un div

Mon problème est que ca fonctionne super bien sous FireFox mais par contre sous IE il ne se passe rien du tout. Que dois-je faire ?

Je précisse que j'utilise l'ie7 et que mon code s'execute bien jusque l'alert aprs plus rien

Merci pour votre aide

askerat

7 novembre 2008 à 10:14:04

Y'a pas de passages de parametres dans les actions d'un evenement. Tu peux pas écrire Element.onclick = function(params){};. Ce que tu dois faire dans ton cas c'est : Element.onclick = function(){ chercheHTML(params); }; Puis essayez quand même de mettre tout votre JS dans des balises <script>, c'est pas top de mélanger JS/HTML.