?
Solved

how do i use the jquery append to make a table of elements based on a button click

Posted on 2011-10-07
7
Medium Priority
?
283 Views
Last Modified: 2012-06-27
Hi,
I have this code that when a button is clicked a new set of radio buttons and textboxes and files gets populated.

It almost works. (the first one on the page actually works) The problem is that the textbox is not getting appended correctly. It doesn't get the correct name attached like the file does when you click the button.

I have attached the code for better clarification.

Thanks for the help
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" language="javascript"></script>
<script language="javascript">
var rpid = 1234;
var n = 1;
$(document).ready(function() {
    $('#submit_button').click(function() {
		// Create the tr
		var new_tr = $('<tr />', {
			id:		'row_ripd' + rpid + '_n' + n
		});
		
		// Create new table cell
		var new_td = $('<td />');
		
		// Create elements inside the TD
		new_td.append('<div><input id="file_radio_rpid' + rpid + '_n' + n + '" name="radio_rpid' + rpid + '_n' + n + '" type="radio" value="file" checked="checked" /><label for="file_radio_rpid' + rpid + '_n' + n + '">File</label></div>');
		new_td.append('<div><input id="link_radio_rpid' + rpid + '_n' + n + '" name="radio_rpid' + rpid + '_n' + n + '" type="radio" value="link" /><label for="link_radio_rpid' + rpid + '_n' + n + '">Link</label></div>');
		new_td.append('<div id="div_file_rpid' + rpid + '_n' + n + '">File: <input type="file" name="file_rpid' + rpid + '_n' + n + '" id="file_rpid' + rpid + '_n' + n + '" /></div>');
		
		// new_td.append('<div id="div_link_rpid' + rpid + '_n' + n + '" style="display:none;">Link: <input type="text" name="link_rpid' + rpid + '_n' + n + '" id="link_rpid' + rpid + '_n' + n + '" /></div>');
		// Equivalent of the above line is:
		var new_div = $('<div />', {
			id:	'div_link_rpid'	 + rpid + '_n' + n,
			style: 'display:none'
		});
		new_div.append('Link: ')
		new_div.append('<input />', {
			type: 'text',
			name: 'link_rpid' + rpid + '_n' + n,
			id: 'link_rpid' + rpid + '_n' + n
		});
		new_td.append(new_div);
		

		
		// Attach the table cell to the row
		new_tr.append(new_td);
		
		// Attach the row to the table
		$('#example_table tbody').append(new_tr);
		
		// Attach the listeners;
		attach_listners(n, 'n');
		
		// Increment the counter
		n++;
	});
	attach_listners(0, 'n');
	
});

function attach_listners(number, initial) {
	// Only need to attach file/link radio button listner to new entries
	if (initial == 'n') {
		$('input[name="radio_rpid' + rpid + '_' + initial + number + '"]').change(function() {
			if ($(this).val() == 'file') {
				$('#div_link_rpid' + rpid + '_' + initial + number).hide();
				$('#div_file_rpid' + rpid + '_' + initial + number).show();
			} else {
				$('#div_link_rpid' + rpid + '_' + initial + number).show();
				$('#div_file_rpid' + rpid + '_' + initial + number).hide();
			}
		});
	}
}

</script>
</head>



<body>
<table id="example_table">
	<thead>
    	<tr>
        	<th colspan="2">Example Header</th>
        </tr>
    </thead>
	<tbody>
    	<tr id="row_ripd_n0">
        	<td>
            	<div><input id="file_radio_rpid1234_n0" name="radio_rpid1234_n0" type="radio" value="file" checked="checked" /><label for="file_radio_rpid1234_n0">File</label></div>
            	<div><input id="link_radio_rpid1234_n0" name="radio_rpid1234_n0" type="radio" value="link" /><label for="link_radio_rpid1234_n0">Link</label></div>
                <div id="div_file_rpid1234_n0">File: <input type="file" name="file_rpid1234_n0" id="file_rpid1234_n0" /></div>
                <div id="div_link_rpid1234_n0" style="display:none;">Link: <input type="text" name="link_rpid1234_n0" id="link_rpid1234_n0" /></div>
            </td>
        </tr>
    </tbody>
</table>
<input type="button" id="submit_button" value="Add another" />
</body>
</html>

Open in new window

0
Comment
Question by:smfmetro10
  • 4
  • 3
7 Comments
 
LVL 61

Expert Comment

by:HainKurt
ID: 36934095
looks ok to me... added 2 and i have

<input type="file" name="file_rpid1234_n0" id="file_rpid1234_n0">
<input type="file" name="file_rpid1234_n1" id="file_rpid1234_n1">
<input type="file" name="file_rpid1234_n2" id="file_rpid1234_n2">
0
 

Author Comment

by:smfmetro10
ID: 36934146
Thanks for the reply.
Yeah the input type files are working fine. Its the text box that doesn't work. If you click the "link" radio button after adding a couple   you just get "<input>" in firebug
0
 
LVL 61

Expert Comment

by:HainKurt
ID: 36934160
try this

            new_div.append('<input />', {
                  type: 'text',
                  name: 'link_rpid' + rpid + '_n' + n,
                  id: 'link_rpid' + rpid + '_n' + n
            });

-->

            new_div.append('<input id="link_rpid_' + rpid + '_n' + n + '" name="link_rpid' + rpid + '_n' + n
+ '" type="text" />');
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 61

Accepted Solution

by:
HainKurt earned 2000 total points
ID: 36934167
or use this

    var new_link = $('<input />',{
                  type: 'text',
                  name: 'link_rpid' + rpid + '_n' + n,
                  id: 'link_rpid' + rpid + '_n' + n
            });
    new_div.append(new_link);
0
 
LVL 61

Expert Comment

by:HainKurt
ID: 36934170
both of them are working fine for me...
0
 

Author Comment

by:smfmetro10
ID: 36934194
I think that works. but I'm getting duplicates.

Can you give me the whole code? - Jquery newbie :)

thanks

0
 

Author Closing Comment

by:smfmetro10
ID: 36934247
Got it Thanks for the help!
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question