How do I render a SHtml.ajaxButton with 'onClick' action and href link in a Lift Snippet

Question

I'm trying to render an ajaxButton in Lift that, once clicked, updates a SessionVar and then goes to another page using href:

def render ={
"li *" #> userItems.map(item =>
  "li.button_open" #> SHtml.ajaxButton("Open", () => ajaxButtonOpen(item),
            "class" -> "btn btn-primary", "href" -> {Site.menuItem.url})
    )
}

def ajaxButtonOpen(item:Item) : JsCmd = {
   UsersCurrentItemId apply item._id
   JsCmd.unitToJsCmd(Unit)
}

This code will execute ajaxButtonOpen but will not go to the Site.menuItem. I've tried other alternatives such as:

"li.button_test" #>  <a class="btn btn-primary" href= {Site.menuItem.url} onClick="{ajaxButtonOpen(item)}"> "Open"</a>

Does anyone know where I'm going wrong? Any help would be greatly appreciated.

Answer 1

I would do something like this:

def render ={
"li *" #> userItems.map(item =>
  "li.button_open" #> SHtml.ajaxButton("Open", () => ajaxButtonOpen(item),
       "class" -> "btn btn-primary")
    )
}

def ajaxButtonOpen(item:Item) : JsCmd = {
   UsersCurrentItemId apply item._id
   JsCmds.RedirectTo(Site.menuItem.url)
}

I replaced the Noop return from your method with a RedirectTo. The JsCmds.RedirectTo will issue a javascript redirect to the new page and should accomplish what you are looking for.

Alternately, you could use your original ajaxButtonOpen function with SHtml.onEvent to add the ajax event handler to your link:

"li.button_test" #> 
  <a class="btn btn-primary" href={Site.menuItem.url} onClick={
    SHtml.onEvent( e => ajaxButtonOpen(item))
  } />