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)?

kgiannakakis · Answer 1 · 2009-05-11T13:06:41.937

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} );

edited May 11 '09 at 13:06

answered May 11 '09 at 12:30

kgiannakakis

103,016
27
158
194

Yes, but with the form plug-in (especially together with validation plug-in) you convert a regular form to an AJAX one with a single line of code. – kgiannakakis May 11 '09 at 13:05

score 2 · Accepted Answer · answered May 11 '09 at 12:39

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.

score 0 · Answer 3 · answered May 11 '09 at 12:13

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

Loading a popup using ajax

3 Answers3