aspose file tools*
The moose likes HTML, CSS and JavaScript and the fly likes Dynamic form using ajax load call 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 "Dynamic form using ajax load call" Watch "Dynamic form using ajax load call" New topic
Author

Dynamic form using ajax load call

Jacques Martin
Greenhorn

Joined: Oct 02, 2007
Posts: 5
Hello,

I am wondering if what I am trying to do is even possible. Let's say I have a jsp page that contains a form with a set of div as follow.



Using jquery, a click event is attached to the divs that will make an ajax call to the server to retrieve a jsp page. This jsp page contains JSTL that will run later on the client side once the page is returned.

On the server side, the ajax call triggers an update on a list to add additional objects of the same type. Once done, the server return the JSP detailed above. Hence the jsp page is used for all the same calls, the only difference is the list.
I am using SpringMVC but I assume it might be the same for Struts, where you can attach a pojo to a controller and a jsp to the same controller.

What I am not sure about is the DOM tree and the MVC relation. I tried to surf the net and find some info, (and yes I have jquery in action ), so I think livequery might be able to update the DOM but I am not quite sure how. Anyway, I know I described high level stuff but I would certainly appreciate any pointers.

Thanks
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61658
    
  67

Jacques Martin wrote:Using jquery, a click event is attached to the divs that will make an ajax call to the server to retrieve a jsp page. This jsp page contains JSTL that will run later on the client side once the page is returned.
JSP pages, including JSTL and all other JSP mechanisms execute on the server and the result is what is returned to the browser.

This article may help you understand how JSP works.

As to the rest of your question, I'm not really sure what you are asking.

With Ajax, you won't be returning whole HTML pages as one does in a traditional request/response cycle. Rather, either a formatted HTML fragment is returned and stuffed into the DOM (JSP is still great for this), or data is returned which is processed in some way by JavaScript (usually in JSON format).

Can you more clearly express your query?


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Jacques Martin
Greenhorn

Joined: Oct 02, 2007
Posts: 5
Hello and thanks for taking the time to answer.

I meant Javascript instead of JSTL. Sorry about that. I attached a URL presenting what I am trying to achieve. The reason I am trying to accomplish this, is because the rendering of the form takes too long when all the possible attributes are loaded at once. So I am trying to load only the necessary attribute group the user wants to use on that form. Basically, I wish to load additional input fields into an existing form controlled by a controller.
Each line of 'attribute 1 field 1' may contain dropboxes or listboxes populated by DB calls.

When the user clicks the submit button, the DOM tree should be correct otherwise the submission and validation to the controller will be incomplete. That 's why I was wondering if I should do something with livequery or not. Open to ideas and suggestions.

Thanks again for taking the time.

drawing
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61658
    
  67

OK, I think I see what you are after, and I do stuff like this all the time.

But I'm still not sure what your sticking point is. Once you return the HTML fragment containing the extra form elements and they are attached to the DOM it makes no difference whether they were there to begin with, or added ad hoc. When the form is submitted, all form elements within the form will take part.

Are you running into specific difficulties?
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: Dynamic form using ajax load call