Support form=ajax as snippet-attribute #1188

Closed
wants to merge 1 commit into
from

Conversation

Projects
None yet
4 participants
@fmpwizard
Member

fmpwizard commented Mar 13, 2013

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.

@github-importer

This comment has been minimized.

Show comment
Hide comment

@ghost ghost assigned andreak Mar 1, 2012

@ghost ghost assigned fmpwizard Mar 13, 2013

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"
@fmpwizard

This comment has been minimized.

Show comment
Hide comment
@fmpwizard

fmpwizard Mar 13, 2013

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 _ )
  }
Member

fmpwizard commented Mar 13, 2013

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

This comment has been minimized.

Show comment
Hide comment
@Shadowfiend

Shadowfiend Mar 13, 2013

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.

Member

Shadowfiend commented Mar 13, 2013

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

This comment has been minimized.

Show comment
Hide comment
@Shadowfiend

Shadowfiend Mar 13, 2013

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.

Member

Shadowfiend commented Mar 13, 2013

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

This comment has been minimized.

Show comment
Hide comment
@fmpwizard

fmpwizard Mar 20, 2013

Member

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

Member

fmpwizard commented Mar 20, 2013

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

@Shadowfiend

This comment has been minimized.

Show comment
Hide comment
@Shadowfiend

Shadowfiend Mar 20, 2013

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

Member

Shadowfiend commented Mar 20, 2013

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

This comment has been minimized.

Show comment
Hide comment
@fmpwizard

fmpwizard Mar 24, 2013

Member

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

Member

fmpwizard commented Mar 24, 2013

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

@Shadowfiend

This comment has been minimized.

Show comment
Hide comment
@Shadowfiend

Shadowfiend Mar 24, 2013

Member

Looks fine from that perspective.

Member

Shadowfiend commented Mar 24, 2013

Looks fine from that perspective.

@fmpwizard fmpwizard closed this in 4f5e519 May 13, 2013

@fmpwizard fmpwizard deleted the diego_ssie_1188 branch Nov 30, 2015

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment