Skip to content

Loading…

Support form=ajax as snippet-attribute #1188

Closed
wants to merge 1 commit into from

4 participants

@andreak
Lift Web Framework member

When appending form=post to a snippet-invokation, Lift generates a

-element and wraps the output of the snippet in the form.
Extend this to also support ajax-forms and reuse as much as possible from the built-in Form-snippet.

@andreak andreak was assigned
@fmpwizard fmpwizard was assigned
@fmpwizard fmpwizard Fixed #1188 - Support form=ajax as snippet-attribute
You can now have a snippet invication like:

<form action="#" data-lift="lift:sample?form=ajax">
  <input id="name">
  <input type="submit">
</form>

And lift will do the right thing and convert it into an ajax form (before you had to enclose your form with an extra div and call
data-lift="form.ajax"
a0e844f
@fmpwizard
Lift Web Framework member

You can now have html like this:

  <form action="#" data-lift="lift:sample?form=ajax">
    <div class="alert alert-info">
      click this button to do an ajax call
    </div>
    <input type="submit" value="Submit" id="button2" class="btn btn-primary">
  </form>

and Lift will turn it into

<form onsubmit="liftAjax.lift_ajaxHandler(jQuery('#'+"F649883359440X4VKX5").serialize(), null, null, "javascript");return false;" action="javascript://" id="F649883359440X4VKX5">
    <div class="alert alert-info">
      click this button to do an ajax call
    </div>
    <input type="submit" value="Submit" id="button2" name="Name attribute" class="btn btn-primary" onclick="liftAjax.lift_ajaxHandler('F649883359439PUQHU4=' + encodeURIComponent(this.name), null, null, null)">
  </form>

And the render in the Sample snippet is:

  def render = {
    "#button2 [onclick]" #> SHtml.ajaxCall( JE.JsRaw("this.name"),  handleClick _ )
  }
@Shadowfiend
Lift Web Framework member

The onclick example seems orthogonal. It will be processed completely separate from the form submission. form=ajax as a snippet attribute or otherwise needs to basically apply ajaxOnSubmit to any type=submit elements within the form in order to work properly.

@Shadowfiend
Lift Web Framework member

Actually it doesn't, my bad, because you'll need to bind the function to it. Either way, ajaxInvoke is not the thing to use to bind this submit button, because that request will run independent of the form submission one.

@fmpwizard
Lift Web Framework member

Is your comment about using a different example to demonstrate how this pull request should be use?

@Shadowfiend
Lift Web Framework member

Yeah, basically. I mean, I'm kind of opposed to the form=ajax stuff anyway, but that's a separate issue that I don't think is worth discussing at length atm. The issue here is that the example doesn't actually use the AJAX form functionality “correctly”, because the submit button has an ajaxCall attached to it which will submit the form via AJAX and run the ajaxCall callback independently of each other. Due to the event bubble, I wouldn't be surprised if this always ran the ajaxCall callback before the form submission, or vice versa; either way, it's not what you expect with a form submission (which is for both the submit button and the fields to go out in the same AJAX request, rather than two separate such requests).

@fmpwizard
Lift Web Framework member

I much rather discuss the change included in this pull request than the example

@Shadowfiend
Lift Web Framework member

Looks fine from that perspective.

@fmpwizard fmpwizard added a commit that closed this pull request
@fmpwizard fmpwizard Fixed #1188 - Support form=ajax as snippet-attribute
You can now have a snippet invication like:

<form action="#" data-lift="lift:sample?form=ajax">
  <input id="name">
  <input type="submit">
</form>

And lift will do the right thing and convert it into an ajax form (before you had to enclose your form with an extra div and call
data-lift="form.ajax"
4f5e519
@fmpwizard fmpwizard closed this in 4f5e519
@fmpwizard fmpwizard deleted the diego_ssie_1188 branch
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Mar 13, 2013
  1. @fmpwizard

    Fixed #1188 - Support form=ajax as snippet-attribute

    fmpwizard committed
    You can now have a snippet invication like:
    
    <form action="#" data-lift="lift:sample?form=ajax">
      <input id="name">
      <input type="submit">
    </form>
    
    And lift will do the right thing and convert it into an ajax form (before you had to enclose your form with an extra div and call
    data-lift="form.ajax"
This page is out of date. Refresh to see the latest.
View
2 web/webkit/src/main/scala/net/liftweb/builtin/snippet/Form.scala
@@ -94,7 +94,7 @@ object Form extends DispatchSnippet {
private def addAjaxForm: MetaData = {
val id = Helpers.nextFuncName
- val attr = S.currentAttrsToMetaData(name => name != "id" && name != "onsubmit" && name != "action")
+ val attr = S.currentAttrsToMetaData(name => name != "id" && name != "onsubmit" && name != "action" && name != "form")
val pre = S.attr.~("onsubmit").map(_.text + ";") getOrElse ""
View
7 web/webkit/src/main/scala/net/liftweb/http/LiftSession.scala
@@ -1866,11 +1866,18 @@ class LiftSession(private[http] val _contextPath: String, val uniqueId: String,
case x => x
}
+ case Some("ajax") =>
+ net.liftweb.builtin.snippet.Form.render(ret) match {
+ case e: Elem => e % LiftRules.formAttrs.vend.foldLeft[MetaData](Null)((base, name) => checkAttr(name, attrs, base))
+ case x => x
+ }
+
case Some(ft) =>
<form action={S.uri} method={ft}>
{ret}
</form> %
checkMultiPart(attrs) % LiftRules.formAttrs.vend.foldLeft[MetaData](Null)((base, name) => checkAttr(name, attrs, base))
+
case _ => ret
}
Something went wrong with that request. Please try again.