Search code examples
ajaxjquery-uiscalalift

Bridge jQuery UI droppable to Lift ajax handler

I'm working on a web application project using Scala / Lift. I would like to make my application support drag and drop to improve the user experience.

But I'm not quite sure how to bridge jQuery part with Lift.

Currently I've a working UI part, an div block has class named listRow is dragable with an HTML5 attribute data-stuffid which has an ID from database.

It can be dragged to an block named nextAction, and I could print out the data-stuffid field correctly in JavaScript.

Here is my JavaScript code block:

<script type="text/javascript">
  $('.listRow').draggable({
      revert: true
  });

$("#nextAction").droppable({
    accept: ".listRow",
    tolerance: "pointer",
    activeClass: "dropActive",
    hoverClass: "dropHover",
    drop: function(event, ui) {
        var stuffID = ui.draggable.data("stuffid")
        console.log(stuffID)
    }
})

But I don't know how to call to a Lift AJAX handler, and pass stuffID to Lift in the case.

What I would like to do is have an Scala function likes the following:

def showDialog(stuffID: String): JsCmds
{
    // Do some server side work, ex: querying database

    // Return a javascript cmds likes SHtml.ajaxButton...etc.
    Alert("SutffID:" + stuffID)
}

And when user drag a .listRow to "#nextAction", showDialog would be called, and return the javascript to browser and let browser execute it.

Solution

  • You probably looking for one of these two functions. I'd take a look at :

    JsCmds.Function and SHtml.ajaxCall

    JsCmds.Function will allow you to create a JavaScript function, and SHtml.ajaxCall will allow you to execute code via ajax. You'd create a function in your Lift CSS Selector and then you'd be able to call that functions directly from your jQuery code.

    There are a lot of discussions on using both those, some relevant info might be: