Lift: create AJAX hyperlink for each item with CSS transform

Question

I want to create a list of items and have a hyperlink on each of them that performs some action, e.g. remove the item from the list.

My template looks like this:

<lift:surround with="default" at="content">
<div class="locations lift:Main.locations">
    <ul>
        <li class="one">
            <span class="name">Neverland</span>
            (<a href="#" class="delete">delete this</a>)
        </li>
    </ul>
</div>
</lift:surround>

I'm using the following CSS transform to fill it out:

def locations = {
    ".one *" #> somecollection map { item =>
        ".name" #> item.name &
        ".delete" #> ????
    }
}

Now, instead of "????", I'd love to put in something along the lines of SHtml.a( ()=>delete(item), _), but _ here is of type CssSel and a's argument should be NodeSeq

I could of course put simple xml.Text("delete this"), but I want to reuse the text that is inside the template.

Or is there a different way to generate AJAX hyperlinks?

Answer 1

I found out how to do it. Basically, instead of generating the a tag, I have to use the tag from the template and put the AJAX code in it through the CSS transform:

def locations = {
    ".one *" # somecollection map { item =>
        ".name" #> item.name &
        ".delete [onclick]" #> ajaxInvoke (() => delete(item))
    }
}

I suspect that this way it would also be possible to make links that work both with and without JavaScript