Récupérer la valeur de retour d'une fonction JS

Version imprimable

Bonjour,

J'ai un bouton généré en PHP dont le click provoque l'appel à une fonction JS. Cette fonction récupère la valeur de deux input de type text. Elle les concatène puis retourne le résultat.

Le clic sur le bouton est en fait sensé insérer cette valeur de retour dans une div. Mon problème est que ça ne fonctionne pas.

L'appel de la fonction JS, la concaténation des champs input et leur affichage dans un alert fonctionne mais pas l'insertion de la valeur de retour dans la div.

Pourquoi ?

Voici le code :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <?php echo javascript_tag(" function getNotifierNameAndTitle() { alert($('newNotifierName').value.concat(', ').concat($('newNotifierTitle').value)).concat('<br />'); return $('newNotifierName').value.concat(', ').concat($('newNotifierTitle').value).concat('<br />'); } ") ?> <?php echo button_to_function('Add', update_element_function('notifiers', array( 'position' => 'after', 'content' => "<script>getNotifierNameAndTitle()</script>", ) ) ); ?>
Merci d'avance

17/02/2009, 10h46
sabotage

PHP etant executé sur le serveur, il a fini depuis longtemps son travail quand tu cliques sur le bouton.

Si tu veux faire interagir PHP et Javascript il faut te pencher sur Ajax.

Je craignais justement de ne pas avoir été suffisamment clair.

Je sais bien que PHP et JS ne s'executent pas du tout au même moment, ni au même endroit.

PHP me sert ici à générer un bouton dans ma page et d'y associer une fonction JS.

Ma fonction JS est d'ailleurs bien appelée lorsque je clique sur le bouton. Mon problème, c'est que la valeur de retour de cette fonction JS se "perd" alors que mon but est de l'insérer dans une div.

A titre d'information et pour éclaircir ma problématique, le code généré et reçu par Firefox est le suivant :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <script type="text/javascript"> //<![CDATA[ function getNotifierNameAndTitle() { //alert($('newNotifierName').value.concat(', ').concat($('newNotifierTitle').value)).concat('<br />'); return $('newNotifierName').value.concat(', ').concat($('newNotifierTitle').value).concat('<br />'); } //]]> </script> <h2 style="background-color:#DCE4FC; width:600px;">Incident notifiers</h3> <div id='notifiers' style="height: 100px; width:600px; overflow:auto;"> </div> <label for="newNotifierName">Notifier's name:</label> <input type="text" name="newNotifierName" id="newNotifierName" value="Name" /> <label for="newNotifierTitle">Notifier's title:</label> <input type="text" name="newNotifierTitle" id="newNotifierTitle" value="Title" /> <input onclick="$('notifiers').insert('<script>getNotifierNameAndTitle()</script>','after'); ; return false;" type="button" value="Add" />

17/02/2009, 11h07
RideKick
ça ne serait pas plutot :

Code:

$('notifiers').value

a la place de
Code:

1 2 $('notifiers').insert
?
17/02/2009, 11h20
gobgob

Non, le insert a été généré par une fonction php qui permet d'ajouter du contenu dans un id de la page html à l'aide de javascript.
17/02/2009, 11h23
RideKick

Je comprends rien a ton code , je pensais que tu utilisais jQuery rapport a la notation : $()

Maintenant de ce que je vois dans ton onClick tu insers dans ton Div la valeur retournée par la fonction getNotifierNameAndTitle()

Mais bon c'est pas très clair ...
17/02/2009, 11h27
Palca

Si j'ai bien compris, tu veux afficher la valeur de tes deux champs après ton formulaire ?
Parce que si c'est le cas, il suffit de créer un div vide à l'endroit où tu veux afficher le résultat, et de lui insérer ce que tu veux avec les fonctions jQuery text() ou html().
17/02/2009, 11h29
RideKick
Citation:

Envoyé par Palca

Si j'ai bien compris, tu veux afficher la valeur de tes deux champs après ton formulaire ?
Parce que si c'est le cas, il suffit de créer un div vide à l'endroit où tu veux afficher le résultat, et de lui insérer ce que tu veux avec les fonctions jQuery text() ou html().

Apparement il y a deja un debut de ça , le div est celui la :
Code:

1 2 3 <div id='notifiers' style="height: 100px; width:600px; overflow:auto;"> </div>
Par contre le reste est vraiment écris étrangement .

J'ai l'impression que t'as essayé de bidouiller avec jQuery sans vraiment comprendre comment ça marche (et avoir beaucoup lu la doc).
Essaye ce code, ça devrait aller mieux :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script type="text/javascript">
//<![CDATA[
 
	function getNotifierNameAndTitle()
	{
var retour = $('#notifiers').html() + $('#newNotifierName').val() + ", " + $('#newNotifierName').val() + "<br />";
		$('#notifiers').html(retour);
return false;
	}
 
//]]>
</script>
<h2 style="background-color:#DCE4FC; width:600px;">Incident notifiers</h3>
 
	<div id='notifiers' style="height: 100px; width:600px; overflow:auto;">
			</div>
 <form onsubmit="return getNotifierNameAndTitle();">
	<label for="newNotifierName">Notifier's name:</label>
  	<input type="text" name="newNotifierName" id="newNotifierName" value="Name" />	<label for="newNotifierTitle">Notifier's title:</label>
 	<input type="text" name="newNotifierTitle" id="newNotifierTitle" value="Title" />
 	<input type="submit" value="Add" />
 </form>

17/02/2009, 14h44
gobgob

Je n'utilise pas JQuery mais Symfony + Prototype. Les *_tag(...) sont des helpers, cad des fonctions php permettant d'écrire plus rapidement du code JS (dans mon cas).

Mon code fonctionne si ce n'est que je ne suis pas certain que ma fonction JS retourne effectivement quelque chose. Si elle retourne bien la string que je lui demande, alors je ne la récupère pas, ou pas comme il faut puisqu'elle n'est insérée nulle part dans ma page. C'est sur ce point là que je solicite votre aide.
17/02/2009, 17h09
Palca

Je n'ai jamais utilisé Symphony ou Prototype donc j'ignore comme ils fonctionnent, mais à mon avis pour ce que tu veux faire autant utiliser du "simple" JS avec lequel ce serait codé en 5 mins plutôt que de passer par un framework qui a l'air de pas mal compliquer les choses.

J'ai donc tenté de faire du JS pur et j'ai écris le code suivant :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<script type="text/javascript">
//<![CDATA[
 
 function getNotifierNameAndTitle()
 {
	var name = $('newNotifierName').value;
	var title = $('newNotifierTitle').value;
 
	//We create the checkbox tag
	var toInsert = ('<input type="checkbox" name="notifiers_selection[]"');
	toInsert = toInsert.concat(' value="').concat(name).concat('|').concat(title).concat('" />');
 
	//We write juste after the checkbox
	toInsert = toInsert.concat(name).concat(', ').concat(title).concat('<br />'));
 
	//We insert the data in the div
	$('notifiers').insert(toInsert, 'after');
 }
 
//]]>
</script>

1- est il possible d'écrire un code moins lourd ?
2- pourquoi ça ne fonctionne pas ? (rien ne se passe)

Je comprends vraiment pas ce que tu cherches à faire là...
- C'est quoi ce checkbox au beau milieu de tout ? A la base c'était pas afficher les valeurs des champs que tu voulais faire ?
- Ta fonction $(), où est-elle déclarée ?

Pour récupérer simplement la valeur de deux champs et l'afficher dans un div, tu peux procéder comme ça :

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
<script type="text/javascript">
//<![CDATA[
 
	function getNotifierNameAndTitle()
	{
var notifiers = document.getElementById('notifiers');
var newNotifierName = document.getElementById('newNotifierName');
var newNotifierTitle = document.getElementById('newNotifierTitle');
 
var retour = notifiers.innerHTML + newNotifierName.value + ", " + newNotifierTitle.value + "<br />";
		notifiers.innerHTML = retour;
return false;
	}
 
//]]>
</script>
<h2 style="background-color:#DCE4FC; width:600px;">Incident notifiers</h3>
 
	<div id='notifiers' style="height: 100px; width:600px; overflow:auto;">
			</div>
 <form onsubmit="return getNotifierNameAndTitle();">
	<label for="newNotifierName">Notifier's name:</label>
  	<input type="text" name="newNotifierName" id="newNotifierName" value="Name" />	<label for="newNotifierTitle">Notifier's title:</label>
 	<input type="text" name="newNotifierTitle" id="newNotifierTitle" value="Title" />
 	<input type="submit" value="Add" />
 </form>