Submit ajax form from anchor…?

[Viktor Hedefalk]

This might be kind of a stupid web-newbie question…

Is it possible to have an anchor submit the surrounding ajax form
without explicitly knowing the form's id?

In my template I have a bunch of <a> tags that needs to submit the
ajax form (serializing checkboxes in this case) and then return with
some content. I basically want the SHtml.ajaxSubmit:

def ajaxSubmit(value: String, func: () => JsCmd, attrs: ElemAttr*): Elem = {
val funcName = "z" + Helpers.nextFuncName
addFunctionMap(funcName, contextFuncBuilder(func))

(attrs.foldLeft(<input type="submit" name={funcName}/>)(_ % _)) %
new UnprefixedAttribute("value", Text(value), Null) %
("onclick" -> ("liftAjax.lift_uriSuffix = '"+funcName+"=_';
return true;"))

}

but tied to the onclick of an anchor instead of an actual submit. The
alternatives I can find needs the id of the form:

def submitAjaxForm(formId: String, func: () => JsCmd): JsCmd

Unfortunately I can't control the id of the form when I use lift:form.
I guess that's just the way it is. Or is there some smart thing I
could do to get around this?

I know I should probably just bind the anchors to submits and then
style those to look the same, but I thought I should ask… :) Also I
can see a use case where random js would want to perform a submit of
the ajax form…?

Thanks,
Viktor

[David Pollak]

On Tue, Aug 23, 2011 at 6:41 AM, Viktor Hedefalk <hede...@gmail.com> wrote:

This might be kind of a stupid web-newbie question…

Is it possible to have an anchor submit the surrounding ajax form
without explicitly knowing the form's id?

In my template I have a bunch of <a> tags that needs to submit the
ajax form (serializing checkboxes in this case) and then return with
some content. I basically want the SHtml.ajaxSubmit:

def ajaxSubmit(value: String, func: () => JsCmd, attrs: ElemAttr*): Elem = {
   val funcName = "z" + Helpers.nextFuncName
   addFunctionMap(funcName, contextFuncBuilder(func))

   (attrs.foldLeft(<input type="submit" name={funcName}/>)(_ % _)) %
     new UnprefixedAttribute("value", Text(value), Null) %
     ("onclick" -> ("liftAjax.lift_uriSuffix = '"+funcName+"=_';
return true;"))

 }

but tied to the onclick of an anchor instead of an actual submit. The
alternatives I can find needs the id of the form:

def submitAjaxForm(formId: String, func: () => JsCmd): JsCmd

Unfortunately I can't control the id of the form when I use lift:form.
I guess that's just the way it is.  Or is there some smart thing I
could do to get around this?

I'd suggest walking the DOM from the <a> to the first enclosing <form> tag you find and then doing a .submit() on that item.

Did you open a ticket for getting the id AjaxForm (or was that Lukasz?)
 

I know I should probably just bind the anchors to submits and then
style those to look the same, but I thought I should ask… :) Also I
can see a use case where random js would want to perform a submit of
the ajax form…?

Thanks,
Viktor

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

--
Lift, the simply functional web framework http://liftweb.net

Simply Lift http://simply.liftweb.net
Follow me: http://twitter.com/dpp
Blog: http://goodstuff.im

[Viktor Hedefalk]

>
> I'd suggest walking the DOM from the <a> to the first enclosing <form> tag
> you find and then doing a .submit() on that item.
>

Thanks for the suggestion! In this particular case I actually grabbed
myself in the neck, screamed "a little css ain't gonna kill you" into
my ear and used buttons instead.

> Did you open a ticket for getting the id AjaxForm (or was that Lukasz?)

No, wasn't me. Found one ticket that that asked for the possibility to
manually set the form id though, but I guess that was problematic:

https://groups.google.com/forum/#!searchin/liftweb/merge$20form$20id/liftweb/8mBndo6S1Fo/QEtwSAMppaUJ
https://www.assembla.com/spaces/liftweb/tickets/624-merge-form-ids

Cheers,
Viktor

[ble...@gmail.com]

Had to search for this and still it is not very clear. This is my scenario:

an AJAX form <form data-lift="form.ajax">

an input inside the form

I want to have an HTML anchor tag to trigger the form submit on anchor click, I tried to trigger form.submit() thorugh onclick event on the anchor but it still doesn't work.

<a id="email-submit" class="dd ig " data-icon="" href="javascript://" onclick="console.log(parentNode.parentNode.parentNode); parentNode.parentNode.parentNode.submit();">

It prints the form element which has Lift id and works if I put a submit button or press enter on the field, effectively submitting, but it ignores clicks on the anchor.

What is the best way to do it?

[ble...@gmail.com]

It is not clear to how would I take an existing form designed with it's own classes etc and link with Lift's backend code without having to do something like this:

"name=name" #> SHtml.text(name, name = _, "id" -> "the_name") &
"name=age" #> (SHtml.text(age, age = _) ++ SHtml.hidden(process))

. Can it be done? 

The above will remove the custom element classes for the input fields for example. Let's say the only thing I want is to change some <a> anchor element to behave as a submit button for the ajax enabled form and thats it. 

Il giorno lunedì 29 agosto 2011 alle 08:02:01 UTC-3 hede...@gmail.com ha scritto: