aspose file tools*
The moose likes HTML, CSS and JavaScript and the fly likes Ajax with JSP and JSTL 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 "Ajax with JSP and JSTL" Watch "Ajax with JSP and JSTL" New topic
Author

Ajax with JSP and JSTL

Bryce Martin
Ranch Hand

Joined: Nov 19, 2007
Posts: 269
I've just gotten a request from my boss to make a change to this web app I've been working on. The first cell of the table row is clickable. OnClick this will call some JS that creates a popup window with a new jsp inside of it.

This works great, but the boss thinks that users will get tired of messing with popup windows. This is understood and I agree. Instead he wants me to uncollapse the table row with the information that was in the popup window. The popup window did a lot of interpretive business logic and the such. This is why we have broken it down to only process what the user clicks on, the overhead would be way too much to do it all at once.

So I'm thinking that I'll load my table. When the user clicks the row number I'll use Ajax to call a servlet that will return the data I need and I will then create the rows neccessary. If they click on the row number again, these rows need to collapse. But since I'm just done all that processing I don't want to delete them, just hide them.

The table in my jsp is being dynamically built with JSTL. It is reading a list of beans and all that jazz. It works great. I just don't know where to start with trying to implement Ajax into this. Any bumps in the right direction would help me greatly.

Thanks.
Bryce
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61224
    
  66

The JSP and JSTL part is easy. The tricky part is deciding what to return. Do you want to return a fully formatted HTML fragment that you can stuff into the table cell? Easy with JSP/JSTL.

Do you want to return JSON that contains the data that you will digest and use to create new element via DOM manipulation?

Other?

From the point of view of the server, it's just another request. The complex moving parts are on the client side.


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Bryce Martin
Ranch Hand

Joined: Nov 19, 2007
Posts: 269
Well Bear, here is my dilema. If I dynamically create the html using java I could run into trouble. As you guys have pointed out to me before this should be avoided. So I didn't even think of that. It would be great if I could just return a list of beans that my html/jstl could deal with. Is that possible?


I'm sure that it is possible...duh. Here is what I'm going to do. I'm about to take off for the rest of the year

When I get back I'm going to whip up a simple example of where I'm currently at. I'll post the simple example on here to give everyone an idea of what I'm trying to do. Then I will work on expanding on that simplified example to get it working. Then after its working I'll recode the real project to implement the new way. Have a Happy New Year!

Bryce
[ December 28, 2007: Message edited by: Bryce Martin ]
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61224
    
  66

Originally posted by Bryce Martin:
If I dynamically create the html using java I could run into trouble.

Who said anything about that. That's what JSP is for.

It would be great if I could just return a list of beans that my html/jstl could deal with. Is that possible?

Of course it is. That's how properly structured web apps are written. The request is submitted to a servlet that performs all the activity, then forwarded to a JSP to generate the HTML.

In the case of Ajax, the generated HTML is usually a fragment to be inserted somewhere in the existing page rather than a full HTML page.

Have a Happy New Year!


And you!
Bryce Martin
Ranch Hand

Joined: Nov 19, 2007
Posts: 269
Well I hope everybody had a nice New Years. I know I did. Now its back to the grind and back to the problem I had before I took a break.

Here is what I have...

I have a jsp which dynamically creates a table using JSTL. This works beautifully. Its clean and pretty. Now I have to try to get it to insert a table dynamically Whenever a user clicks on the order number. This is just a simple example of what I will be implementing into a web app I'm working on enhancing.

The JSP



The JavaScript


Now, I know that I will call my javascript using the onclick event to trigger everything. I know that this will go and the servlet can do what it needs to do to get my data. I just need to clear up a few questions.

What I need to do is have this dynamically insert a table under the row that was just clicked. That table would have to have its rows dynamically created based on the information the servlet returns. Its my understanding that I can return XML or HMTL from the servlet back through the response. Since it would be ideal that I return a List of Beans instead of XML or HTML how do I go about this? I can't go creating hidden tables behind every row, that would take up too much time. I only want to create tables that I'm actually clicking on.

Anybody have any ideas on the approach I should use? I would like to keep my JSP strictly HTML and JSTL if this is possible. I think it is, I just need some ideas on how this can be done...

Thanks a ton.

Bryce
[ January 02, 2008: Message edited by: Bryce Martin ]
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61224
    
  66

Originally posted by Bryce Martin:
The JavaScript

I'll say this just one more time and then be quiet: using a library such as Prototype or jQuery to do your Ajax will vastly simplify your code and make it much more robust.
Its my understanding that I can return XML or HMTL from the servlet back through the response.

Or JSON or any other text.

Since it would be ideal that I return a List of Beans

Not going to happen.

The closest you can come is to return JSON that translates to JavaScript objects that contain properties that reflect the bean's values.

I can't go creating hidden tables behind every row, that would take up too much time. I only want to create tables that I'm actually clicking on.

Once you know what you want to add, it should be fairly easy to add new rows to the table. Search for examples in this forum. Eric has posted regarding adding table elements on a number of occasions.

I would like to keep my JSP strictly HTML and JSTL if this is possible.

What else is there?
[ January 02, 2008: Message edited by: Bear Bibeault ]
Bryce Martin
Ranch Hand

Joined: Nov 19, 2007
Posts: 269
I'll look into JSON and Prototype. And I'll check into Eric's posts for adding tables.

As far as the "What else is there?", I was meaning not wanting to implement a whole new framework like struts or something that I'm currently unaware of. That's all.

I'll post back once I hit another snag. I'm sure that it will be more specific next time.

Thanks Bear.

Bryce
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61224
    
  66

Originally posted by Bryce Martin:
As far as the "What else is there?", I was meaning not wanting to implement a whole new framework like struts or something that I'm currently unaware of. That's all.

Ah yes, understood. There is no need to include any of that dreck into your pages.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61224
    
  66

Just as a starter, let's say that you have a bean that has address info and want to return an array of them using JSON. You would return as the response something like:

Once eval'd (again, using jQuery for this will simply your life) this will turn into a JavaScript array of three objects with the defined properties.

It's not a true transference of beans from the server to the client, but it's as close as you can get.
Bryce Martin
Ranch Hand

Joined: Nov 19, 2007
Posts: 269
Yeah, I was looking over JSON and I downloaded prototype. Once I get my dom manipulation working correctly I'll try the ajax call. I am going to pass the values back as you suggested. It will give me the closest bean-like feel when i'm coding. I'm looking forward to getting this up and running in my example in the next couple of days. I have ATLEAST 3 new concepts/classes to learn. Should be quite the experience.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61224
    
  66

While I'm a big fan of Prototype, I also really like jQuery (hence my newest book). If you're going to be doing a lot of JSON, I think jQuery's API is more elegant than Protoype's.

For example:


It doesn't get much simpler than that!
[ January 03, 2008: Message edited by: Bear Bibeault ]
Bryce Martin
Ranch Hand

Joined: Nov 19, 2007
Posts: 269
That sure is brand spanking new

I'll go look into jQuery as well. I really do like the way prototype looks, and I think the javascript to loop through the data would be very easy, albeit not as clean as jQuery(unless I reinvent the wheel), it would not be too bad. So I guess it going to depend on if jQuery is as nice looking and easy to pick up as prototype.

Thanks for all the suggestions.

Bryce
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: Ajax with JSP and JSTL