Interpréter javascript après appel ajax

Version imprimable

22/10/2009, 17h54
Monico

Interpréter javascript après appel ajax

Bonjour,

je viens vous solliciter car je commence à désespérer.

J'ai décidé de passer de prototype à jquery pour des raisons de performance entre autre.
Dans prototype, au moment de ma requête ajax, j'avais une option evalscript qui permettait de garder mes actions javascript une fois le traitement effectué.

J'ai cherché son équivalent au niveau de jquery en vain, d'où ma sollicitation.
De ce que j'aurai compris, la dernière version de jquery (1.3.2) ne nécessite plus d'evalscript car il réinterprète le code, mais ce n'est pas le cas chez moi.

Je précise que tout s'exécute au niveau d'une fenêtre modal appelé par la fonction dialog(), c'est donc peut être cela qui empêche se rechargement.
Une autre solution serait peut être de recharger cette fenêtre, mais la encore je n'ai pas trouvé.

Si quelqu'un peut m'aider, je suis preneur car la je suis perdu.

Merci d'avance
22/10/2009, 19h07
Bovino

Salut !

Code:

dataType: 'html'

Merci pour cette réponse, et en effet j'avais cru comprendre que cette option servait à cela, mais ça ne marche pas chez moi...

Voila mon code ajax pour plus de détail :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 $.ajax({ type: "POST", url: "ajax.php", data: "value="+value, dataType: 'html', beforeSend: function(){ $('#content').html(''); // efface le contenu actuel $('#load').show(); // affiche l'image de chargement }, success: function(){ $('#load').hide(); $('#content').load('ma_page.php'); } });
J'ai donc deux interrogations.
- est ce parce que je fais un load que ça ne marche pas ?
- ou est ce parce que je me trouve dans une fenêtre modal via la fonction dialog() ?

Merci beaucoup pour votre aide en tout cas

23/10/2009, 10h19
marcha

Salut,

JQuery évalue les script javascript contenu dans des réponses html uniquement
au moment de l'insertion dans le DOM, pas au moment de la réception.

Dans ton exemple, tu ne gère même pas la réponse dans success, aucune
chance que le script soit évalué.

Par contre tu lances une deuxième requête ajax avec load(), dans ce cas
il y aura évaluation du javascript contenu dans la réponse de ma_page.php
car il y a insertion dans #content
23/10/2009, 10h50
Monico

Merci pour cette réponse même si je ne suis pas bien sur de la comprendre.

D'un côté tu dis qu'il n'y a pas de chance que ce soit réinterprété et de l'autre que via le load ça devrait ?

Qu'est ce que tu entends par non gestion de la réponse dans success ?

Le but ici, est suite à une action, réactualiser la page (ou plutot la fenetre modale) pour afficher le résultat de l'action (un insert dans une bdd, donc une ligne de plus dans la page). Donc pour moi la réponse se situe au niveau du load. Après je me trompe peut être en faisant un load, il y a peut être un moyen plus simple.

"ajax.php" contient l'insertion dans la bdd et "ma_page.php" contient tout le code d'affichage avec notamment les JS que je veux réinterpréter. C'est cette même page qui est chargé au lancement de la fenetre modale.

Merci pour ton aide
23/10/2009, 11h13
marcha
Salut,

Ok, je pensais que ton script javascript se situait dans ajax.php

la fonction load fait une requête Ajax et insère le résultat dans le DOM,
donc elle évalue les script à cet instant là.

tu devrais tester déjà en créant un contenu statique dans ma_page.php
avec quelque chose du genre:
Code:

1 2 3 4 <p>test</p> <script type='text/javascript'> alert('coucou'); </script>
23/10/2009, 11h18
Monico

le code javascript est bien interprété dans ma_page.php. Il ne l'est plus dès que j'utilise la fonction load au niveau du success.
J'ai désactivé la ligne correspondant au load et mon traitement dans ajax.php s'effectue bien, et mon javascript est toujours interprété dans ma_page.php, donc je pense que le problème vient du load. Je m'en passerai bien si il y avait un autre moyen pour réactualiser mon cadre et donc afficher l'action faite par l'utilisateur.
23/10/2009, 11h21
marcha

peux tu poster un peu plus de code stp

bien sur.

alors voila le contenu de la page left.php qui permet d'ouvrir la pop up modal :

Code:

1
2
 
<div id="dialog-lieux"><?php include("ma_page.php"); ?></div>

je fais appel dans mon head à une page js qui contient toutes les fonctions nécessaires pour ma_page.php

Code:

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
48
49
50
51
52
53
54
55
56
57
58
 
$(function() {
	// ### gerer les lieux ###
        // ouvre la fenetre modal
	$('#dialog-lieux').dialog({
		bgiframe: true,
		autoOpen: false,
		height: 'auto',
		width: 700,
		modal: false,
		open: function(ev, ui) {
		$('#addlocName').focus(); // Set focus
		}
	});
 
	$('#lieux_games').click(function() {
		$('#dialog-lieux').dialog('open');
	});
 
	// tri des lieux --> c'est mon traitement js qui ne marche plus après le load
	$("#lieux_up").sortable({
		axis: 'y',
		handle: '.dragme',
		cursor : 'crosshair',
		stop : function() {
			serial = $("#lieux_up").sortable('serialize');
			$.ajax ({ type: "POST",dataType: "html", url: "ajax.php", data: serial});
		}
	});
	$("#lieux_up").disableSelection();
 
	// ajout d un lieu manuel --> c'est ma fonction ajax
	$("#loc_add").click(function() 
	{
		if($('#addlocName').val()!='')
		{
			// on recupere tous les champs du formulaire
			var form_fields = $('form#games_loc_form').serialize();
 
			// on les envoies en ajax
			$.ajax({  
			type: "POST",  
			url: "ajax.php",  
			data: form_fields,
			dataType: "html",
			beforeSend: function(){  
				$('#content_locations').html('');
				$('#load_locations').show();
			},
			success: function(){  
				$('#load_locations').hide();
			        $('#content_locations').load('ma_page.php'); // -> si je commente cette ligne, mon JS est toujours interprété
			}
			});
		}
		return false;
	});
});

et dans la page ajax.php, juste les traitements sql :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<?php 
session_start();
include("functions/config.php"); // charge les parametres de la bdd
 
 
// enregistre la position des lieux suite au drag/drop
if(isset($_POST["lieux_up"]))
{
        foreach($_POST["lieux_up"] as $position=>$id) 
        {
                mysql_db_query($sql_bdd,"UPDATE locations_add SET priorite ='".$position."' WHERE id_locations_add='".$id."'");
        }
}
 
// ajoute un lieu manuel
if(isset($_POST["addlocName"]))
{
        $texte = $_POST["addlocName"];
        $id_locations_type = $_POST["addlocType"];
        mysql_db_query($sql_bdd,"INSERT INTO locations_add (texte,id_locations_type,id_users,priorite) SELECT \"".htmlentities(utf8_decode($texte))."\",'".htmlentities(utf8_decode($id_locations_type))."','".$id_users."',MAX(priorite)+1 FROM locations_add WHERE id_users='".$id_users."'");
}
?>

voila, tout est la normalement.

ah, il manque ma_page.php

Code:

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
 
<?php
session_start();
include_once("functions/config.php");
?>
<div class="load" id="load_locations"><img src="images/Decor/loader_green.gif" height="16" width="16" alt="" /></div>
<div id="content_locations">
	<table border="0" width="100%">
		<tr>
			<td align="left" valign="top" width="50%">
				<div class="frame">
					<div class="sub_title"><?php echo $lang["locations"]["myloc"]; ?></div>
					<div id="lieux_up" class="editable">
						<?php
                                                $a=0;
                                                $req = mysql_db_query($sql_bdd,"SELECT la.id_locations_add,la.*,lt.texte AS type_location FROM locations_add la LEFT JOIN locations_type lt ON la.id_locations_type=lt.id_locations_type WHERE la.id_users='".$id_users."' ORDER BY la.priorite");
                                                while($rec = mysql_fetch_array($req))
                                                {
                                                        //$couleur = choix_couleur($a,$couleur1,$couleur2);
                                                        ?>
							<table border="0" width="100%" id="lieux_up_<?php echo $rec["id_locations_add"]; ?>">
								<tr>
									<td align="center" width="5%"><img src="images/Buttons/move.png" height="16" width="16" alt="" class="dragme" /></td>
									<td align="left">
										<div id="lieux_edit<?php echo $rec["id_locations_add"]; ?>">
											&nbsp;<?php echo "[".$rec["type_location"]."]"." ".$rec["texte"]; ?>
										</div>
									</td>
								</tr>
							</table>
							<?php
                                                        $a++;
                                                        }// fin du while
                                                        ?>
					</div>
				</div>
			</td>
			<td align="left" valign="top" width="50%">
				<div class="frame">
					<div class="sub_title"><?php echo $lang["locations"]["addloc"]; ?></div>
					<form id="games_loc_form" method="post" action="#">
					<table border="0" width="100%">
						<tr>
							<td align="left"><?php echo $lang["locations"]["name"]; ?></td>
							<td align="left"><input type="text" name="addlocName" id="addlocName" style="width:95%;" /></td>
							<td align="left" rowspan="2" valign="top"><input type="submit" id="loc_add" name="loc_add" value="<?php echo $lang["global"]["ok"]; ?>" /></td>
						</tr>
						<tr>
							<td align="left"><?php echo $lang["locations"]["type"]; ?></td>
							<td align="left">
								<select name="addlocType" id="addlocType">
								<?php
                                                                $req = mysql_db_query($sql_bdd,"SELECT id_locations_type,texte FROM locations_type ORDER BY ordre");
                                                                while($rec = mysql_fetch_array($req))
                                                                {
                                                                        echo "<option value='".$rec["id_locations_type"]."'>".$rec["texte"]."</option>";
                                                                }
                                                                ?>
								</select>
							</td>
						</tr>
					</table>
					</form>
				</div>
			</td>
		</tr>
	</table>
</div>

Merci beaucoup pour ton aide en tout cas.

Salut,

Je pense que tu confonds evalScript de prototype avec la problématique
que tu rencontres. Ce qui nous a induit en erreur Bovino et moi dans nos
réponses.

Si je lis ton commentaire:
// tri des lieux --> c'est mon traitement js qui ne marche plus après le load

Il s'agit d'une fonctionnalité qui n'est plus disponible après un rechargement
d'une section de la page. Ce qui n'a rien à voir avec la notion d'evalScript

Il n'y a pas de balise <script> dans ma_page.php, donc rien à évaluer.

Je pense que ton problème s'apparente à ce post
Code:

1 2 3 4 5 6 7 8 9 10 $("#lieux_up").sortable({ axis: 'y', handle: '.dragme', cursor : 'crosshair', stop : function() { serial = $("#lieux_up").sortable('serialize'); $.ajax ({ type: "POST",dataType: "html", url: "ajax.php", data: serial}); } });
Cette fonction initialise des gestionnaires d'évènements sur des éléments du DOM
qui sont ensuite remplacés par de nouveaux (lorsque tu fais ton load), ces nouveaux
éléments n'ont pas des gestionnaires initialisés. Il te faut rappeler ce code après
le load (voir le post que j'ai mentionné)

En effet c'est exactement ça le problème, merci beaucoup et désolé pour la confusion.

Par contre, c'est un peu contraignant, car je dois rappeler toutes mes options à chaque fois ? C'est un peu lourd, il y a pas moyen de faire autrement (via une fonction ou autre) ?

car la ça donne quelque chose du genre :

Code:

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
 
// tri des lieux
	$("#lieux_up").sortable({
		axis: 'y',
		handle: '.dragme',
		cursor : 'crosshair',
		stop : function() {
			serial = $("#lieux_up").sortable('serialize');
			$.ajax ({ type: "POST",dataType: "html", url: "ajax_locations.php", data: serial});
		}
	});
	$("#lieux_up").disableSelection();
 
	// ajout d un lieu manuel
	$("#loc_add").click(function() 
	{
		if($('#addlocName').val()!='')
		{
			// on recupere tous les champs du formulaire
			var form_fields = $('form#games_loc_form').serialize();
 
			// on les envoies en ajax
			$.ajax({  
			type: "POST",  
			url: "ajax_locations.php",  
			data: form_fields,
			dataType: "html",
			beforeSend: function(){  
				$('#content_locations').html('');
				$('#load_locations').show();
			},
			success: function(){  
				$('#load_locations').hide();
				$('#content_locations').load('left_games_locations.php',function() {
 					$('#lieux_up', $('#content_locations')).sortable({
		axis: 'y',
		handle: '.dragme',
		cursor : 'crosshair',
		stop : function() {
			serial = $("#lieux_up").sortable('serialize');
			$.ajax ({ type: "POST",dataType: "html", url: "ajax_locations.php", data: serial});
		}
	});
		}
		return false;
	});

et comme je n'ai pas que la fonction sortable dans ma page, ça devient assez lourd.

Merci

Salut,

Tu crée une fonction pour ça:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
 
function initLieuxSortable() {
	$("#lieux_up").sortable({
		axis: 'y',
		handle: '.dragme',
		cursor : 'crosshair',
		stop : function() {
			serial = $("#lieux_up").sortable('serialize');
			$.ajax ({ type: "POST",dataType: "html", url: "ajax_locations.php", data: serial});
		}
	});
}

et tu l'appelle à l'initialisation de la page et au load.

23/10/2009, 16h25
Monico

C'est parfait, merci beaucoup !

Je vais juste abuser encore un petit peu, est ce que c'est possible de mettre un loader sur la fonction load() afin de montrer que la parge se charge. Je le mets bien sur l'ajax, mais après il disparait au moment du load et donc on ne voit pas que ça charge.

Je n'ai pas trouvé cette option au niveau du load.

Merci :)
25/10/2009, 16h02
marcha

Salut,

tu actives ton loader avant de faire le load() et tu passe
en paramètre à load une fonction callback (qui est appelée
quand la requête est terminée) dans laquelle tu déactive
ton loader.

voir la doc de load
26/10/2009, 10h40
Monico

C'est parfait !

Merci beaucoup pour ton aide !