We help IT Professionals succeed at work.

Add control  to placeholder using javascript

Medium Priority
1,362 Views
Last Modified: 2013-12-17
I cant seem to get a control display permanently when its being added to a container - this happens when i use  javascript to load the control.
but when i use document.body.appendChild() it displays fine.  with  a container like div/span it just displays and vanishes instantly.
   var txt5   = document.createElement("input");
      var di =document.getElementById('oData');
      txt5.setAttribute ('type', 'text');
      txt5.setAttribute ('id', "name");
      txt5.value = "defValue";
      //txt5.name  = "name";
      txt5.style.top='15px';
      txt5.style.left='15px';
      txt5.style.width='100px';
      txt5.style.height='20px';
      txt5.style.visibility = 'visible';
      var newdiv = document.createElement('span');
      newdiv.setAttribute('id',"divIdName");
      //newdiv.appendChild(txt5);
      //di.innerHTML = '<input type="text"  name="TextBox' + "txt5" + '" value="TextBox'+ "txt5" +'" >';
     // document.body.appendChild(txt5);
      di.appendChild(txt5);
      alert(txt5.id);
<%@ Page Language="C#" EnableViewState = "true" AutoEventWireup="true" CodeFile="frmSearchGrid.aspx.cs" Inherits="frmSearchGrid" %>
 
<%@ Register Assembly="RadGrid.Net2" Namespace="Telerik.WebControls" TagPrefix="rad" %>
 
<%@ Register Assembly="RadInput.Net2" Namespace="Telerik.WebControls" TagPrefix="rad" %>
 
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
    Namespace="System.Web.UI" TagPrefix="asp" %>
<script language ="javascript" type ="text/javascript" >
  function AddButon()
  { 
      var txt5   = document.createElement("input");
      var di =document.getElementById('oData');
      txt5.setAttribute ('type', 'text');
      txt5.setAttribute ('id', "name");
      txt5.value = "defValue";
      //txt5.name  = "name";
      txt5.style.top='15px';
      txt5.style.left='15px';
      txt5.style.width='100px';
      txt5.style.height='20px';
      txt5.style.visibility = 'visible';
      var newdiv = document.createElement('span');
      newdiv.setAttribute('id',"divIdName");
      //newdiv.appendChild(txt5);
      //di.innerHTML = '<input type="text"  name="TextBox' + "txt5" + '" value="TextBox'+ "txt5" +'" >';
     // document.body.appendChild(txt5);
      di.appendChild(txt5);
      alert(txt5.id);     
      //
      //newdiv.innerHTML = <input type=text  name=TextBox+num+ value=TextBox+num+ >;
  }
   function OpenGrid(txt2)
   {
    alert(txt2);
   }
</script>
 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Search</title>
    <link href="../StyleSheets/StyleSheet.css" rel="stylesheet" type="text/css" />    
</head>
<body enableviewstate="True" style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px; clip: rect(0px 0px 0px 0px); width: 100%; height: 100%;">
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
             <p>
                        New Element: <span id="OData" runat="server">   </span>                                          
                    </p>
        <table cellpadding="0" cellspacing="0" style="height: 95%; width: 100%; padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; clip: rect(0px 0px 0px 0px); padding-top: 0px; background-color: #eef0f6;" border="0">
            <tr>
                <td class="Header" colspan="2" style="height: 30px">                    
                    <asp:Label ID="lblContacts" runat="server" Text="Search" ForeColor="White"></asp:Label>                    
                    </td>
            </tr>
            <tr>
                <td style="vertical-align: top;">
                </td>
                <td style="padding-left: 10px; height: 40px; border-right: navy 1px solid; border-top: navy 1px solid; border-left: navy 1px solid; border-bottom: navy 1px solid;">
                    <TABLE style="padding-right: 0px; height: 80%;width: 100%; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px; background-color: #eef0f6;" cellSpacing=0 cellPadding=0 
border=0 id="tblView" runat="server"><TBODY><TR>
    <td colspan="4" style="padding-right: 5px; padding-left: 5px; font-weight: bold;
        font-size: 11px; padding-bottom: 5px; padding-top: 5px; font-family: tahoma; vertical-align: top; width: 100%; height: 90%;" rowspan="4">
        <table frame="void "
style="background-color: #eef0f6; width: 100%; height: 80%; padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; clip: rect(0px 0px 0px 0px); padding-top: 0px;" cellpadding="0" cellspacing="0" border="0" id="MyTable">
            <tr>
                <td style="font-size: 11px; font-family: Tahoma; height: 4%">
                    <table border="0" cellpadding="0" cellspacing="0" class="table" style="height: 80%" id="MyTable">
                        <tr>
                            <td>
                                <asp:Label ID="lblLook" runat="server" Text="Look For:" style="font-weight: normal; font-size: 9pt; font-family: tahoma" ForeColor="Chocolate"></asp:Label></td>
                            <td>
                                <telerik:RadTextBox ID="tboSearch" runat="server" Width="260px" Skin="Outlook">
                                </telerik:RadTextBox></td>
                            <td>
                                <asp:Button ID="btnSearch" runat="server" Text="  Find  " OnClick="btnSearch_Click" Height="18px" Width="80px" style="font-size: 11px; font-family: tahoma" />
                                <asp:Button ID="btnRefresh" runat="server" Text="Refresh List" OnClick="btnRefresh_Click" Height="19px" Width="6px" style="font-size: 11px; font-family: tahoma" Visible="False" />
                                <asp:TextBox ID="tboLength" runat="server" Width="0px"></asp:TextBox></td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td style="font-size: 11px; font-family: Tahoma">
                </td>
            </tr>
                    <tr>
                        <td style="font-size: 11px; font-family: Tahoma;">
                            <hr />
                            </td>
                    </tr>
                    <tr>
                    <td>                  
                                    
                    <tr>
                        <td style="font-size: 11px; font-family: Tahoma;">
                            <table style="width: 100%; height: 90%;" border="0" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td style="height: 40px">
                                        <asp:Button ID="btnEdit" runat="server" Text="Edit" OnClick="btnEdit_Click" OnClientClick = "AddButon()" Width="70px" Height="20px" />
                                        <asp:Button ID="btnNew" runat="server" Text="New" Width="70px" OnClick="btnNew_Click" Height="20px" /></td>
                                    <td style="height: 40px">
                                        </td>
                                    <td style="height: 40px">
                                        <asp:TextBox ID="TextBox2" runat="server" Width="0px"></asp:TextBox>
                                    </td>
                                    <td style="height: 40px">
                                        <asp:TextBox ID="TextBox1" runat="server" Width="0px"></asp:TextBox></td>
                                </tr>
                                <tr>
                                    <td style="height: 1%" colspan="4"><hr/>
                                        
                                        </td>                                    
                                </tr>
                                <tr>
                                    <td>
                                    </td>
                                    <td>
                                    </td>
                                    <td style="width: 30%">
                                        &nbsp; &nbsp;&nbsp;&nbsp;
                                    </td>
                                    <td style="padding-right: 0px; padding-left: 60px" align ="right">
                                        &nbsp;<asp:Button ID="btnOk" runat="server" Text="OK" OnClientClick = "SaveToParent()" OnClick="btnOk_Click" Width="70px" Height="20px"/>
                                        <asp:Button ID="btnCancel" runat="server" Text="Cancel" OnClick="btnCancel_Click" Width="70px" Height="20px" /></td>
                                </tr>
                            </table>
                        </td>
                    </tr>
    <tr>
    </tr>
    <TR></TR>
    <tr>
    </tr>
</TBODY>
                </table>
                </td>
    </TR>
    </TABLE>
                    
                </td>
            </tr>
        </table>
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>

Open in new window

Comment
Watch Question

Is it actually displaying and vanishing or is it showning any javascript error?
Try it this way
<%@ Page Language="C#" EnableViewState = "true" AutoEventWireup="true" CodeFile="frmSearchGrid.aspx.cs" Inherits="frmSearchGrid" %>
 
<%@ Register Assembly="RadGrid.Net2" Namespace="Telerik.WebControls" TagPrefix="rad" %>
 
<%@ Register Assembly="RadInput.Net2" Namespace="Telerik.WebControls" TagPrefix="rad" %>
 
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
    Namespace="System.Web.UI" TagPrefix="asp" %>
<script language ="javascript" type ="text/javascript" >
  function AddButon()
  { 
      var txt5   = document.createElement("input");
      var di =document.getElementById('<%=OData.ClientID %>');
      txt5.setAttribute ('type', 'text');
      txt5.setAttribute ('id', "name");
      txt5.value = "defValue";
      //txt5.name  = "name";
      txt5.style.top='15px';
      txt5.style.left='15px';
      txt5.style.width='100px';
      txt5.style.height='20px';
      txt5.style.visibility = 'visible';
      var newdiv = document.createElement('span');
      newdiv.setAttribute('id',"divIdName");
      di.appendChild(txt5);
      alert(txt5.id);     
  }
   function OpenGrid(txt2)
   {
    alert(txt2);
   }
</script>
 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Search</title>
    <link href="../StyleSheets/StyleSheet.css" rel="stylesheet" type="text/css" />    
</head>
<body enableviewstate="True" style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px; clip: rect(0px 0px 0px 0px); width: 100%; height: 100%;">
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
             <p>
                        New Element: <span id="OData" runat="server">   </span>                                          
                    </p>
        <table cellpadding="0" cellspacing="0" style="height: 95%; width: 100%; padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; clip: rect(0px 0px 0px 0px); padding-top: 0px; background-color: #eef0f6;" border="0">
            <tr>
                <td class="Header" colspan="2" style="height: 30px">                    
                    <asp:Label ID="lblContacts" runat="server" Text="Search" ForeColor="White"></asp:Label>                    
                    </td>
            </tr>
            <tr>
                <td style="vertical-align: top;">
                </td>
                <td style="padding-left: 10px; height: 40px; border-right: navy 1px solid; border-top: navy 1px solid; border-left: navy 1px solid; border-bottom: navy 1px solid;">
                    <TABLE style="padding-right: 0px; height: 80%;width: 100%; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px; background-color: #eef0f6;" cellSpacing=0 cellPadding=0 
border=0 id="tblView" runat="server"><TBODY><TR>
    <td colspan="4" style="padding-right: 5px; padding-left: 5px; font-weight: bold;
        font-size: 11px; padding-bottom: 5px; padding-top: 5px; font-family: tahoma; vertical-align: top; width: 100%; height: 90%;" rowspan="4">
        <table frame="void "
style="background-color: #eef0f6; width: 100%; height: 80%; padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; clip: rect(0px 0px 0px 0px); padding-top: 0px;" cellpadding="0" cellspacing="0" border="0" id="MyTable">
            <tr>
                <td style="font-size: 11px; font-family: Tahoma; height: 4%">
                    <table border="0" cellpadding="0" cellspacing="0" class="table" style="height: 80%" id="Table1">
                        <tr>
                            <td>
                                <asp:Label ID="lblLook" runat="server" Text="Look For:" style="font-weight: normal; font-size: 9pt; font-family: tahoma" ForeColor="Chocolate"></asp:Label></td>
                            <td>
                                <telerik:RadTextBox ID="tboSearch" runat="server" Width="260px" Skin="Outlook">
                                </telerik:RadTextBox></td>
                            <td>
                                <asp:Button ID="btnSearch" runat="server" Text="  Find  " OnClick="btnSearch_Click" Height="18px" Width="80px" style="font-size: 11px; font-family: tahoma" />
                                <asp:Button ID="btnRefresh" runat="server" Text="Refresh List" OnClick="btnRefresh_Click" Height="19px" Width="6px" style="font-size: 11px; font-family: tahoma" Visible="False" />
                                <asp:TextBox ID="tboLength" runat="server" Width="0px"></asp:TextBox></td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td style="font-size: 11px; font-family: Tahoma">
                </td>
            </tr>
                    <tr>
                        <td style="font-size: 11px; font-family: Tahoma;">
                            <hr />
                            </td>
                    </tr>
                    <tr>
                    <td>                  
                                    
                    <tr>
                        <td style="font-size: 11px; font-family: Tahoma;">
                            <table style="width: 100%; height: 90%;" border="0" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td style="height: 40px">
                                        <asp:Button ID="btnEdit" runat="server" Text="Edit" OnClick="btnEdit_Click" OnClientClick = "AddButon()" Width="70px" Height="20px" />
                                        <asp:Button ID="btnNew" runat="server" Text="New" Width="70px" OnClick="btnNew_Click" Height="20px" /></td>
                                    <td style="height: 40px">
                                        </td>
                                    <td style="height: 40px">
                                        <asp:TextBox ID="TextBox2" runat="server" Width="0px"></asp:TextBox>
                                    </td>
                                    <td style="height: 40px">
                                        <asp:TextBox ID="TextBox1" runat="server" Width="0px"></asp:TextBox></td>
                                </tr>
                                <tr>
                                    <td style="height: 1%" colspan="4"><hr/>
                                        
                                        </td>                                    
                                </tr>
                                <tr>
                                    <td>
                                    </td>
                                    <td>
                                    </td>
                                    <td style="width: 30%">
                                             
                                    </td>
                                    <td style="padding-right: 0px; padding-left: 60px" align ="right">
                                         <asp:Button ID="btnOk" runat="server" Text="OK" OnClientClick = "SaveToParent()" OnClick="btnOk_Click" Width="70px" Height="20px"/>
                                        <asp:Button ID="btnCancel" runat="server" Text="Cancel" OnClick="btnCancel_Click" Width="70px" Height="20px" /></td>
                                </tr>
                            </table>
                        </td>
                    </tr>
    <tr>
    </tr>
    <TR></TR>
    <tr>
    </tr>
</TBODY>
                </table>
                </td>
    </TR>
    </TABLE>
                    
                </td>
            </tr>
        </table>
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>

Open in new window

Author

Commented:
Hi
It doesnt show any javascript errors , the alert part is even displayin the text in txt5.
the problem is on displaying only.
I have tried creating a static textbox(at design time) and gave it a width of 1px, and i tried to use javascript to set the width to 50px. similar results were observed, it instantly set the new width but then set it to 1px.

I just dont know whats wrong. im using IE6

Author

Commented:
i pasted your code in a new from but i observed the same result as mine.
Try using a Div instead of a Span

Author

Commented:
Hi,
thanks for your help,
 i have tried a div and and a panel they also didnt work, the placeholder doesnt have the appendChild() method, i have also tried addBefore().
maybe i have to do something to my browser.

regards
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
If we boil it down to the bare minimum, it works for me, does it work for you?



<form>
New Element: <span id="OData">   </span>                                          
 
</form>
<script language ="javascript" type ="text/javascript" >
  function AddButon()
  { 
      var di =document.getElementById('OData');
 
      var txt5   = document.createElement("input");
      txt5.setAttribute ('type', 'text');
      txt5.setAttribute ('id', "name");
      txt5.setAttribute ('name', "name");
      txt5.value = "defValue";
      txt5.style.top='15px';
      txt5.style.left='15px';
      txt5.style.width='100px';
      txt5.style.height='20px';
//      txt5.style.visibility = 'visible'; // default anyway
      di.appendChild(txt5);
      alert(txt5.id);     
  }
AddButon()
</script>

Open in new window

Author

Commented:
thanks very much.
this one worked,
and on mine if i take the code to add the span outside the UpdatePanel it works.
New Element: <span id="OData">   </span>  
so its the updatepanel which is causing this.
would you know how to fix this(to make it work inside the update panel).
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
I would not, no. Probably some ASP person would know

Author

Commented:
Its ok, you can go ahead

Thanks.
Head of Software Services
Commented:
Could you step back a little and give us an idea of what the whole thing is trying to achieve. It may be that the solution lies down a slightly different path but without the understanding it is more difficult to find alternative solutions.

Looking at it simply, this could be your problem:

OnClick="btnEdit_Click" OnClientClick = "AddButon()"

In the Edit button you have both the AddButon() client-side event which adds your button then the server-side event which because it is inside the update panel will fire and reload the panel. The upshot of that is that anything you add in the client-side event will be instantly wiped out when the partial postback occurs.

You need to do one or the other really, if you are handling this event client-side and do not need to do the partial postback then make sure that it doesn't happen either by changing the button to a standard html button or adding "return false;" to your client-side click event. If you want to handle this server-side then you can dynamically add the buttons to the panel there.

To prove the case, change the button to look like:

<asp:Button ID="btnEdit" runat="server" Text="Edit" OnClientClick = "AddButon();return false;" Width="70px" Height="20px" />

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts

Author

Commented:

This is it AddButon();return false-- it has worked. Thank you very TimCotte.
so it was the postback which was removing the controls.

Thanks very much
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.