Create New Element using JavaScript

Question

0.00/5 (No votes)

See more:

Hi dear,

i have created one div on my page and add some controls in div as

XML

<table id="tbl_Main" runat="server">
            <tr id="tr_Moving" runat="server">
  <td id="td_Moving" runat="server">
                    <div id="DV_Moving" runat="server">
                    <ACT:DragPanelExtender ID="DragPanelExtender1" runat="server" TargetControlID="panel_TextComments"
                        DragHandleID="lbl">
                    </ACT:DragPanelExtender>
                    <asp:Panel ID="panel_TextComments" runat="server" BackColor="Snow" Width="250" HorizontalAlign="Center">
                        <asp:TextBox ID="txt_comments" runat="server"></asp:TextBox>
                        <asp:Label ID="lbl" runat="server" Text="Drag this"></asp:Label>
                    </asp:Panel>
                    </div>
                </td>
</tr>
</table>

On txt_comments onBlur event i have to check whether txt_comments contains valur or not.

If it has some value then create new div which id is DV_Moving at client side.

How can i achieve this?

Please please guide me.

So so thanks in advance

Posted 15-Jun-11 21:57pm

Alizee@CP

Updated 15-Jun-11 22:03pm

v2

Add a Solution

Comments

Sergey Alexandrovich Kryukov 16-Jun-11 4:00am

APS.NET? Tag it!
--SA

Alizee@CP 16-Jun-11 4:03am

Created...

3 solutions

Solution 3

Try this,

C#

body = document.getElementsByTagName("body").item(0);
        //Creating a table
        table = document.createElement("TABLE");
        body.appendChild( table );
        table.setAttribute( "border", 2 );
        table.setAttribute( "id", "mytab" );
        //Adding table body to table
        tablebody = document.createElement("TBODY");
        table.appendChild(tablebody);
        //Adding row object to a table body
        row=document.createElement("TR");
        tablebody.appendChild(row);
        row.setAttribute("border",2);
        //Adding a cell object to a row
        cell=document.createElement("TD");
        cell.setAttribute("border",2);
        cell = row.insertCell();
        cell.innerHTML = "Start";
        cell = row.insertCell();
        cell.innerHTML = "Distance";
        cell = row.insertCell();
        cell.innerHTML = "Stop";

Posted 2-Apr-12 20:14pm

Venkat_7792467

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Kiran Sonawane · Accepted Answer · 2011-06-15T23:30:00

Solution 1

Do something like this. I am adding div after table with id tbl_main

<script>
 $(document).ready(function(){

$("#<%=txt_comments.ClientID%>").blur(function(){

  if(this.val() != "")
{
 ('<div id="DV_moving"></div>').insertAfter('#tbl_Main');

}

});

});
</script>

Posted 15-Jun-11 23:30pm

Kiran Sonawane

Updated 15-Jun-11 23:32pm

v3

Comments

Alizee@CP 16-Jun-11 5:33am

Thanks kiran....

But i dont know how this function get called?

Kiran Sonawane 16-Jun-11 5:36am

Are aware with Jquery. Above code is jquery in which ready function will get called after your page loaded completely and I am inserting div on blur event of textbox

Alizee@CP 16-Jun-11 5:38am

Ok. thanks .

I will try this

Alizee@CP 16-Jun-11 5:41am

ERROR OCCURS THAT PREVENT THIS PAGE FROM CREATING ADDITIONAL DIALOGUES.

Kiran Sonawane 16-Jun-11 5:44am

I think you don't have jquery JS files in your project. Will send javascript code after while

Alizee@CP 16-Jun-11 5:48am

This is my javascript code
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript" src="http://ui.jquery.com/testing/ui/ui.core.js"></script>

<script type="text/javascript" src="http://ui.jquery.com/testing/ui/ui.tabs.js"></script>
<script type="text/javascript">

$(document).ready(function() {
alert('hi');

$("#<%=txt_comments.ClientID%>").blur(function() {
alert('hi');
if (this.val() != "") {
('<div id="DV_moving"></div>').insertAfter("#<%=tbl_Main%>");
}
}
);

});
</script>
and as i mentioned above there my div.
But when i created new div by this , will all controls in div also created ?
I need to create all controls in div too.

Kiran Sonawane 16-Jun-11 5:53am

This line ('<div id="DV_moving"></div>').insertAfter("#<%=tbl_Main%>"); should be

('<div id="DV_moving"></div>').insertAfter("#tbl_Main");

since tble_Main is html element not server side control. which all controls? controls which are within table?

Alizee@CP 16-Jun-11 5:55am

Controls within div

Alizee@CP 16-Jun-11 5:57am

Kiran,

I tried this but nothing displayed nor error on form

member60 3-Apr-12 2:17am

my 5!

**tanweer** · Accepted Answer · 2011-06-15T23:57:00

Solution 2

hi try this example, this might help you.

 <script type="text/javascript">
$(document).ready(function(){
 
$("#<%=txt_comments.ClientID%>").blur(function(){
 
  if(this.val() != "")
{
  creatediv('DV_Moving', 'your data inside the DIV', 'width', 'height');
}
 
});
 
});

        function creatediv(id, html, width, height) {
            var newdiv = document.createElement('div');
            newdiv.setAttribute('id', id);
            if (width) {
                newdiv.style.width = 300;
            }
            if (height) {
                newdiv.style.height = 300;
            }
            newdiv.style.background = "#00C";
            newdiv.style.border = "4px solid #000";
            if (html) {
                newdiv.innerHTML = html;
            } else {
                newdiv.innerHTML = "nothing";
            } 
            document.body.appendChild(newdiv);
        }
    </script>

Posted 15-Jun-11 23:57pm

tanweer

Updated 2-Apr-12 20:17pm

v3

Comments

Alizee@CP 16-Jun-11 6:04am

Nothing happens from this also

tanweer 16-Jun-11 6:09am

hi, try putting an alert inside your blur event to check either this event is firing or not.

Alizee@CP 16-Jun-11 6:32am

Hey tanweer,

Its working dude.
I replace 'your data inside the DIV' and out html text box there so it displayed well.

But my need to display all which i mentioned in my question.
I am using ajax control there , and asp panel control.

How do i create it here ?

tanweer 16-Jun-11 6:12am

I also notice that the if statement is not good, use

if($(this).val() != "") instead of if(this.val() != "")

Alizee@CP 16-Jun-11 6:34am

Hey tanweer, Its working dude. I replace 'your data inside the DIV' and out html text box there so it displayed well. But my need to display all which i mentioned in my question. I am using ajax control there , and asp panel control. How do i create it here ?

tanweer 16-Jun-11 12:06pm

hi Alizee@CP,
I did not see any requirement to show inside your DIV in your question, please let me know what should display in your div? If you want to Dynamically create ASP Text Boxes then it will be little difficult so you may use <input type='text'> as it can be created easily and can get its value in javascript latter.

Alizee@CP 17-Jun-11 1:30am

Hi tanweer,

I need to display all these control with setting of same properties

<ACT:DragPanelExtender ID="DragPanelExtender1" runat="server" TargetControlID="panel_TextComments"
DragHandleID="lbl">

<asp:Panel ID="panel_TextComments" runat="server" BackColor="Snow" Width="250" HorizontalAlign="Center">
<asp:TextBox ID="txt_comments" runat="server">
<asp:Label ID="lbl" runat="server" Text="Drag this">