Set textbox value in a div after performing "div.runtimeStyle.visibility = 'visible';" RSS

• • Reply
  

  TL

  Member

  63 Points

  46 Posts

  Set textbox value in a div after performing "div.runtimeStyle.visibility = 'visible';"

  Jun 24, 2012 09:37 AM|LINK

  Hi, I have a linkbutton in a TemplateColumn of a datagrid (the datagrid is a part of an UpdatePanel).

  <asp:TemplateColumn>
        <ItemTemplate>
              <asp:LinkButton runat="server" ID="lbtnEditFile" Text="Edit File"
                OnClientClick="openDiv('divUpdateFile'); return true;" OnClick="loadFileContents"></asp:LinkButton>
        </ItemTemplate>
   </asp:TemplateColumn>
  
  ////////the div I want to show:
  <div id="divUpdateFile" style="padding-right: 1px; padding-left: 1px; z-index: 6;
   left: 700px; padding-bottom: 1px; padding-top: 1px; position: absolute; visibility: hidden;
   top: 300px" runat="server">
    <asp:Panel ID="Panel1" Width="350" BorderColor="CadetBlue" BorderWidth="1" runat="server" BackColor="#f0f0f0">
   <asp:Table runat="server">
        <asp:TableRow>
             <asp:TableCell Width="7"></asp:TableCell>
             <asp:TableCell>
                 <asp:TextBox runat="server" TextMode="MultiLine" ID="tbCmdsFileUpdate" Rows="5" Width="295">  </asp:TextBox>
             </asp:TableCell>
        </asp:TableRow>
   </asp:Table>
  </asp:Panel>
  </div>
  
  ////////JS func:
    function openDiv(divID) {
  		        var div = document.getElementById(divID);
  		        div.runtimeStyle.visibility = 'visible';
  		    }
  
  ////////Code behind method:
  public void loadFileContents(object sender, EventArgs e)
          {
     tbCmdsFileUpdate.Text = "some value";
  }

  
  
  

  the "onClientClick" makes the div visible, and the "onClick" supose to set text to a textbox contained in the div.

  Currently, the div does displayd, but the textbox is empty, although while debugging I can see that 'textbox.text = "somevalue";' is executed.

  Is there any problem to set values of a div after its visibility set to visible?

  Can someone help me please?

• • Reply
  

  AmalO.Abdull...

  Contributor

  3116 Points

  764 Posts

  Re: Set textbox value in a div after performing "div.runtimeStyle.visibility = 'visible';"

  Jun 24, 2012 10:07 AM|LINK

  hi

  <asp:LinkButton runat="server" ID="lbtnEditFile" Text="Edit File"
                OnClientClick="return openDiv('divUpdateFile');" OnClick="loadFileContents"></asp:LinkButton>

  and on javascript:

  function openDiv(divID) {
                          var div = document.getElementById(divID);
                          div.runtimeStyle.visibility = 'visible';
                          return true;
                      }

  if not ,, try to put some breakpoints and debug your code to see if really the onclick event is firing.
  
  

  Please "Mark as Answer" if this post helps.Thank You :)
• • Reply
  

  TL

  Member

  63 Points

  46 Posts

  Re: Set textbox value in a div after performing "div.runtimeStyle.visibility = 'visible';"

  Jun 24, 2012 10:17 AM|LINK

  Thanks for your reply,

  the onclick event is firing. Like I said, the command 'tbCmdsFileUpdate.Text = "some value"' is executed (I saw it while debugging). Yet, the textbox in the div displayed is empty.

  Is there a chance that the source of the problem is the updatepanel? The linkButton is in a datagrid that contained in an updatepanel, so maybe when clicking on it, there is no full postback, so the textbox in the div doesn't get its value?

• • Reply
  

  AmalO.Abdull...

  Contributor

  3116 Points

  764 Posts

  Re: Set textbox value in a div after performing "div.runtimeStyle.visibility = 'visible';"

  Jun 24, 2012 10:23 AM|LINK

  maybe this is the issue yes 

  Please "Mark as Answer" if this post helps.Thank You :)
• • Reply
  

  TL

  Member

  63 Points

  46 Posts

  Re: Set textbox value in a div after performing "div.runtimeStyle.visibility = 'visible';"

  Jun 24, 2012 10:51 AM|LINK

  Ok, I added the datagrid (that contains the linkbutton ) as a postback trigger of the update panel:

  <asp:UpdatePanel ID="UPnl2" runat="server" UpdateMode="Conditional">
     <triggers>
  	<asp:AsyncPostBackTrigger ControlID="btnAdd" EventName="Click"></asp:AsyncPostBackTrigger>
          <asp:PostBackTrigger ControlID="DataGrid1" />
     </triggers>

  
  
  

  Now, when I click the linkbutton, I see the div displayed for a moment and then disappears. When I look at the source code (right click on the page and then "view source"), I see that the textbox in the div contains the text I set in 'loadFileContents()'. Just the div is not displayed now.

  When I remove the datagrid from the triggers tag of the update panel, the situation is reversed. The div is displayed, but the textbox in it is empty (checked it in source code as well).

  Does anyone has a solution for this?

• • Reply
  

  Sage Gu - MS...

  Contributor

  6693 Points

  578 Posts

  Microsoft

  Re: Set textbox value in a div after performing "div.runtimeStyle.visibility = 'visible';"

  Jun 25, 2012 09:49 AM|LINK

  Hi TL,

  TL

  Is there a chance that the source of the problem is the updatepanel? The linkButton is in a datagrid that contained in an updatepanel, so maybe when clicking on it, there is no full postback, so the textbox in the div doesn't get its value?

  It's correct. So you need to place your div code block into UpdatePanel. And the divUpdateFile div will show less than a second and then disappear since you have already writing hard code for the div. Once you click the LinkButton , the divUpdateFile div will be hidden again and actually it has got the value of the textbox. So you can set the visibility style in Page_Load event. Please try the following code below.

  aspx file

  <html xmlns="http://www.w3.org/1999/xhtml">
  <head runat="server">
      <title></title>
      <script type="text/javascript">
          function openDiv(divID) {
              var div = document.getElementById(divID);
              div.runtimeStyle.visibility = 'visible';
          }
      </script>
  </head>
  <body>
      <form id="form1" runat="server">
      <div>
          <asp:ScriptManager ID="ScriptManager1" runat="server">
          </asp:ScriptManager>
          <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
              <ContentTemplate>
                  <asp:DataGrid ID="DataGrid1" runat="server" DataSourceID="SqlDataSource1">
                      <Columns>
                          <asp:TemplateColumn>
                              <ItemTemplate>
                                  <asp:LinkButton runat="server" ID="lbtnEditFile" Text="Edit File"
                                   OnClientClick="openDiv('divUpdateFile'); return true;"
                                   OnClick="loadFileContents">
                                  </asp:LinkButton>
                              </ItemTemplate>
                          </asp:TemplateColumn>
                      </Columns>
                  </asp:DataGrid>
                  <div id="divUpdateFile" runat="server" style="padding-right: 1px; padding-left: 1px; z-index: 6;
                   left: 700px; padding-bottom: 1px; padding-top: 1px; position: absolute; visibility:hidden;
                   top: 300px">
                      <asp:Panel ID="Panel1" Width="350" BorderColor="CadetBlue" BorderWidth="1" runat="server" BackColor="#f0f0f0">
                           <asp:Table ID="Table1" runat="server">
                                <asp:TableRow>
                                     <asp:TableCell Width="7"></asp:TableCell>
                                     <asp:TableCell>
                                         <asp:TextBox runat="server" TextMode="MultiLine" ID="tbCmdsFileUpdate" Rows="5" Width="295">  </asp:TextBox>
                                     </asp:TableCell>
                                </asp:TableRow>
                           </asp:Table>
                      </asp:Panel>
                  </div>
              </ContentTemplate>
          </asp:UpdatePanel>
      </div>
      <asp:SqlDataSource ID="SqlDataSource1" runat="server"
              ConnectionString="<%$ ConnectionStrings:TestConnectionString %>"
              SelectCommand="SELECT * FROM [DataGrid]"></asp:SqlDataSource>
      </form>
  </body>
  </html>

  code behind

  protected void Page_Load(object sender, EventArgs e)
  {
      if (!IsPostBack)
      {
          divUpdateFile.Style.Add("visibility", "hidden");
      }
      else
      {
          divUpdateFile.Style.Add("visibility", "visible");
      }
  }
  
  public void loadFileContents(object sender, EventArgs e)
  {
      tbCmdsFileUpdate.Text = "some value";
  } 

  Regards,

  Sage Gu - MSFT

  Please mark the replies as answers if they help or unmark if not.
  If you have any feedback about my replies, please contact msdnmg@microsoft.com
  Microsoft One Code Framework
  • Marked as answer by Sage Gu - MSFT on Jun 28, 2012 12:46 AM