[Prototype Window] Obtenir la valeur d'un formulaire dans la Window

Invité · 02/12/2008, 17h07

Bonjour,

J'utilise les bibliothèques Prototype et Prototype Window. Je suis confronté au problème suivant :
J'ai une Window qui affiche un formulaire. Je voudrais fermer la fenêtre et récupérer la valeur des champs de se formulaire lorsque l'utilisateur cliqueras sur le bouton submit du formulaire.

1° - Comment fermer la fenêtre lorsque l'utilisateur clique sur le bouton submit ?
2° - Comment récupérer la valeur d'un champ contenu dans la fenêtre ?

Merci.

PS : Je ne trouve pas beaucoup de documentation sur Prototype et Prototype Window autres que les API (qui ne sont pas l'idéal pour débuter). Avez-vous quelques bonnes urls ?

Merci

**SpaceFrog** · 02/12/2008, 20h24

C'est une fausse fenetre ( un div en fait )... le champs est sur la page, donc fait comme pour un formulaire qui serait sur la même page

pour le fermeture de la fenetre faut lancer un .close()

**RomainVALERI** · 02/12/2008, 21h24

Si ma mémoire est bonne, pour accéder à n'importe quel élément de la page avec Prototype, tu fais

Code :

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

var tonElement = $('tonElement');

et il te renvoie un élément étendu.

"tonElement" étant en fait soit l'id soit l'élément lui-même (enfin sa référence) au choix.

Invité · 03/12/2008, 10h41

Merci pour vos réponses.

Mais si le contenu de mon formulaire est obtenu par une URL ou une requête Ajax, celà peut-il également fonctionner ?

Pour le récupération des champs, je suppose que oui. Mais pour la fermeture de la fenêtre, je ne vois pas comment provoquer la fermeture dans le cas ou le contenu (pas sur le même page) 0n'auras pas de référence à la fenêtre.

**SpaceFrog** · 03/12/2008, 11h01

marrant ça ...
puisqu'on te dit que c'est sur la même page ... (même si la réponse provient d'une url)

sauf si tu as mis un iframe dans ta reponse ajax ...

Invité · 03/12/2008, 16h28

Après avoir testé je n'y parviens toujours pas.

Mon code est le suivant :

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
function add() {
        win = new Window({
            title: "Test", 
            width:600, 
            height:450, 
            destroyOnClose: false, 
            maximizable: false,
            minimizable : false,
            recenterAuto: false,
            onClose: addColumns
            });   
	win.setURL('/forms/addColumn.html');
        win.show();                    
    }
 
    function addColumns() {
    	var form = $('addColumnForm');
    	var title = $F(form['title']);
    	var max = $F(form['maximum']);
    	if (title=="" || max=="")
    		return;
 
    	var items;
 
    	for ( var i=0; i<(items = $$('#cotations thead tr th.blank')).length; i++ ) {
    		var column = new Element('th');
    		if ( i==0 ) 
    			column.update(title);
    		else
    			column.update('/'+max);
    		items[i].insert( {before : column} );
    	}
    	for ( var i=0; i<(items = $$('#cotations tbody tr td.blank')).length; i++) {
    		var column = new Element('td').insert(new Element('input', {'type':'text', 'size':'2', 'maxlength':'3'}));
    		items[i].insert( {before : column} );
    	}
    }

Et le contenu de la page /forms/addColumn.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
 
<form id="addColumnForm">
		<table>
		<tr>
			<td><label for="title">???label.Title???</label></td>
			<td><input type="text" name="title" id="title"/></td>
 
		</tr>
		<tr>
			<td><label for="maximum">???label.Maximum???</label></td>
			<td><input type="text" name="maximum" id="maximum" size="3" /></td>
		</tr>
		<tr>
			<td coslpan="2">
				<input type="reset" value="Cancel" />
 
				<input type=button value="Save" onclick="close();"/>
			</td>
		</tr>
</form>

Merci pour votre aide

Invité · 05/12/2008, 13h05

Au final il semblerais que ce ne soit pas si simple que ça..

**SpaceFrog** · 05/12/2008, 13h21

que te retourne ce code:

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
function add() {
        win = new Window({
            title: "Test", 
            width:600, 
            height:450, 
            destroyOnClose: false, 
            maximizable: false,
            minimizable : false,
            recenterAuto: false,
            onClose: addColumns
            });   
	win.setURL('/forms/addColumn.html');
        win.show();              
        setTimeout(function(){alert(document.forms[0].id)},2000);      
    }

quitte à augmenter le timeout ...

Invité · 05/12/2008, 13h43

Bonjour et Merci,

Même avec un timeout de 10000 ce code ne dis rien, l'alerte ne s'affiche pas. Par conter dans la "console javascript" du plugin "developer toolbar de Firefox j'ai l'erreur suivante :

Error: document.forms[0] is undefined
Source File: http://blabla/blublu/forms/test.html
Line: 182

Et lorsque j'inspecte la page avec Firebug je retrouve la structure suivante :

html>body>div#window...115.dialog>table#window_...og_content>iframe#win..15_content>html>body>form#addColumnForm

Je me dis donc que c'est "normal" de ne pas avoir de formulaire dans "document" étant donné que le tout est dans une IFrame.. Mais alors comment résoudre la chose (l'idéal à mon avis serais d'éviter l'IFrame)?

Edit 1 : La documentation est claire : "URL for content (content will be shown using an iframe)"
Edit 2 : J'utilise "setAjaxContent(..)" qui place le contenu dans une div et ça marche pour la récupération des valeurs. Mais comment faire pour fermer la fenêtre car "onclick:close();" ne fais rien..

Merci

**SpaceFrog** · 05/12/2008, 14h04

iframe ????
window.prototype ne passe pas par des iframes !!!!

lightbox oui

si tu as firefox et la devwebtoolbar
regarde le code généré une fois que la "popup" est visible

Invité · 05/12/2008, 14h20

Hé bien avec setAjaxContent le contenu est le suivant :

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
 
<div id="window_1228482934560" class="dialog" style="left: 509px; top: 111.5px; width: 204px; height: 342px; z-index: 1;">
<div onclick='Windows.close("window_1228482934560", event)' id="window_1228482934560_close" class="dialog_close"> </div>      
<table class="top table_window" id="window_1228482934560_row1">        
  <tbody>
    <tr>
      <td class="dialog_nw top_draggable"/>          
      <td class="dialog_n">
        <div class="dialog_title title_window top_draggable" id="window_1228482934560_top">???title???</div>
       </td>          
      <td class="dialog_ne top_draggable"/>         
     </tr>      
   </tbody>
</table>      
<table class="mid table_window" id="window_1228482934560_row2">        <tbody><tr>          <td class="dialog_w"/>            <td valign="top" class="dialog_content" id="window_1228482934560_table_content"><div class="dialog_content" id="window_1228482934560_content" style="height: 300px; width: 200px;">
 
<h1>???title???</h1>
 
<form id="addColumnForm">
		<table>
		<tbody><tr>
			<td><label for="title">???label.Title???</label></td>
			<td><input type="text" id="title" name="title"/></td>
		</tr>
		<tr>
			<td><label for="maximum">???label.Maximum???</label></td>
			<td><input type="text" size="3" id="maximum" name="maximum"/></td>
		</tr>
		<tr>
			<td coslpan="2">
				<input type="reset" value="Annuler"/>
				<input type="button" onclick="close();" value="Enregistrer"/>
			</td>
		</tr>
	</tbody></table>
</form></div></td>          <td class="dialog_e"/>        </tr>      </tbody></table>        <table class="bot table_window" id="window_1228482934560_row3">        <tbody><tr>          <td class="dialog_sw bottom_draggable"/>            <td class="dialog_s bottom_draggable"><div class="status_bar" id="window_1228482934560_bottom"><span style="float: left; width: 1px; height: 1px;"/></div></td>            <td id="window_1228482934560_sizer" class="dialog_sizer bottom_draggable"/>        </tr>      </tbody></table>    </div>

Mais avec setURL(..) il y à bien une IFrame.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<div id="window_1228483162929" class="dialog" style="left: 241.349px; top: 20.1677px; width: 204px; height: 342px; z-index: 1;">
<div onclick='Windows.close("window_1228483162929", event)' id="window_1228483162929_close" class="dialog_close"> </div>      
<table class="top table_window" id="window_1228483162929_row1">        
 <tbody>
  <tr>
   <td class="dialog_nw top_draggable"/>          <td class="dialog_n"><div class="dialog_title title_window top_draggable" id="window_1228483162929_top">???title???</div></td>          <td class="dialog_ne top_draggable"/>        </tr>      </tbody></table>      <table class="mid table_window" id="window_1228483162929_row2">        <tbody><tr>          <td class="dialog_w"/>            
 
<td valign="top" class="dialog_content" id="window_1228483162929_table_content">
<iframe height="300" frameborder="0" width="200" src="/blublu/forms/addColumn.html" id="window_1228483162929_content" name="window_1228483162929_content" style="height: 300px; width: 200px;"> </iframe>
 
</td>          <td class="dialog_e"/>        </tr>      </tbody></table>        <table class="bot table_window" id="window_1228483162929_row3">        <tbody><tr>          <td class="dialog_sw bottom_draggable"/>            <td class="dialog_s bottom_draggable"><div class="status_bar" id="window_1228483162929_bottom"><span style="float: left; width: 1px; height: 1px;"/></div></td>            <td id="window_1228483162929_sizer" class="dialog_sizer bottom_draggable"/>        </tr>      </tbody></table>    </div>

**SpaceFrog** · 05/12/2008, 14h43

he bien passe par setajaxcontents
sinon

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
 
function add() {
        win = new Window({
            title: "Test", 
            width:600, 
            height:450, 
            destroyOnClose: false, 
            maximizable: false,
            minimizable : false,
            recenterAuto: false,
            onClose: addColumns
            });   
	win.setURL('/forms/addColumn.html');
        win.show();              
        setTimeout(function(){alert(document.frames['window_1228483162929_content'].document.fomrs[0].id)},2000);      
    }

Invité · 05/12/2008, 14h54

Oui je vais utiliser setAjaxContent(..) en plus ça me plait plus que setURL(..)

Par contre je ne sais pas fermer la Window depuis mon bouton "save".

**SpaceFrog** · 05/12/2008, 14h55

ben tawindow.close() sur le onclick ...

Invité · 05/12/2008, 15h04

Ben oui mais comment récupérer 'mawindow' étant donné que le bouton se trouve dans la page qui est affichée par une requête ajax..

Je vois deux solutions mais qui me plaisent peu :
1° La window à toujours le même id généré. Je peux donc faire un $('window_54545454545454').close(); Ha ben non, elle n'a pas toujours le même id
2° J'ajoute un handler sur onShow :function(win) { $('id_bouton_save').onClick=win.close(); }{ (et encore je ne suis pas sur que onClick=win.. sois aussi simple.

**SpaceFrog** · 05/12/2008, 15h11

ben plus si tu ne passe pas par l'iframe

sinon

Code :

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

parent.document.frames[0]

Invité · 05/12/2008, 15h30

Heuu je ne passe plus par l'iframe. J'utilise setAjaxContent qui vas chercher la page 'addColmumn.jsp'. Dans cette page j'ai le code suivant :

Code :

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

1
2
3
4
5
 
<form ..>
  ...
  <input type="button" value="Save" onClick="" />
</form>

Que dois-je mettre dans "onClick" ?

**SpaceFrog** · 05/12/2008, 15h34

Code :

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

parent.win.close()

Invité · 05/12/2008, 15h39

Il ne connait pas 'win' : "parent.win undefined"

**E.Bzz** · 05/12/2008, 15h47

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function add() {
        win = new Window({
            title: "Test", 
            width:600, 
            height:450, 
            destroyOnClose: false, 
            maximizable: false,
            minimizable : false,
            recenterAuto: false,
            onClose: addColumns
            });   
	win.setURL('/forms/addColumn.html');
        win.show();                    
    }

win est bien déclaré en global dans la page ?
D'où est appelé add() ?

A+

[Prototype Window] Obtenir la valeur d'un formulaire dans la Window

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager