Having trouble figuring out how to get a form to submit without submitting the page, using ajaxForm

[Jim Barrows]

This is the basic definition of the form that works, but submits the page:
xhtml:
<lift:PartyContactMechanismSnippets.save form="post">
<!-- Form fields -->
 <contactMechanism:submit/>
 </lift:PartyContactMechanismSnippets.save>

And the binding looks like:
bind("contactMechanism", xhtml,
      "comment" -> text(comment, comment = _),
      "fromDate" -> text(fromDate, fromDate = _) % ("id" -> "fromDate") % ("maxlength" -> "15") % ("size" -> "15"),
      "thruDate" -> text(thruDate, thruDate = _) % ("id" -> "thruDate") % ("maxlength" -> "15") % ("size" -> "15"),
      "submit" -> submit("Add", saveContactMechanismToParty ))

So, after reading the ajaxForm methods description I thought I could do this:
xhtml:
<lift:PartyContactMechanismSnippets.save >
<!-- Form fields -->
 <contactMechanism:submit/>
 </lift:PartyContactMechanismSnippets.save>

And the binding would look like:
ajaxForm(  bind("contactMechanism", xhtml,
      "comment" -> text(comment, comment = _),
      "fromDate" -> text(fromDate, fromDate = _) % ("id" -> "fromDate") % ("maxlength" -> "15") % ("size" -> "15"),
      "thruDate" -> text(thruDate, thruDate = _) % ("id" -> "thruDate") % ("maxlength" -> "15") % ("size" -> "15"),
      //"mechanism" -> text(dateFormat.format(new Date()), thruDate = _) % ("id" -> "thruDate") % ("maxlength" -> "10") % ("size" -> "10"),
      "submit" -> submit("Add", saveContactMechanismToParty )))

However, when the submit button is clicked the saveContactMechanismToParty never gets called. 
What am I missing?

--
James A Barrows

[Jonathan Hoffman]

Hi,

This is a tricky bit.  It turns out that the javascript that's used to serialize (jQuery.serialize) the form does not include the submit button.  The best way to get the functionality you want is to add a hidden field:

SHtml.ajaxForm(bind(...) ++ SHtml.hidden(saveContactMechanismToParty))

If saveContactMechanismToParty returns a JsCmd that code will get executed on the client.

- Jon

--

You received this message because you are subscribed to the Google Groups "Lift" group.
To post to this group, send email to lif...@googlegroups.com.
To unsubscribe from this group, send email to liftweb+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/liftweb?hl=en.

[Marius]

can you paste the actual xhtml generated for this form?

Br's,
marius

[Alex Boisvert]

I think the idiomatic way to handle ajax form submission is to use SHtml.ajaxForm(body, onSubmit, postSubmit):

  /**
   * Takes a form and wraps it so that it will be submitted via AJAX. This also
   * takes a parameter for script code that will be executed after the form has been submitted.
   *
   * @param body The form body. This should not include the &lt;form&gt; tag.
   * @param postSubmit Code that should be executed after a successful submission
   */
  def ajaxForm(body : NodeSeq, onSubmit : JsCmd, postSubmit : JsCmd) = ...

For example,

def submitted = ...

ajaxForm( 
  bind("b", xhtml,

    "comment" -> text(comment, comment = _)

  ), _Noop, submitted
)

alex

[Marius]

Jon is correct. There is another approach though that was recently
introduced: using SHtml.submitAjaxForm(formId) ... this is useful if
you want to submit an ajax form from outside of it say when clicking a
link etc. But probably the most common way is to use what Jon
described.

Br's,
Marius

[Jim Barrows]

On Sat, Dec 5, 2009 at 12:43 PM, Marius <marius...@gmail.com> wrote:

Jon is correct. There is another approach though  that was recently
introduced: using SHtml.submitAjaxForm(formId) ... this is useful if
you want to submit an ajax form from outside of it say when clicking a
link etc. But probably the most common way is to use what Jon
described.

Yep, Jon's suggestion worked!!

 

--
James A Barrows