11

Bridge jQuery UI droppable for Lift ajax handler

 3 years ago
source link: https://www.codesd.com/item/bridge-jquery-ui-droppable-for-lift-ajax-handler.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Bridge jQuery UI droppable for Lift ajax handler

advertisements

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.

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:


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK