Lien fenêtre pop up modal et textbox

Version imprimable

Bonjour,

J'ai un texbox T1 dans lequel lorsque le clique dedans, cela m'ouvre une fenêtre pop-up contenant un autre textbox T2 (Cela étant fait à l'aide du contrôle ajax ModalPopupExtender).
J'ai dans ma fenêtre modal un lien qui me permet de fermer ma fenêtre modal.

Ce que je voudrais savoir, c'est comment faire pour que le texte rentré dans le textbox T2 de la fenêtre modal se retrouve dans le textbox T1 lorsque je clique sur mon lien de fermeture (Et inversement que le texte présent dans T1 se retrouve dans T2).

Voici mon code :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <asp:TextBox ID="Commentaires" runat="server" Width="300px"></asp:TextBox> <asp:Panel ID="PopupFichier" runat="server" BackColor="#DBE0E3" Width="460px" Height="350px" BorderColor="Black" BorderStyle="Double" BorderWidth="1px" > <div class="StyleBandeauPopup"> <div style="color:White;font-size:large " >Commentaires   <asp:LinkButton ID="LienFermerFenetre" runat="server" Text="Fermer" ForeColor="Yellow" Font-Size="Smaller"></asp:LinkButton></div> </div> <br /> <div align="center"> <asp:TextBox ID="TextBoxCommentaires" TextMode="MultiLine" runat="server" Width="440px" Height="270px" ></asp:TextBox> </div> </asp:Panel> <asp:ModalPopupExtender ID="ModalPopupTextBox" runat="server" TargetControlID="Commentaires" BackgroundCssClass="modalBackgroundClick" PopupControlID="PopupFichier" CancelControlID="LienFermerFenetre" > </asp:ModalPopupExtender>
Merci.

25/06/2010, 15h27
jjameau

bonjour

as tu essayé de mettre un évènement sur ton linkbutton?

J'ai essayé la méthode suivante : En cliquant sur ma zone de texte, j'ai une fenêtre modale qui s'ouvre contenant une autre zone de texte.
J'ai essayé de rajouter un evenement sur mon lien de fermeture de sorte que le texte rentré dans la fenêtre modale se retrouve dans la textbox de base, mais ça ne marche pas :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<asp:TextBox ID="Commentaires" runat="server" Width="300px"></asp:TextBox>
 
<asp:Panel ID="PopupFichier" runat="server"  BackColor="#DBE0E3" Width="460px" Height="350px" BorderColor="Black" BorderStyle="Double" BorderWidth="1px" >
Commentaires 
         <asp:LinkButton ID="LienFermerFenetre" runat="server" Text="Fermer" ForeColor="Yellow" Font-Size="Smaller" OnClick="RemplissageTextBox"></asp:LinkButton></div> </div> 
<br />
   <div align="center"> 
     <asp:TextBox ID="TextBoxCommentaires" TextMode="MultiLine" runat="server" Width="440px" Height="270px" ></asp:TextBox>  
   </div>   
</asp:Panel>
 
<asp:ModalPopupExtender ID="ModalPopupTextBox" runat="server" TargetControlID="Commentaires"   BackgroundCssClass="modalBackgroundClick" PopupControlID="PopupFichier" CancelControlID="LienFermerFenetre" >
</asp:ModalPopupExtender>

Code:

1
2
3
4
5
6
7
8
protected void RemplissageTextBox(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                Commentaires.Text = TextBoxCommentaires.Text;
                TextBoxCommentaires.Text = "";
            }
        }

Est-ce quelqu'un verrait comment faire ? Merci.

Je me suis dit qu'il saurait surement mieux de faire le trnasfert de texte entre les deux zones au moyen de javascript.

J'ai commencé ma fonction par :
Code:

1 2 3 4 5 6 7 8 function SelectAll(id) { //Récupère les références des deux textbox var idModalPopup1 = document.getElementById("<%= Commentaires.ClientID %>"); var idModalPopup2 = document.getElementById("<%= TextBoxCommentaires.ClientID %>"); ... }
Par contre, je me rend compte qu'en faisant cela, je n'ai pas accés à toutes les propriétés des zones.
Est-ce une bonne idée (et surtout possible) de passer par du javascript pour atteindre mon but ?

Merci.

Bonjour,

Je viens de revenir sur ce problème et la solution est bien en javascript.
Le bout de code ci-dessous se trouve dans un contrôle utilisateur.

Cette méthode marche bien si je place simplement mon contrôle dans ma page comme cela :

Code:

<uc901:TextBoxPopUp runat="server"/>

Cependant, si je veux intégrer dans un gridview une colonne avec un TextBoxPopUp sur chaque ligne, cela ne marche plus et je comprend vraiment pas pourquoi?

Voici le code de mon contrôle utilisateur :

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
<asp:TextBox ID="Commentaires" runat="server" Width="300px" ></asp:TextBox>
 
<asp:Panel ID="PopupFichier" runat="server"  BackColor="#DBE0E3" Width="460px" Height="350px" BorderColor="Black" BorderStyle="Double" BorderWidth="1px" >
   <div class="StyleBandeauPopup"> <div style="color:White;font-size:large " >Commentaires 
         <asp:LinkButton ID="LienFermerFenetre" runat="server" Text="Fermer" ForeColor="Yellow" Font-Size="Smaller" OnClientClick=" return ChargementTexte()"></asp:LinkButton></div> </div> 
<br />
   <div align="center"> 
     <asp:TextBox ID="TextBoxCommentaires" TextMode="MultiLine" runat="server" Width="440px" Height="270px" ></asp:TextBox>  
   </div>   
</asp:Panel>
 
 
<asp:ModalPopupExtender ID="ModalPopupTextBox" runat="server" TargetControlID="Commentaires"   BackgroundCssClass="modalBackgroundClick" PopupControlID="PopupFichier" OkControlID="LienFermerFenetre" OnOkScript="ChargementTexte()" >
</asp:ModalPopupExtender>
 
 
<script type="text/javascript">
     function ChargementTexte()
      {
         //Récupère les références des deux textbox
         var TextBoxMere = document.getElementById("<%= Commentaires.ClientID %>");
         var TextBoxFille = document.getElementById("<%= TextBoxCommentaires.ClientID %>");
 
         //Transfert des éléments de la fenêtre fille vers la fenêtre mère
         TextBoxMere.value = TextBoxFille.value;                 
      }   
 </script>

Et voici le code du gridview :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<asp:GridView ID="GridView1" runat="server"  AllowPaging="False" 
           AllowSorting="True" AutoGenerateColumns="False" DataKeyNames="Données" 
           DataSourceID="SqlDataSource1" BorderColor="#94979A" CellPadding="10" BackColor="#ECEBEF"  HeaderStyle-BackColor="#6A97D0" AlternatingRowStyle-BackColor="#D2DBE6" HeaderStyle-ForeColor="White">
           <Columns>
               <asp:BoundField DataField="Données" HeaderText="Données" 
                   SortExpression="Données" />
 
 
             <asp:TemplateField ShowHeader="true" Visible="true">
                 <ItemTemplate>
                   <uc901:TextBoxPopUp runat="server"/>
                </ItemTemplate>
            <HeaderTemplate>
                <asp:Label ID="LabelCommentaires" runat="server" Text="Commentaires"></asp:Label>
            </HeaderTemplate>
                </asp:TemplateField>   
           </Columns>
       </asp:GridView>

Est-ce que quelqu'un saurait pourquoi cela ne marche pas dans le cas du gridview? Merci.

On m'a conseillé pour que cela marche pour le gridview de binder les évènements sur le databound.

J'ai alors fait cette fonction :
Code:

1 2 3 4 5 6 7 8 protected void GvCustomers_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Row.RowType == DataControlRowType.DataRow) { ((TextBox)e.Row.FindControl("Commentaires")).Attributes.Add("onclick", "javascript:ChargementTexte()"); } }
Mon problème, c'est que l'ensemble du code pour le popup et le javascript se trouve dans un contrôle utilisateur qui est appelé sur plusieurs de mes pages, et donc j'ai des éléments dans la fonction GvCustomers_RowDataBound qui ne sont pas reconnus.

Est-ce que quelqu'un verrait une alternative à mon problème car là je suis complétement bloqué.

Merci d'avance.

J'ai avancé dans mon problème mais je rencontre une autre erreur et pas moyen de trouver la solution malgré les tests :

J'ai ma fonction javascript sous cette forme :
Code:

1 2 3 4 5 6 7 8 <script type="text/javascript"> function ChargementTexte(idMere,idFille) { var TextBoxMere = document.getElementById(idMere); var TextBoxFille = document.getElementById(idFille); TextBoxMere.Value = TextBoxFille.value; } </script>
Et ma fonction DataBound :
Code:

1 2 3 4 5 6 7 8 9 protected void Grid_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Row.RowType == DataControlRowType.DataRow) { ((TextBox)e.Row.FindControl("Commentaires")).Attributes.Add("onclick", "javascript:ChargementTexte('" + ((TextBox)e.Row.FindControl("Commentaires")).ClientID + "','" + ((TextBox)e.Row.FindControl("TextBoxCommentaires")).ClientID + "')"); } }
Mais à chaque fois que je clique sur mon lien pour fermer ma popup, cela m'ouvre la boite d'erreur d'IE avec le message

Citation:

'NULL à la valeur NULL où n'est pas définie

concernant la ligne

Code:

TextBoxMere.Value = TextBoxFille.value;

J'ai même essayé

Code:

TextBoxMere.Value = 1;

par exemple même résultat.
J'ai affiché dans une boite d'alert TextBoxMere.Value et TextBoxFille.value mais cela me renvoie UNDEFINED.

Est-ce que quelqu'un verrait une erreur car là je ne vois pas le problème.
Merci.

22/07/2010, 12h41
calagan99

Tu mets ton bouton de fermeture de modale en tant que CancelControlID.
Le contrôle AjaxModulPopup expose un event js onCancelScript.
Dans cet event, en js, tu récupère les unique ID de tes deux textbox et affecte à t1 la value de t2.

Je suis d'accord avec toi pour l'utilisation de Cancelscript : Si on veut intégrer une texbox directement dans la page, cela marche bien.
Cependant, dans mon cas, je ne vois pas comment l'appliquer car ma première textbox se trouve dans un gridview et donc je dois passer par l'évenement databound.

Pour l'instant avec mon code ci-dessous, le text passe d'une textbox à l'autre mais seulement si je reclique une deuxième fois sur ma texbox (je clique une première fois, je rentre mon texte, je clique sur fermé, je reclique sur la même textbox et là le texte apparait).
Je sais bien que c'est parce que le code javascript n'est pas associé à la fonction CancelScript mais je ne vois pas comment l'appliquer sachant que je dois faire référence à la textbox du tableau :

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
 <asp:GridView runat="server" ID="Grid" DataSourceID="SqlDataSource1" AutoGenerateColumns="False" DataKeyNames="Code" OnRowDataBound="Grid_RowDataBound">
      <Columns>
 
      <asp:TemplateField>
            <HeaderTemplate>
          <asp:Label ID="Label1" runat="server" Text="Zone texte"></asp:Label>
            </HeaderTemplate>
            <ItemTemplate>
            <asp:TextBox ID="Commentaires" runat="server" Width="300px" ></asp:TextBox>
 
<asp:Panel ID="PopupFichier" runat="server"  BackColor="#DBE0E3" Width="460px" Height="350px" BorderColor="Black" BorderStyle="Double" BorderWidth="1px" >
   <div class="StyleBandeauPopup"> <div style="color:White;font-size:large " >Commentaires 
         <asp:LinkButton ID="LienFermerFenetre" runat="server" Text="Fermer" ForeColor="Yellow" Font-Size="Smaller" ></asp:LinkButton></div> </div> 
<br />
   <div align="center"> 
     <asp:TextBox ID="TextBoxCommentaires" TextMode="MultiLine" runat="server" Width="440px" Height="270px" ></asp:TextBox>  
   </div>   
</asp:Panel>
 
 <asp:ModalPopupExtender ID="ModalPopupTextBox" runat="server" TargetControlID="Commentaires" BackgroundCssClass="modalBackgroundClick" PopupControlID="PopupFichier" CancelControlID="LienFermerFenetre" >
</asp:ModalPopupExtender>
 
            </ItemTemplate>
      </asp:TemplateField>
  </Columns>
 </asp:GridView>

Code:

1
2
3
4
5
6
7
8
9
10
11
protected void Grid_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
 
            ((TextBox)e.Row.FindControl("Commentaires")).Attributes.Add("onclick", "javascript:ChargementTexte('" +
                        ((TextBox)e.Row.FindControl("Commentaires")).ClientID + "','" +
                        ((TextBox)e.Row.FindControl("TextBoxCommentaires")).ClientID + "')");
 
        }      
    }

Code:

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
     function ChargementTexte(IDCommentaires,IDTextBoxCommentaires)
      {
         //Récupère les références des deux textbox
         var TextBoxMere = document.getElementById(IDCommentaires);
         var TextBoxFille = document.getElementById(IDTextBoxCommentaires);
 
         //Transfert des éléments de la fenêtre fille vers la fenêtre mère
         TextBoxMere.value = TextBoxFille.value;                 
      }   
</script>

Est-ce que quelqu'un verrait comment corriger ce bug ? Merci.