How to dynamically add a div using JQuery?

Question

I have the following html which displays 3 textboxes and an add button:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div id="container">
    <div id="line-item">
    <asp:TextBox ID="txtLineNumber" runat="server"></asp:TextBox>
    <asp:TextBox ID="txtQty" runat="server"></asp:TextBox>
    <asp:TextBox ID="txtItemCode" runat="server"></asp:TextBox>
    <asp:ImageButton ID="imgBtnAddNewLineItem" ImageUrl="~/images/add_button.jpg" 
    runat="server" />
   </div>
   </div>
   </form>

   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2
   /jquery.min.js">
   </script>
   <script src="js/invoice.js" type="text/javascript"></script>
</body>
</html>

When the user clicks the add button, I want to create another div with the line-item id and put it on the next line. I created a js file, but I am not sure how to do it?

Here is what I have so far:

var itemCount = 0;

function getLineItem(number) {
    var div = document.createElement('div');

   $(div).attr("id", "lineitem" + number);
   var t1 = getTextbox("txt" + number.toString() + "1");
   var t2 = getTextbox("txt" + number.toString() + "2");
   var t3 = getTextbox("txt" + number.toString() + "3");

   $(div).append(t1);
   $(div).append(t2);
   $(div).append(t3);

   return $(div);
}

function getTextbox(id) {
    var textbox = document.createElement('input');
    $(textbox).attr("id", id);
    return $(textbox);
}


var lineItemCount = 0;

   $('#imgBtnAddNewLineItem').click(function() {

    lineItemCount++;

   $('#line-item').clone().attr('id',getLineItem(lineItemCount)).appendTo('#container');
    });
});

Your latest creation won't work. getLineItem() returns a DIV-Element that contains 3 textbox elements. You should append that entire object to the container. Abstract: container.append(getLineItem()) — Ropstah
– Ropstah, Commented Jun 4, 2009 at 22:48

Ropstah · Accepted Answer · 2009-06-04 22:50:25Z

6

$(document).ready(function() {
    $('#imgBtnAddNewLineItem').click(function() {
        $('#container').append('<div></div>');
    });
});

Update 2

Create a normal button like so:

<input type="button" id="imgBtnAddNewLineItem" value="Add lineitem" />

Update ** This is also updated with comments etc.. **

//Count the lineItems to make sure they are unique
var lineItemCount = 0;

//On document ready 
$(document).ready(function() {
    //On button click
    $('#imgBtnAddNewLineItem').click(function(e) {
        /*
           ADD THE FOLLOWING LINE TO PREVENT THE POSTBACK
           P.S. - Make sure you pass -e- to this function... 

         */
         e.preventDefault();



         //Increase the lineitemcount
         lineItemCount++;
         //Add a new lineitem to the container, pass the lineItemCount to make sure getLineItem() can generate a unique lineItem with unique Textbox ids
         $(container).append(getLineItem(lineItemCount));
    });
});

//Create a new DIV with Textboxes
function getLineItem(number) {
    var div = document.createElement('div');
    //Give the div a unique id

    div.setAttribute('id','lineitem_' + number);

    //pass unique values to the getTextbox() function
    var t1 = getTextbox('txt_' + number + '_1');
    var t2 = getTextbox('txt_' + number + '_2');
    var t3 = getTextbox('txt_' + number + '_3');

    div.appendChild(t1);
    div.appendChild(t2);
    div.appendChild(t3);

    return div;
}

//Create a textbox, make sure the id passed to this function is unique...
function getTextbox(id) {
    var textbox = document.createElement('input');
    textbox.setAttribute('id',id);
    textbox.setAttribute('name',id);
    return textbox;
}

edited Jun 4, 2009 at 22:50

answered Jun 4, 2009 at 22:20

Ropstah

17.9k27 gold badges123 silver badges199 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Xaisoft Over a year ago

I tried this, but what I actually want to do is append the div with the id line-item with the 3 textboxes and the image button, not just an empty div.

Xaisoft Over a year ago

Also, when I do a test with a <p>Hello</p>, it flashes on the screen but does not stay.

Ropstah Over a year ago

This is globally how you append items. You can also append jQuery objects or Javascript HTML Element objects. You really have to create some logic to determine textbox id's. Those which appear at first are generated by the ASP.NET framework. Maybe you should consider creating them all (also the first line-item) from jQuery. This will help you determining which algorithm to use to determine formfield names/ids.

Xaisoft Over a year ago

If I understand you correctly, are you saying to create all the asp.net elements in their own divs and hide them by default and append or show them when needed.

Ropstah Over a year ago

No, i'm updating the answer, one sec

|

cletus · Accepted Answer · 2009-06-04 23:26:17Z

4

Try something like this:

$(document).ready(function() {
  $('#imgBtnAddNewLineItem').click(function() {
    var container = $("#container");
    var line = $('#line-item').clone().attr("id", "line-item-2")
    var lineCount = container.children().length + 1;
    line.attr("id", line.attr("id") + "-" + lineCount);
    line.find(":text").each(function() {
      // IDs need to be unique
      $(this).attr("id", $(this).attr("id") + "-" + lineCount);
      $(this).attr("name", $(this).attr("name") + "-" + lineCount);
      // clear the value since we're cloning a line that may have values in it
      $(this).val("");
    });
    container.append(line);
  });
});

Note: you need to change the id.

edited Jun 4, 2009 at 23:26

answered Jun 4, 2009 at 22:25

cletus

627k169 gold badges922 silver badges945 bronze badges

4 Comments

Amr Elgarhy Over a year ago

i liked this way better than mine and others, simple, and clear

Ropstah Over a year ago

cletus is a good chainer.. Try to combine this with my example and you're ready to go ;)

Xaisoft Over a year ago

cletus, that works, but the line-item shows on the screen and then disappears. Everytime I click the button, it also inserts a , in all of the textboxes.

SteD Over a year ago

Xaisoft, add the e.preventDefault() to the click function

Amr Elgarhy · Accepted Answer · 2009-06-04 22:38:09Z

1

You can use .append() method or .html()

edited Jun 4, 2009 at 22:38

answered Jun 4, 2009 at 22:21

Amr Elgarhy

69.2k70 gold badges193 silver badges312 bronze badges

6 Comments

Xaisoft Over a year ago

What happens when to the asp.net ID's when I keep adding items?

Amr Elgarhy Over a year ago

you will need to put the element ids as variables

jrcs3 Over a year ago

FYI: You can't create <asp: controls on the client side. You will have use <input tags and use Request.Form to read the data from Form_Load in the code behind.

Xaisoft Over a year ago

jrcs3: I was actually thinking of this too, it is actually possible?

Amr Elgarhy Over a year ago

i deleted the example for now till i rewrite as you are right, can't create server side elements on client side.

|

Collectives™ on Stack Overflow

How to dynamically add a div using JQuery?

3 Answers 3

11 Comments

4 Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

11 Comments

4 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related