File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
http://aspose.com/file-tools
The moose likes HTML, CSS and JavaScript and the fly likes Create table with JavaScript dynamically Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Create table with JavaScript dynamically" Watch "Create table with JavaScript dynamically" New topic
Author

Create table with JavaScript dynamically

Elizabeth King
Ranch Hand

Joined: Jul 11, 2002
Posts: 191
I need to create a page that allows people to search private high schools by state and city. There are only two dropdown selections for state and city shown on the page initially. As soon as the state and city are selected, a table will show up. The table contains the name, address, and phone number of the schools in the selected state and city. The length of the table is dynamically determined by the number of the schools.

There is only one call to the server at beginning, which retrieves all the state, city, and schools data to the browser. Can a JavaScript dynamically create a table with the correct length?

Can AJAX help here?
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61764
    
  67

Ajax would help you go get the data from the server dynamically. If the data is already on the client, you just need to create the table elements on the fly.

Start your investigation with the document.createElement function.


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
There is also insetRow and insertCell

But with what you are doing, why wouldn't you want to use a traditional postback model?

Eric
Elizabeth King
Ranch Hand

Joined: Jul 11, 2002
Posts: 191
Eric, How to do postback with JavaScript?
Linda Walters
Ranch Hand

Joined: Apr 30, 2005
Posts: 100
This is an ideal application for AJAX.
In JavaScript you would use the XMLHttpRequest object to send the POST or GET back to the server, which would then provide you with XML containing your data. If you are not familiar with AJAX, Google it for some online info or get the book Foundations of Ajax by Asleson and Schutta published by Apress ISBN 1-59059-582-3 for a quick start or for more in-depth coverage of Ajax,
Ajax in Actionby Crane and Pascarello, published by Manning, ISBN 1-932394-61-3

Also, a word of warning about tables in DHTML. Microsoft's IE does not allow insertion, addition or modification of the innerHTML contents of a <tr> or <td> tag. So, if you have a table and then you want to add or change the data in the cells of the table you need some other container tag, such as <div> inside of each <td> to allow modification. The Mozilla family of browsers works fine with either method.

If you expect that users may make more than one search per session you might want to jump start the process by creating an initial table in your HTML that is of a reasonable size and using the "display" style to show/hide rows as needed. The table can be empty and hidden initially, then when the search result data comes back from the server, you populate the cells and make each row visible. Again note that there is an IE vs. Firefox difference here. To make the row <tr> tag visible in IE you set the display=block, but in Firefox you must set it display=table-row. If you use block in Firefox all the cells (columns) of the row end up in column 1.
[ April 22, 2006: Message edited by: Linda Walters ]

<a href="http://labryssystems.net/pblog/index.php" target="_blank" rel="nofollow">Javaville Gazette</a><br />Non-cooperation with evil is a duty. -- Mahatma Gandhi
Elizabeth King
Ranch Hand

Joined: Jul 11, 2002
Posts: 191
We are using Struts. Can I use AJAX with Struts?
Linda Walters
Ranch Hand

Joined: Apr 30, 2005
Posts: 100
We are using Struts. Can I use AJAX with Struts?


The short answer is yes. Remember, Ajax is just a technique for using existing technologies. If you can use JavaScript, XML and HTTP POST and GET, you can use Ajax.
Elizabeth King
Ranch Hand

Joined: Jul 11, 2002
Posts: 191
Originally posted by Linda Walters:


The short answer is yes. Remember, Ajax is just a technique for using existing technologies. If you can use JavaScript, XML and HTTP POST and GET, you can use Ajax.


I know most browsers can handle JavaScript and HTTP Post/GET, but not sure
about XML. Are there any requirements on web browsers to support AJAX? For example, version?
Sonny Gill
Ranch Hand

Joined: Feb 02, 2002
Posts: 1211

Originally posted by Linda Walters:
This is an ideal application for AJAX.[ April 22, 2006: Message edited by: Linda Walters ]


Why do you think so?

You would want to use AJAX if most of the data on the page stays the same, and only a small bit needs to be changed.
In this case though, most of the data, which is the details shown on the table, will change with each request.

As Eric wondered, the traditional postback model is probably the way to go.


The future is here. It's just not evenly distributed yet. - William Gibson
Consultant @ Xebia. Sonny Gill Tweets
Liyaquat Ali
Ranch Hand

Joined: Nov 16, 2005
Posts: 156
Browsers that support Ajax

Microsoft Internet Explorer version 5.0 and above
Gecko-based browsers like Mozilla, Mozilla Firefox, SeaMonkey, Camino, Flock, Epiphany, Galeon and Netscape version 7.1 and above
Browsers implementing the KHTML API version 3.2 and above, including Konqueror version 3.2 and above, Apple Safari version 1.2 and above, and Nokia's Web Browser for S60 3rd edition and above
Opera browsers version 8.0 and above, including Opera Mobile Browser version 8.0 and above

The above list is from WikiPedia http://en.wikipedia.org/wiki/Ajax_%28programming%29


Excuse me while I kiss the sky (Jimi Hendrix)
Elizabeth King
Ranch Hand

Joined: Jul 11, 2002
Posts: 191
Originally posted by Sonny Gill:


Why do you think so?

You would want to use AJAX if most of the data on the page stays the same, and only a small bit needs to be changed.
In this case though, most of the data, which is the details shown on the table, will change with each request.

As Eric wondered, the traditional postback model is probably the way to go.



DO you have any sample postback jsp code?
Sonny Gill
Ranch Hand

Joined: Feb 02, 2002
Posts: 1211

Oh..post back is just the good old reloading of the entire page..like on this site.
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
Basics:

submit button on a form is a normal postback.
<form id="f1" action="asdf">

JavaScript execution:
document.formName.submit()

Changing the URL
window.location.href="somePage.html?asdf=123";

Eric
David Dong
Ranch Hand

Joined: Aug 15, 2004
Posts: 58
hi,

Can you use a for loop?

There are few technology let you create dynamic table.
You can use Javascript, JSP, PHP, etc...

I hope this help.
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: Create table with JavaScript dynamically