JSTL vs DOM generated HTML Table

I have a need to make a very dynamically functional HTML table. I need it to represent as close as possible a tabular spreadsheet where records can be viewed, added, edited, moved, deleted, sorted without leaving the page.

What would I use to build the table for all this? Only JSTL or DOM or both?

So far I have JSTL building the header row.

well you can make every cell a textbox, you can style the textbox so it does not look like a textbox, just the cell.
You need to use createElement/appendChild or insertRow/insertCell to add rows.

Start out small and work your way up.

Eric

I'd use a pre-existing commercial library.

My rule of thumb is to never do on the client what can be done on the server before getting there.

Bear Bibeault wrote:My rule of thumb is to never do on the client what can be done on the server before getting there.

Taking your approach how would I handle this challenge:

The table is loaded, each header is a hyperlink which when clicked resorts the table based on that column.

If done in HTML the entire page would have to be reloaded with each click wouldn't it?

I do this very thing quite often. I use an Ajax request to fetch the newly sorted table and replace just the table. All formatting is handled by the back-end code (ending with a JSP (JSTL/EL) that does the table formatting).

I simply use a jQuery load() method to reload the table.

Bear Bibeault wrote:I do this very thing quite often. I use an Ajax request to fetch the newly sorted table and replace just the table. All formatting is handled by the back-end code (ending with a JSP (JSTL/EL) that does the table formatting).

I simply use a jQuery load() method to reload the table.

Can you give me an example of this approach?

Most of my apps that do this are set up something like this:

1) A set of form controls specifies the search criteria. Things like: "last name contains xyz" or "created after whenever". The form also specifies a paging size (how many rows to fetch), which page to show, which column to sort on, and the sort order.

2) When "submit" is clicked, a jQuery load() method targeting a "search" action is triggered passing the form values.

3) The back-end (all properly layered, of course) creates the appropriate query against the database and returns the results. A JSP creates the table showing the results which is returned as the response.

4) jQuery stuffs the table into the DOM location identified by load().

5) Upon changing filter controls, or clicking on a paging arrow, or clicking on a table header, another load() is issued that replaces the table with the newly generated one.

6) Repeat as necessary.

Bear Bibeault wrote:Most of my apps that do this are set up something like this:

jQuery stuffs the table into the DOM location identified by load().

Thanks for spending your time to help me on this issue.

I think I understand this, having the table inside a DIV tag.

Now from this suppose I want to change a cell value(or several cells) and have it update my remote data.

That'd greatly depend on when you want the changes persisted.

You could wait until the user clicks a button to save any changes made, or persist them on-by-one, perhaps triggered by the blur event.

Again, a good use case for Ajax.

Steve Dyke wrote:

Bear Bibeault wrote:Most of my apps that do this are set up something like this:

jQuery stuffs the table into the DOM location identified by load().

I think I understand this, having the table inside a DIV tag.

At least I thought I did.

My table headers are hyperlinks that call onclick function passing their id attribute.

Function they call is thus:

The servlet fires and returns desired data results but page does not get updated table.

Why the two Ajax calls?

Bear Bibeault wrote:Why the two Ajax calls?

Don't I need one to call the servlet to get my remote data into a session variable?

Then load the jsp file that uses the session variable to build the table.

No. Why would you need to do that in two separate requests? Why the need to load anything into the session at all?

Your single request submits all the information necessary to retrieve the data (filters, sort info, paging info). The action/command/controller fetches the data from the DB (letting the DB do all the paging and sorting work) and forwards the results to a JSP that formats the results for display.

You're over-engineering the whole thing.

Bear Bibeault wrote:No. Why would you need to do that in two separate requests? Why the need to load anything into the session at all?

Your single request submits all the information necessary to retrieve the data (filters, sort info, paging info). The action/command/controller fetches the data from the DB (letting the DB do all the paging and sorting work) and forwards the results to a JSP that formats the results for display.

You're over-engineering the whole thing.

I am really confussed now.

In most of my apps I either do a jQuery.getJSON to a servlet, the servlet makes calls to my remote data using classes then assigns return variables with values to be used with in the current page or assign session variables with values then open a jsp file to display the data using JSTL.

In the code I posted before which ajax are you considering my single request?

If it is the first, the jQuery.getJSON. How does the form get repopulated seing there is not directlink between it and the display page.

If it is the code $("#d1").load("TaskTable.jsp"); how does it know what data to display other that the data it was initially loaded with?

Steve Dyke wrote:How does the form get repopulated seing there is not directlink between it and the display page.

The display page is moot. The request doesn't care. It's just an Ajax request that returns a chunk of HTML, in this case, the result table.

Which page it's going to be stuffed into is completely irrelevant.

I'm still not understand your 2-phase approach. There is no need for two requests.

[quote=Bear Bibeault
I'm still not understand your 2-phase approach. There is no need for two requests.

I am sorry I am not grasping want I need to get this to work.

Which of the two request should I use to be correct.

Note: the jQuery.getJSON does not do a forward method to the JSP file.

And the load.("TaskTable.jsp") call has no provisions to send new data values to the JSTL variables.

Steve Dyke wrote:
Note: the jQuery.getJSON does not do a forward method to the JSP file.

And the load.("TaskTable.jsp") call has no provisions to send new data values to the JSTL variables.

My point is: why not?

There is no need to have one request to fetch data, and another to display it. Combine them into one. This 2-phase approach is extremely bizarre.

Which of the two request should I use to be correct.

Neither. Do both jobs in a single request.

Bear Bibeault wrote:
Neither. Do both jobs in a single request.

Sorry, I got called off on another problem.

I have the servlet now doing a forward to the JSP file.

What will my request code look like? And how do I code my servlet response for callback from request?

Mine tends to look something like:

The request sends all filter data (including sort column, direction, and paging info) to an action that (with the help of the properly structured back-end code) fetches the results from the database, captures it in Java collections, and forwards it to a JSP for formatting as a table.

The response contains the HTML table and is placed into the DOM by the jQuery load() method.

Bear Bibeault wrote:
The request sends all filter data (including sort column, direction, and paging info) to an action that (with the help of the properly structured back-end code) fetches the results from the database, captures it in Java collections, and forwards it to a JSP for formatting as a table.

The response contains the HTML table and is placed into the DOM by the jQuery load() method.

Okay thanks to your help I have my table responding like it should. Right now depending on role of user the table will display as static data or text boxes which I need to make editable. How can I tie, say the fourth column which is estimated completion date with the first column which is the record index so updates will be pushed to correct record?

Off the top of my head: Use the name field to record the row/column? Use custom attributes that get passed back as request params?

Bear Bibeault wrote:Off the top of my head: Use the name field to record the row/column? Use custom attributes that get passed back as request params?

I have the varStatus of the first foreach recording the iteration of the row and the second foreach recording column.

How do I concatinate these two(row,column) in to the name of the element I am adding?

With the EL. Perhaps something like:

which can be parsed on the back end. I used to do this sort of thing before Ajax. When initiating Ajax requests, I prefer to not have to over-load the name with this sort of thing and use custom attributes to record info that I then pass along as request params.

You would need a seperator between row and column.

if not 1111

can be
1 111 11 11 1 111

wait there is [] hmmm....I need more cafe

Eric

Steve Dyke wrote:

Bear Bibeault wrote:
The request sends all filter data (including sort column, direction, and paging info) to an action that (with the help of the properly structured back-end code) fetches the results from the database, captures it in Java collections, and forwards it to a JSP for formatting as a table.

The response contains the HTML table and is placed into the DOM by the jQuery load() method.

Okay thanks to your help I have my table responding like it should. Right now depending on role of user the table will display as static data or text boxes which I need to make editable. How can I tie, say the fourth column which is estimated completion date with the first column which is the record index so updates will be pushed to correct record?

One more question. Once I have loaded a DIV with the JSP is there a way to unload it so the DIV becomes empty again with out reloading the page?

Bear Bibeault wrote:$('#myDiv).empty();

The function I put this code in is firing but nothing happens. The loaded JSP does not dissappear.

Sorry, I had DIV name spelled wrong.

Steve Dyke wrote:

Steve Dyke wrote:

Bear Bibeault wrote:
The request sends all filter data (including sort column, direction, and paging info) to an action that (with the help of the properly structured back-end code) fetches the results from the database, captures it in Java collections, and forwards it to a JSP for formatting as a table.

The response contains the HTML table and is placed into the DOM by the jQuery load() method.

Okay thanks to your help I have my table responding like it should. Right now depending on role of user the table will display as static data or text boxes which I need to make editable. How can I tie, say the fourth column which is estimated completion date with the first column which is the record index so updates will be pushed to correct record?

One more question. Once I have loaded a DIV with the JSP is there a way to unload it so the DIV becomes empty again with out reloading the page?

And yet another question on jQuery.load.

How can I get this to work when I am using frames. Right now from one frame I have to do jQuery.getJSON then another then on the return I set the frame to whatever jsp the servlet is associated with.

Can .load be used somehow in this instance?

(You should start new questions in new topics.)

Why would you use Ajax for a frame?

Bear Bibeault wrote:(You should start new questions in new topics.)

Why would you use Ajax for a frame?

Say frame 1 contains a list. Frame 2 contains options that controls list content in frame 1.

From frame 2 how do I reload the jsp that builds the list in frame 1 based on user selected options?

How do I control the DIV in frame 1 from frame 2?