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

Version imprimable

Voir 40 message(s) de cette discussion en une page

02/12/2008, 17h07
Invité

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

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
02/12/2008, 20h24
SpaceFrog

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()
02/12/2008, 21h24
RomainVALERI

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

Code:

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.
03/12/2008, 10h41
Invité

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.
03/12/2008, 11h01
SpaceFrog

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 ...

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

Mon code 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
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:

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

05/12/2008, 13h05
Invité

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

que te retourne ce code:

Code:

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 ...

05/12/2008, 13h43
Invité

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 :

Citation:

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 :

Citation:

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
05/12/2008, 14h04
SpaceFrog

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

Hé bien avec setAjaxContent le contenu 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
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:

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>

he bien passe par setajaxcontents
sinon

Code:

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);      
    }

05/12/2008, 14h54
Invité

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".
05/12/2008, 14h55
SpaceFrog

ben tawindow.close() sur le onclick ...
05/12/2008, 15h04
Invité

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.
05/12/2008, 15h11
SpaceFrog

ben plus si tu ne passe pas par l'iframe

sinon

Code:

parent.document.frames[0]
05/12/2008, 15h30
Invité
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:

1 2 3 4 5 <form ..> ... <input type="button" value="Save" onClick="" /> </form>
Que dois-je mettre dans "onClick" ?
05/12/2008, 15h34
SpaceFrog

Code:

parent.win.close()
05/12/2008, 15h39
Invité

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

Code:

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+

Voir 40 message(s) de cette discussion en une page