Client to Server ajax

[Alex]

I need to implement a sortable list using jquery-ui. The sortable function had the form:

$( ".selector" ).sortable({
update: function(event, ui) { ... }
});

I can call a sortable function from the server side but I need a way to communicate with the server when the 'update' option is fired so I can save an elements position. What is the most lift way to do this?

[Jeppe Nejsum Madsen]

SHtml.ajaxCall or jsonCall will generate javascript that, when
executed on the client, will call a function on the server.

/Jeppe

[Alex]

Thanks Jeppe.

I have done the following but got a little confused...

client side javascript:

  function makeSortable(callback) {

    $(function() {

      $(".sortable").sortable();

      $(".sortable").bind("sortupdate", callback);

    });

  }

 function test() {

    return "boba fet";

  }

snippet code:

def sortable = {

    Script(Call("makeSortable", SHtml.ajaxCall("test", println(_))._2))

  }

The client side javascript works fine, I can supply it an alert etc. from the server side and get a response when the "sortupdate" event is fired. However the ajaxCall doesn't appear to be returning anything.

I'm sure I'm making a stupid mistake...

[Alex]

I changed the Call to:

Call("makeSortable",JsRaw("function() { " + SHtml.ajaxCall("test",println(_))._2.toString + " }") )/

which is now working fine. 

[Brent Sowers]

What I've done for things like this, where you want to call a lift function from within raw Javascript, is to define a named Javascript function with Function that performs an AJAX call.  So somewhere in the page (what I typically do is create a snippet method that returns this and then just put a <lift:snippet_name.my_javascript_function></lift:snippet_name.my_javascript_function> in the template) return this NodeSeq:

Script(

  Function("sortableUpdateServerCallback", List("paramName"),

    SHtml.ajaxCall(

      JsVar("paramName"), 

      (paramName: String) => // Lift code to do whatever you want and return a JsCmd

    )._2.cmd

  )

)

Then you can write raw Javascript on your page like:

$(".selector").sortable({

  update: function(event, ui) { 

    var callbackValue = "value sent to the server";

    sortableUpdateServerCallback(callbackValue);

  }

});

If you want to send more than one parameter, you can use SHtml.jsonCall, or if you don't need to pass any parameters you can use SHtml.ajaxInvoke.

Brent Sowers

Senior Software Engineer, Audax Health (We're hiring Scala and Lift developers! https://gist.github.com/3025609)

brent....@audaxhealth.com

Twitter - http://twitter.com/sowersb

LinkedIn - http://linkedin.com/in/brentsowers1

[Diego Medina]

Thanks for sharing Brent, I added it to the wiki
http://www.assembla.com/spaces/liftweb/wiki/Cool_Tips

Diego

> --
> --
> Lift, the simply functional web framework: http://liftweb.net
> Code: http://github.com/lift
> Discussion: http://groups.google.com/group/liftweb
> Stuck? Help us help you:
> https://www.assembla.com/wiki/show/liftweb/Posting_example_code
>
>
>



--
Diego Medina
Lift/Scala Developer
di...@fmpwizard.com
http://www.fmpwizard.com

[Antonio Salazar Cardozo]

We take it one step further:

  class CallableFunction(name:String, callback:(String)=>JsCmd, args:List[String] = List()) extends JsCmd {

    override val toJsCmd =

      Function(

        name, args,

        ajaxCall(JsRaw("Array.prototype.slice.call(arguments).join('|')"), callback)._2

      ).toJsCmd

  }

You can then create an arbitrary function:

case class UpdateClosed(callback:(String)=>JsCmd) extends CallableFunction("updateClosed", callback, List("id"))

Above, your Script would then just hold Script(SortableUpdateServerCallback( ... )). Just a tad bit of abstraction.

We typically serve these out in the render segment of a Comet, and they invoke a comet function that sends the CometActor a message to handle the relevant action.

We also have a:

  class AnonCallableFunction(callback:(String)=>JsCmd, args:List[String] = List()) extends JsCmd {

    override val toJsCmd =

      AnonFunc(

        args.mkString(","),

        ajaxCall(JsRaw("Array.prototype.slice.call(arguments).join('|')"), callback)._2

      ).toJsCmd

  }

It's used for when we send down JSON with callbacks.

Thanks,

Antonio

[Alex]

Thanks Antonio and Brent, very useful examples.

[Diego Medina]

On Wed, Jul 25, 2012 at 2:44 PM, Alex <alex.m...@gmail.com> wrote:
> Thanks Antonio and Brent, very useful examples.

They were very helpful that I was able to write about them
https://fmpwizard.telegr.am/blog/adding-fields-dynamically-lift

So, thanks for asking the question too :)
Diego