Passer référence objet javascript via ajax

**fabienhespul** · 01/07/2010, 14h16

Bonjour,

je souhaiterais passer la référence vers un objet javascript dans une requête ajax qu'exécute cet objet afin de pouvoir appeler les méthodes de cet objet javascript a partir du code HTML récupéré de la requête AJAX :

jQuery est utilisé pour faire la requête ajax.

Exemple :
L'objet javascript : objetjs.js

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
 function monobj() {
    this.test = "bonjour";
 }
 
monobjet.prototype = {
  requeteajax:function() {
 
    $.ajax({url: "machin.php",
             context:this,
             cache:false,
             type:"POST",
             data:(donnees),
             success:function(data) {
 
                $("#conteneur").html(data);
 
              }
      });
 
  }
 
  fonctiontest:function() {
    alert(this.test);
  }
 
}

Le fichier utilisant l'objet javascript : 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
 
<html>
<head>
<script type="text/javascript" src="objetjs.js" ></script>
</head>
<body>
 
<div id="conteneur"></div>
 
<script type="text/javascript">
  var monobjettest = new monobjet();
  monobjettest.requeteajax();
</script>
 
</body>
</html>

Le fichier requêté : machin.php

Code :

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

1
2
3
4
5
 
<?php
traitement php...
?>
<a href="#" onclick="monobjettest.fonctiontest()" > Lien </a>

En gros je voudrai d'une manière ou d'une autre faire appel a l'instance de monobjettest qui a servi a charger machin.php. (dans cet exemple j'aimerais afficher une alert "Bonjour")
Bien sur le nom "monobjettest" pourra changé, il ne faudrait pas qu'il soit en statique comme dans l'exemple ci-dessus.

L'objectif principale de tout cela est d'afficher via AJAX le résultat d'un recherche et de proposer un lien "page suivante" qui recharge en ajax la page suivante dans le même conteneur avec les mêmes paramètres que contient mon objet js.

Ce n'est peut être pas la bonne méthode, je serai ravi que l'on me corrige dans ce cas !

Merci,
Fabien

**Watilin** · 01/07/2010, 16h50

Salut !

Alors si ce que tu veux faire est : obtenir côté serveur une référence vers un objet qui se trouve dans la RAM côté client, la réponse est : c’est impossible !

Une solution naïve : renvoyer un lien avec un onclick vide et le compléter dynamiquement.
Problème : Safari ne digère pas… et il a raison : les attributs onclick, c’est préhistorique !

Deuxième solution : renvoyer un lien sans onclick et lui lier un gestionnaire d’évènement avec la méthode .click de jQuery.

Code :

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

1
2
3
4
success: function(data) {
	$(data).click(monobjettest.fonctiontest);
	$('#conteneur').html(data);
}

Mais à la réflexion, le serveur renvoie toujours a même chose… Autant économiser de la bande passante ! Imaginons plutôt qu’il renvoie une information courte, par exemple un nombre, pour préciser si tout s’est bien passé ou pas.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<?php
// …
 
// on précise que l’info est du texte brut, comme ça
// le navigateur n’essaye pas d’interpréter du XML ou du HTML
header('content-type: text/plain');
 
if ($ok) {
        echo 1;
} else {
        echo -1;
}
?>

Ça permet d’enrichir l’ergonomie du site en racontant des trucs à l’utilisateur quand il y a des erreurs de serveur. Quant au lien… on le crée avec jQuery !

Code :

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

1
2
3
4
5
6
7
8
9
10
success: function(data) {
	if (data == '-1') {
		alert('Il y a eu une erreur sur le serveur, veuillez réessayer…');
	} else {
		var $a = $('<a href="#"> Lien </a>');
		$a.click(monobjettest.fonctiontest);
 
		$('#conteneur').html($a);
	}
}

Reste un léger problème : comment utiliser le bon « monobj » au bon moment ?
La solution, c’est jQuery qui nous la donne : il s’agit du paramètre context. L’objet de contexte peut être accédé via this dans les fonctions de rappel, et comme tu l’as déjà fait, on peut s’en servir directement.

Code :

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

1
2
3
success: function(data) {
	this.fonctiontest();
}

Cependant, il y a un léger souci : si on passe this.fonctiontest en paramètre à la méthode click, le contexte sera perdu. Heureusement, jQuery a prévu ça aussi, avec la fonction proxy !

Voici donc le code final :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
success: function(data) {
	if (data == '-1') {
		alert('Il y a eu une erreur sur le serveur, veuillez réessayer…');
	} else {
		var $a = $('<a href="#"> Lien </a>');
 
		$a.click($.proxy(this.context, 'fonctiontest'));
 
		$('#conteneur').html($a);
	}
}

Edit : Autant pour moi, je me suis mépris sur le contexte rendu par le paramètre context : il s’agit de l’objet contenant les paramètres (url, type, data, etc.) et non pas le contexte lui-même.
J’ai corrigé mon code

**fabienhespul** · 01/07/2010, 18h24

Wouch, je viens de parcourir une sacrée distance dans l'univers ajaxien.
Merci pour toutes ces informations merveilleuses. Je crois que ca répond parfaitement à mon problème.

Dès demain je m'emploie a tester tout cela.

Merci pour ta super réponse !

A+

Fabien

**marcha** · 01/07/2010, 21h59

Hello,

A mon avis il te manque la notion de closure car c'est le moyen
que tu aurais du utiliser pour conserver la référence de ton objet
lors des appels/réponses ajax.

Voici un exemple fonctionnel pour tester l'idée, ensuite tu
adaptera à ton code

La page app.php qui simule la pagination des résultats et
produit le lien pour la page suivante

Code :

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

1
2
3
4
5
6
7
8
 
<?php
   $n = $_REQUEST['n'];
   $o = $_REQUEST['o'];
   for($i=0;$i<$n;$i++) echo "Item ".($o++)."<br />";
   $url = "app.php?n=$n&o=$o";
   echo "<a href='$url'>next</a>";
?>

Et la page html pour tester:

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src='jquery-1.4.2.min.js'></script>
<script type='text/javascript'>
$(function() {
	$('.box').each(function() {
		// sauve l'instance qui sera accessibles aux fonctions internes
		// grace à la closure crée par javascript
		var obj = $(this); 
		var initLink = function() {
			$('a', obj).click(function(event) {
				obj.load($(this).attr('href'), initLink);
				return false;
			});
		};
		initLink();
	});
});
</script>
</head>
<body>
<h3>box 1</h3>
<div class='box'><a href='app.php?n=5&o=0'>start</a></div>
<h3>box 2</h3>
<div class='box'><a href='app.php?n=7&o=0'>start</a></div>
<h3>box 3</h3>
<div class='box'><a href='app.php?n=3&o=0'>start</a></div>
</body> 
</html>

La fonction initlink map l'événement du click sur le lien. et
je l'ai passée directement à .load() pour qu'elle soit rappellée
à nouveau après le chargement.

On aurait pu éviter ça avec les évènement 'live', mais c'est
pas forcement mieux.

Passer référence objet javascript via ajax

jQuery

Discussions similaires

Partager

Partager