• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

Create table with JavaScript dynamically

 
Ranch Hand
Posts: 191
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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?
 
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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.
 
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Posts: 191
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Eric, How to do postback with JavaScript?
 
Ranch Hand
Posts: 100
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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 ]
 
Elizabeth King
Ranch Hand
Posts: 191
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
We are using Struts. Can I use AJAX with Struts?
 
Linda Walters
Ranch Hand
Posts: 100
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

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
Posts: 191
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

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?
 
Ranch Hand
Posts: 1211
Mac IntelliJ IDE
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

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.
 
Ranch Hand
Posts: 156
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
 
Elizabeth King
Ranch Hand
Posts: 191
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

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
Posts: 1211
Mac IntelliJ IDE
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Oh..post back is just the good old reloading of the entire page..like on this site.
 
Eric Pascarello
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
 
Ranch Hand
Posts: 58
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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 like you because you always keep good, crunchy cereal in your pantry. This tiny ad agrees:
a bit of art, as a gift, that will fit in a stocking
https://gardener-gift.com
reply
    Bookmark Topic Watch Topic
  • New Topic