• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1319
  • Last Modified:

Add control to placeholder using javascript

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

0
Dawie de Villiers
Asked:
Dawie de Villiers
  • 6
  • 3
  • 2
  • +1
1 Solution
 
sunithnairCommented:
Is it actually displaying and vanishing or is it showning any javascript error?
0
 
sunithnairCommented:
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

0
 
Dawie de VilliersAuthor 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
0
Windows Server 2016: All you need to know

Learn about Hyper-V features that increase functionality and usability of Microsoft Windows Server 2016. Also, throughout this eBook, you’ll find some basic PowerShell examples that will help you leverage the scripts in your environments!

 
Dawie de VilliersAuthor Commented:
i pasted your code in a new from but i observed the same result as mine.
0
 
sunithnairCommented:
Try using a Div instead of a Span
0
 
Dawie de VilliersAuthor 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
0
 
Michel PlungjanIT ExpertCommented:
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

0
 
Dawie de VilliersAuthor 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).
0
 
Michel PlungjanIT ExpertCommented:
I would not, no. Probably some ASP person would know
0
 
Dawie de VilliersAuthor Commented:
Its ok, you can go ahead

Thanks.
0
 
TimCotteeCommented:
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" />

0
 
Dawie de VilliersAuthor 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
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 6
  • 3
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now