Loading a popup using ajax

Question

I have a jsp page which should load a popup using ajax. The content of the page is determined by form filled by user.

Something like this:

javascript:

ajax('getPage.action', 'content_id', 'form_id');

foo.jsp:

<div id="content_id"></div>

<form id="form_id">
 ...
</form>

java/spring:

@RequestMapping("getPage.action")
MyController extends AbstractCommandController {
  RealDto dto = (RealDto)command;
  ...
  return new ModelAndView("foo", data);
}

The most difficult part for me is how to send the form data easily as an ajax call. Can I use jQuery here? The form changes dynamically so it would be quite bothersome to list all the fields of the form.

Would it help to use Springs XT (which I never have)?

Answer 1

I don't know about jQuery, but for prototype this is easy:

new Ajax.Request('getPage.action', {
    parameters: $('form_id').serialize(true),
    onSuccess: someMethod
);

Check out the Prototype API docs.

This page has the same information for jQuery: http://docs.jquery.com/Ajax

Answer 2

jQuery form plug-in can help you easily transform a regular form to an Ajax one. You only need a single line of code:

$("#myform").ajaxForm(
   {beforeSubmit: validate, success: showPopup} );

Answer 3

Yes, you can use serialize to trivially convert the form to send the data.

$("#form1").submit(function() {
    $.get("/desiredURL", $("#form1").serialize(), function(response) {
        // send response data to a popup
    }
}

You can use get or post to send the data.

For the popup I like facebox, but there's loads of choices.