tags:

views:

6574

answers:

3
+2  Q: 

How to dynamically add a div using JQuery?

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');
    });
});
+4  A:  
$(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;
}
Ropstah  2009-06-04 22:20:58
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  2009-06-04 22:21:52
Also, when I do a test with a <p>Hello</p>, it flashes on the screen but does not stay.
Xaisoft  2009-06-04 22:23:33
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.
Ropstah  2009-06-04 22:23:56
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.
Xaisoft  2009-06-04 22:26:35
No, i'm updating the answer, one sec
Ropstah  2009-06-04 22:27:33
I just copied your updated example and it is not working. I am not sure how to combine it with cletus's example, though?
Xaisoft  2009-06-04 22:36:41
I updated my post with yours and cletus's put together, but it shows the line-item and then disappears. I wonder if this has to do with the Image Button postback.
Xaisoft  2009-06-04 22:42:32
Yes this could be. See update 2. You have to create a button that doesn't make the page go back to the server. You want to stay on the clientside where you can execute javascript.
Ropstah  2009-06-04 22:45:59
Sounds more than likely! if you must use an ASP Image Button then in the $('#imgBtnAddNewLineItem').click function add a return false; as the last line this should stop the postback from firing.
OneSHOT  2009-06-04 22:47:09
Great! This works. One question. When I created some new rows and viewed the html, it does not show the other created rows.
Xaisoft  2009-06-05 15:39:49
No, you only see the original html returned by the server. All changes to the DOM made by javascript cannot just be viewed by opening the source. There are DOM inspectors which can though...
Ropstah  2009-06-05 18:49:50
+1  A: 

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

Amr ElGarhy  2009-06-04 22:21:25
What happens when to the asp.net ID's when I keep adding items?
Xaisoft  2009-06-04 22:27:26
you will need to put the element ids as variables
Amr ElGarhy  2009-06-04 22:29:27
What exactly do you mean?
Xaisoft  2009-06-04 22:29:35
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.
jrcs3  2009-06-04 22:31:59
jrcs3: I was actually thinking of this too, it is actually possible?
Xaisoft  2009-06-04 22:37:23
i deleted the example for now till i rewrite as you are right, can't create server side elements on client side.
Amr ElGarhy  2009-06-04 22:40:04
both other answers are enough
Amr ElGarhy  2009-06-04 22:40:45
+4  A: 

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.

cletus  2009-06-04 22:25:49
i liked this way better than mine and others, simple, and clear
Amr ElGarhy  2009-06-04 22:30:27
cletus is a good chainer.. Try to combine this with my example and you're ready to go ;)
Ropstah  2009-06-04 22:32:40
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.
Xaisoft  2009-06-04 22:32:47
Xaisoft, add the e.preventDefault() to the click function
SteD  2009-07-31 17:16:39

related questions

Is it better to create Model classes, or just stick with generic database utility class?
What are effective options for embedding video in an ASP.NET web site?
Visual Studio 2008 debugger already attached work-around
Tracking state using ASP.NET AJAX / ICallbackEventHandler
ASP.NET Display SVN Revision Number
ASP.NET URL Rewriting
How can I change the background of a masterpage from the code behind of a content page?
Easy way to AJAX WebControls
How do I define custom web.config sections with potential child elements and attributes for the properties?
ASP.NET MVC "CRUD" Database Sample
Are Multiple DataContext classes ever appropriate?
How to RedirectToAction in ASP.NET MVC without losing request data
Triple Quotes? How do I delimit a databound Javascript string parameter in ASP.NET?
ASP.NET built in user profile, Vs old stile user class/tables
What's a good book for learning ASP?
Bandwith throttling in IIS 6 by IP Address
ASP .Net Custom Client-Side Validation
How to get the value of built, encoded ViewState?
Decent, simple, GIS/mapping component for ASP.NET?
Checklist for IIS 6/ASP.NET Windows Authentication?
How to write to Web.Config in Medium Trust ?
ASP.NET, Visual Studio and Subversion - how to integrate?
Floating Point Number parsing: Is there a Catch All algorithm?
How do I sync the SVN revision number with my ASP.NET web site?
ASP.NET Site Maps