Dynamically generate Ajaxbutton html Id with CSS selector

[Kevin]

I want to do this.


Automatically generate ids into the <button >.
//---------xxx.html file------------
<button
onclick="liftAjax.lift_ajaxHandler(&quot;F1262305910912GH1G15=true&quot;,
null, null, null)" id="ONE" name="add_to_cart">

<button
onclick="liftAjax.lift_ajaxHandler(&quot;F1262305910912GH1G15=true&quot;,
null, null, null)" id="TWO" name="add_to_cart">

<button
onclick="liftAjax.lift_ajaxHandler(&quot;F1262305910912GH1G15=true&quot;,
null, null, null)" id="Three" name="add_to_cart">



CSS selector
//-----snippet.scala file------
"@add_to_cart *"#> (itrCartCSS) &
"@add_to_cart [onclick]" #> (SHtml.ajaxInvoke(incrementAjax
_ )._2)})


I got this in the html output
//----output.html
<button
onclick="liftAjax.lift_ajaxHandler(&quot;F3474286841091QRW5D=true&quot;,
null, null, null)" name="add_to_cart"><div style="visibility:visible"
class="add_cart" id="ONE">Your message has been added.</div></button>


Question:
My implementation only add a new <div> inside of <button> and is
incorrect.
How can I dynamically add the id or name inside of <button>?

I am using it for a blog/equiv., where each comment will have an ajax
button in this blog and this blog has multiple comments.

Pls and Thx!

[Diego Medina]

Hi,

I don't understand why you need to assign the ID to the button.

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

--
Diego Medina
Web Developer
(305) 788-4954
di...@fmpwizard.com
http://www.fmpwizard.com

[Kevin]

>I don't understand why you need to assign the ID to the button.

<Newbie to web dev.>

A:
If the ajaxButton is invoked by the selection of dynamically generated
ID,

we can place this code below adjacent to each button and they would
appear in the appropriate position when the button is invoked.
<small name="addedmsg"><div style="display:none" class="success"
id="6addedMsg">Your messsage has been added.</div></small>

B:
If without Id,

I guess, all the buttons would trigger the same piece of code as shown
above and the displaying position of the message would only appear in
one location (e.g. top/bottom). That can be disturbing in a blog with
multi-comments if each comment entitle to this Button.


An alternative is to use pop-up or do something with the ajaxInvoke or
equiv.

Please kindly suggest alternative.

Thanks,

> > For more options, visit this group athttp://groups.google.com/group/liftweb?hl=en.

[Diego Medina]

On Mon, Aug 15, 2011 at 7:31 AM, Kevin <kevin...@gmail.com> wrote:
>
>>I don't understand why you need to assign the ID to the button.
>
> <Newbie to web dev.>
>
> A:
> If the ajaxButton is invoked by the selection of dynamically generated
> ID,
>
> we can place this code below adjacent to each button and they would
> appear in the appropriate position when the button is invoked.
> <small name="addedmsg"><div style="display:none" class="success"
> id="6addedMsg">Your messsage has been added.</div></small>
>
> B:
> If without Id,
>
> I guess, all the buttons would trigger the same piece of code as shown
> above and the displaying position of the message would only appear in
> one location (e.g. top/bottom). That can be disturbing in a blog with
> multi-comments if each comment entitle to this Button.
>

What do you mean by multi-comment blog, like a regular blog that has
already 10 comments and now one user wants to add yet one more
comment?
You still have just one box (for the comment) and one button (for the
"add comment"). Or maybe I still don't understand what you are trying
to do.

About the fixed location, maybe you have seen this, but what GMail
does is they have a floating DIV on the top, that is always visible,
no matter how far down on the page you are. Is this something you
would like?

Or are you trying to give people the option to edit their comment, so
you need a button next to each already placed comment ?

>
> An alternative is to use pop-up or do something with the ajaxInvoke or
> equiv.

I would hate a popup :)

>
> Please kindly suggest alternative.
>
> Thanks,

Regards,

Diego

> For more options, visit this group at http://groups.google.com/group/liftweb?hl=en.

[Kevin]

Thanks Diego for the quick replies.

>About the fixed location, maybe you have seen this, but what GMail
>does is they have a floating DIV on the top, that is always visible,
>no matter how far down on the page you are. Is this something you
>would like?

I like this better than pop up if my current implementation doesn't
work out.

>What do you mean by multi-comment blog, like a regular blog that has
>already 10 comments and now one user wants to add yet one more
>comment?

As for the clarity of the goal.

The user case is like this:


--------default------
ITEM 1
Add Cart Button

ITEM 2
Add Cart Button

ITEM N
Add Cart Button

--------------- if click on the Add cart button for ITEM 2--------
ITEM 1
Add Cart Button

ITEM 2
Item has been added. (message)

ITEM N
Add Cart Button
--------------- if click on the Add cart button for ITEM N --------
ITEM 1
Add Cart Button

ITEM 2
Add Cart Button

ITEM N
Item has been added. (message)

Thanks again.

[Diego Medina]

See comment below:

Now that I see your use case I understand better, what I would do is
use SHtml.swappable

In short, you render one element, the button, and on click, it will
swap the button for some other element, in this case it would display
the message "you item has been added"

You can see the definition of it here

https://github.com/lift/framework/blob/master/web/webkit/src/main/scala/net/liftweb/http/SHtml.scala

search for

def swappable

if you need more help just reply here.

Regards,

Diego

> Thanks again.

[Kevin]

My current implementation is this [1], I feel that to use the
swappable I need, three defs [2]. That is quite a bit of re-factoring.
Please correct me if I am wrong with a cleaner solution. I will post
the final code for public goods.

//-----------------[1]


def render = {
var v = Course.findCouListByTit(S.param("q") openOr "*****^^^^")

println("Course.findCouListByTit(S.param) " + v.getClass);
v match {
case Full(a) =>
"tbody *" #>
renderItems(a);
case _ =>
"tbody *" #> unfoundRender;
// case _ => S.error("error")
}

def renderItems(lc: List[Course]) = {

"tr" #> lc.map(c => {
"@description *" #> (c.title.is.content.is) &
"@add_to_cart [onclick]" #>
(SHtml.ajaxInvoke(incrementAjaxAndSave _ )._2)})
}

//-----------------[2]

def list(html: NodeSeq) = {
println("L55 list");
val id = S.attr("all_i").open_!
def inner(): NodeSeq = {
def reDraw() = SetHtml(id, inner())

bind("todo", html,
// "exclude" ->
// ajaxCheckbox(QueryNotDone, v => {QueryNotDone(v); reDraw}),
"list" -> doList(reDraw) _)
}

inner()
}

private def doList(reDraw: () => JsCmd)(html: NodeSeq): NodeSeq = {
println("L96 doList");
ToDo.findAll(User.currentUser, QueryNotDone).
flatMap(td =>
bind("todo", html,
"check" -> ajaxCheckbox(td.done.value,
v => {td.done.set(v); td.save; reDraw()}),
"showAjax" -> showAjax(td),
// ajaxSelect(ToDo.priorityList, Full(td.priority.toString),
// v => {td.priority.set(v.toInt); td.save; reDraw()}),
"desc" -> desc(td, reDraw)
)) }


private def desc(td: ToDo, reDraw: () => JsCmd) = {
println("L80 desc");
swappable(<span>{td.desc.toString}</span>,
<span>{ajaxText(td.desc.toString,
v => {td.desc.set(v); td.save; reDraw()})}
</span>) }

> https://github.com/lift/framework/blob/master/web/webkit/src/main/sca...

>
> search for
>
> def swappable
>
> if you need more help just reply here.
>
> Regards,
>
>   Diego
>
> > Thanks again.
>
> > --
> > 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 athttp://groups.google.com/group/liftweb?hl=en.

[Diego Medina]

Diego
Sent from my cell

On Aug 15, 2011 6:43 PM, "Kevin" <kevin...@gmail.com> wrote:
>
>
>
> My current implementation is this [1], I feel that to use the
> swappable I need, three defs [2]. That is quite a bit of re-factoring.
> Please correct me if I am wrong with a cleaner solution. I will post
> the final code for public goods.
>

Hi Kevin,
Could you post a full running example? I have a few things that I would change, but it would be easier if I knew when I broke something.

It would mostly be about replacing the bind for css selectors, which are easier to read for me.

Thanks

  Diego

[Kevin]

>Could you post a full running example? I have a few things that I would
>change, but it would be easier if I knew when I broke something.
>It would mostly be about replacing the bind for css selectors, which are
>easier to read for me.

My code base is based on this. I think majority newbies want to use
Mongodb would have heard of this example. This might be more helpful
for Lifters.

https://github.com/ghostm/lift-todo-mongodb

src/main/scala/code/snippet/TD.scala

Thanks Diego!

[Kevin]

I recommend to use these codes to meet the specs above.

//-----------------Issue 1 -------------Solution: code
def swapButtonAndMessage(): NodeSeq ={

val divName = Helpers.nextFuncName //util
val dispName = divName + "_display"
val editName = divName + "_edit"


def swapJsCmd (show : String, hide : String) : JsCmd =
Show(show) & Hide(hide)
def setAndSwap (show : String, showContents : => NodeSeq, hide :
String) : JsCmd = (SHtml.ajaxCall(Str("ignore"), {ignore : String =>
SetHtml(show, showContents)})._2.cmd & swapJsCmd(show,hide))
def displayMarkup : NodeSeq =
<input value={S.??("New")} type="button"
onclick={setAndSwap(editName, editMarkup, dispName).toJsCmd + " return
false;"} />

def editMarkup : NodeSeq = {
val formData : NodeSeq = {
val str = "<div id='" + editName +"addedMsg" +"'
class='success' style='display:block'>Your messsage has been added.</
div>";
println(str);
XML.loadString(str); }

SHtml.ajaxForm(formData,
Noop,
setAndSwap(dispName, displayMarkup, editName))
}
<div>
<div id={dispName}>
{displayMarkup}
</div>
<div id={editName} style="display: none;">
{editMarkup}
</div>
</div>

}

//--------------------Issue 2
And as for inserting id into the button tag. David offered this
solution (see the above for reference).

"@add_to_cart [id]" #> (itrCartCSS) &

"@add_to_cart [onclick]" #> (SHtml.ajaxInvoke(incrementAjaxAndSave
_ )._2)

Thanks for the helps!