Evaluer un script avec Ajax.Updater

**razmous** · 25/11/2009, 11h41

Bonjour
J'ai un menu vertical qui contient des liens et en cliquant sur chaque lien il y a une mise a jour d'une balise DIV en utilisant la méthode Ajax.Updater de la framework prototype.

Cependant, la contenu de la mis a jour contient du code Javascript mais le code ne s'execute pas ;(, j'ai essayé la page toute seule elle marche bien !

En lisant la doc de prototype: Ajax.Request lorsqu'il trouve un Mime Type Javascript il évalue automatiquement le code

Avec la méthode Ajax.Updater j'ai mis pourtant evalScripts=true mais ça ne marche toujours pas,

Je suis novice en AJAX, disant c'est mon premier code

1- L'application que je veux développer consiste en un menu, lorsque je clique sur un lien, un formulaire apparait sur le DIV mis a jour j'ai rajouter un script de la validation des champs

Merci à tous

**Bovino** · 25/11/2009, 13h37

Salut.

Envoyé par razmous

En lisant la doc de prototype: Ajax.Request lorsqu'il trouve un Mime Type Javascript il évalue automatiquement le code

Lis plutôt la doc d'Ajax.Updater : http://www.prototypejs.org/api/ajax/updater
En particulier le paragraphe "About evalScripts and defining functions"

**razmous** · 25/11/2009, 14h49

Merci pour votre réponse:

Oui, j'ai lu mais je n'ai pas bien compris

d'où mon problème

comme j'ai dis c'est ma première application en AJAX avec prototype c'est surement parce que je ne maitrise pas beaucoup le sujet

Voile le simple test que j'essaye de faire fonctionner:
--------------
index.html: qui contient le premier lien
----------------

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <script type="text/javascript" src="../js/prototype.js"></script>
  <title></title></head>
  <style type="text/css">
	#liens{height: 30px;}
#contenu{background-color:	#eee;}
	</style>
 
  <body>
  <script type="text/javascript">
		var func_lien1 = function() {
			new Ajax.Updater('contenu','./callback.html',{evalScripts: true});
		}
	</script>
 
  <div id="liens">
  <a href="#" onclick="func_lien1()"> le lien</a>
  </div>
 
  <div id="contenu">
  	ici sera place le contenu du premier appel
  </div>
  </body>
</html>

-----------
callback.html pour le mise a jour du contenu et qui contient a son tour un autre lien que je n'arrive pas a executer
------------

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <script type="text/javascript" src="../js/prototype.js"></script>
  <title></title>
  </head>
 
  <script type="text/javascript">
		var func_lien2 = function() {
			new Ajax.Updater('contenu','./newcb.html');
		}
	</script>
 
  <a href="#" onclick="func_lien2()"> un autre lien ici</a>
 
    </body>
</html>

------
newcb.html
------

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

le contenu de mon deuxieme appel

Probablement que ma conception n'est pas bonne et il faut passer par un autre moyen

Merci d'avance

**razmous** · 25/11/2009, 15h22

Re,
Une des solutions consiste à copier le code javascript de ma deuxième fonction dans index.html
Cela résout partiellement mon problème car je pense que ce n'est pas bon de tout mettre sur la première page, il doit y avoir un moyen de faire des appels à des fonctions javascript

**razmous** · 22/12/2009, 16h47

Bonjour a tlm,
J'utilise la fonction Ajax.Updater pour mettre à jour un <div></div>. ce dernier contient du code Javascript. J'ai réussi à ce que ce dernier s'exécute avec la librairie "Really easy field validation with Prototype" (http://tetlaw.id.au/view/blog/really...ith-prototype/) mais j'ai un problème avec la librairie Tablekit (http://www.millstream.com.au/upload/...kit/index.html)

Merci d'avance de jeter un coup d'œil sur mon problème et aussi encore beaucoup si vous me trouverez une solution

En passant Joyeux Noël !

Voilà mon fichier index.html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <!-- CSS -->
	<link rel="stylesheet" type="text/css" href="../css/tablekit.css" />
 
  <!-- Javascript-->
  <script type="text/javascript" src="../js/prototype.js"></script>
  <script type="text/javascript" src="../js/tablekit.js"></script>
	<script type="text/javascript" src="../js/fastinit.js"></script>
 
	<script type='text/javascript'>
		TableKit.Editable.selectInput('name', {}, [['name1', 'name1'],['name2', 'name2']]);
		TableKit.Editable.selectInput('value', {}, [['value1', 'value1'],['value2', 'value2']]);
		TableKit.options.editAjaxURI='../lib/echo.php';
		Event.observe('1', 'dblclick', function() {
		  alert('Cannot be changed!');
		});
	</script>
  <title></title>
  </head>
 
  <body>
  <script type="text/javascript">
		var load_tablekit = function() {
			new Ajax.Updater('result','./test_tablekit.html', {evalScripts:true});
		}
	</script>
 
  <div id="liens">
  <a href="#" onclick="load_tablekit()"> le lien</a>
  </div>
 
  <div id="result">
  	ici sera place le contenu du premier callback
  </div>
 
 
  </body>
</html>

Voilà le fichier contenant TableKit

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <!-- CSS -->
	<link rel="stylesheet" type="text/css" href="../css/tablekit.css" />
 
  <!-- Javascript-->
  <script type="text/javascript" src="../js/prototype.js"></script>
  <script type="text/javascript" src="../js/tablekit.js"></script>
	<script type="text/javascript" src="../js/fastinit.js"></script>
 
	<script type='text/javascript'>
		TableKit.Editable.selectInput('name', {}, [['name1', 'name1'],['name2', 'name2']]);
		TableKit.Editable.selectInput('value', {}, [['value1', 'value1'],['value2', 'value2']]);
		TableKit.options.editAjaxURI='../lib/echo.php';
		Event.observe('1', 'dblclick', function() {
		  alert('Cannot be changed!');
		});
	</script>
  <title></title>
  </head>
 
  <body>
  <script type="text/javascript">
		var load_tablekit = function() {
			new Ajax.Updater('result','./test_tablekit.html', {evalScripts:true});
		}
	</script>
 
  <div id="liens">
  <a href="#" onclick="load_tablekit()"> le lien</a>
  </div>
 
  <div id="result">
  	ici sera place le contenu du premier callback
  </div>
 
 
  </body>
</html>

La fonction echo.php pour afficher le resultat dans tablekit

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<?php
        echo $_POST['value'];
?>

**gwyohm** · 22/12/2009, 16h52

La fonction echo.php pour afficher le resultat dans tablekit

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<?php
        echo $_POST['value'];
?>

C'est ton appel ajax ? et ca renvoie quoi ?
et au fait... c'est quoi le problème ?

**razmous** · 22/12/2009, 23h53

Salut

Oui, c'est vrai, j'avoue que je n'étais pas clair dans mon message précédent !

En fait, avec le fichier test_tablekit.html je suis capable de modifier le champ de mon tableau en ligne mais lorsque ce dernier est appelé par index.html (Ajax.Updater) je ne peux pas modifier les champs de mon tableau en ligne comme si le code Javascript ne s'exécute pas.

Merci d'avance

**razmous** · 28/12/2009, 16h00

ReSalut
UP
J'ai trouvé ça !
http://groups.google.com/group/dexag...25bd974e&pli=1

Mais par contre je ne sais pas comment mettre le setTimeout autour de ma fonction afin que ça marche !

Si qq'un peut m'aider ça serait un très bon cadeau de Noël !

A+

**razmous** · 28/12/2009, 21h29

Re
Je ne sais pas si ça peut interesser qq'un mais voilà après des tests je suis arrivé à celà.

le fichier : index_test_tablekit.htlm

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
<html><head>
	<script type="text/javascript" src="../js/prototype.js"></script>
	<script type="text/javascript" src="../js/tablekit.js"></script>
	<script type="text/javascript">
  	var gestionClick = function() { 
  	var url = './test_tablekit.html';
    	var divid = 'resultat';
    	var t = new Ajax.Updater(divid, url, {
		method: "POST",
				evalScripts: true,		
        onSuccess: setTimeout(function(transport) {
	      	t = new TableKit("tabs");
				}, 1000),
      });
  }</script></head>
<body>
<fieldset>
	<legend>Recherche</legend>
	<a href="#" onclick="gestionClick()">le lien</a>
	</fieldset>	
	<fieldset>
	<legend>Resultat</legend>
	<div id="resultat">
	ici le resultat de recherche
	</div>
	</fieldset>
	</body>
</html>

le fichier : test_tablekit.htlm

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <!-- CSS -->
	<link rel="stylesheet" type="text/css" href="../css/tablekit.css" />
	 </head>
  <!-- Javascript-->
  <script type="text/javascript" src="../js/prototype.js"></script>
  <script type="text/javascript" src="../js/tablekit.js"></script>
	<script type="text/javascript" src="../js/fastinit.js"></script>
 
  <body>
	<p>tablekit</p>
	<div id="content">
		<form method="POST" enctype="text" action="#">
			<table id='tabs' class='sortable resizable editable'>
				<thead><tr><th id='id'>id</th><th id='name'>Name</th><th id='value'>Value</th><th id='description'>Descriprion</th></tr></thead>
				<tbody>
					<tr>
						<td>1</td>
						<td>name1</td>
						<td>value1</td>
						<td>description 1</td>
					</tr>
					<tr>
						<td>2</td>
						<td>name2</td>
						<td>value2</td>
						<td>description 2</td>
					</tr>
					<tr>
				</tbody>
			</table>
		</form>
	</div>
<script type='text/javascript'>
		TableKit.Editable.selectInput('name', {}, [['name1', 'name1'],['name2', 'name2']]);
		TableKit.Editable.selectInput('value', {}, [['value1', 'value1'],['value2', 'value2']]);
		TableKit.options.editAjaxURI='../lib/echo.php';
		Event.observe('1', 'dblclick', function() {
		  alert('Cannot be changed!');
		});
	</script>
 </body>
</html>

Evaluer un script avec Ajax.Updater [Prototype]

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager