Populate a dynamic table with data
Hi All,
I've encountered a problem when trying to dynamically add rows to a table and populating them with data taken from a database. I retrieved a list of objects from the database where each object represents a row, a row that I try to add into the table. Now, I know how to add a row using jquery $('#usersTable').append('<tr>..</tr>') and that works fine.
My question is how I can insert the data from the value-object into the script?
I added in the example what I tried to do, but the browser simple becomes unresponsive and tells me I need to shut down the script. It happened (browser freezing) when I tried it on firefox, explorer and chrome.
Any ideas?
Thanks in advance.
I shrunk down the example to include only one field
Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="scripts/jquery-1.6.4.js"></script>
</head>
<%
HttpSession session = request.getSession(false);
List<VOUser> users = new ArrayList<VOUser>();
users = (List<VOUser>) session.getAttribute("users_list");
for(VOUser user: users){%>
<script type="text/javascript">
var user = {
username:<%=user.getUserName() %>
};
$(function(){
$.getScript('scripts/script.js', function buildRow(user){});
});
</script>
<%}
%>
<body>
<form method="post" action="UserGridSearch">
<table border="2" id="usersTable">
<thead>
<tr>
<th>User Name</th>
<th>Search</th>
</tr>
</thead>
<tbody id="bodyTable">
<tr>
<td><input type="text" name="username" id="username"/></td>
<td><input type="submit" name="search" id="submit" value="Search" /></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
Edit: A good fellow suggested that I've been going at this the wrong way (Bad coding - Java in JSP) and that I should look toward JSTL and EL for proper solution. Will be glad if someone could post a short example of how to insert a session attr into a tag. Thanks, Alex.
Re: Populate a dynamic table with data using JQuery
Whoa...Never use server-side code in a loop to output client-side code!
Simple move the server-side code into the table and have it output the <tr> and <td> tags directly.
