How to set a callback function in datepicker onselect

[pwagland]

Hi all,

What I would like to do is to have a datepicker that communicates it date changes back to lift via the onSelect. The problem is that I wish to use the "div" version of the datepicker, so I cannot use the onChange/onBlur method that was is proposed https://groups.google.com/forum/?fromgroups#!searchin/liftweb/datepicker/liftweb/xXyPlCVGmR4/Egg5FDvt6h8J .

In the HTML I have:

        <span id="datePicker"></span>

        <script type="text/javascript">

          $(function() {

          $('#datePicker').datepicker({

        dateFormat: 'yy-mm-dd',

        onSelect: function(dateText, inst) { alert('selected date ' + dateText + ':' + inst) }

          });

          });

    </script>

And I want that onSelect function to call a Comet callback. I just can't quite figure out the correct incantation.

What I do have that works, but is quite ugly, is to have a hidden text entry box that gets filled by the onSelect, and then use the method mentioned above in the forums. However, while this works, it feels ugly ;-)

I am quite new to lift, however have searched everything that I can think of for an example of this. Can anyone please help?

Cheers,

Paul

[opyate]

Please let me know what you mean by "div" version of the date picker. The jQuery date picker requires an input box to work AFAIK.

[opyate]

Otherwise, the example you link to works.

I'd modify it like this to communicate with a Comet backend:

Helpers.bind("element", xhtml,

      "date" -> makeChangeBlur(SHtml.ajaxText("", date => {

                YourCometServer ! YourDateHolder(date) // here's the addition

                SetHtml("dateText", Text(date))

                }, ("id" -> "datePicker"))),

      "textField" -> <b id="dateText"/>

[pwagland]

On Jan 9, 9:06 pm, opyate <opy...@gmail.com> wrote:
> Please let me know what you mean by "div" version of the date picker. The
> jQuery date picker requires an input box to work AFAIK.

If you want the "inline" version of the datepicker, then you need to
put it into a div: http://jqueryui.com/demos/datepicker/#inline

I know that the example that I linked to works, I am currently abusing
it with a hidden div, and that works, it just feels inefficient to use
a bouncing input to solve the problem.

[Antonio Salazar Cardozo]

It's possible to create some JS that you can call from the client to invoke a server-side Lift function:

SHtml.ajaxCall(JsVar("date"), dateString = _)

This returns a snippet of Javascript that, when run, will run the server-side function in the second parameter and pass it the results of evaluating, in JS, the first parameter. Actually, it returns a tuple (String, JsExp). The String is, I believe, the ajax call's guid, but the part you're usually most interested in is the JsExp. We usually use it like so:

val fn = Function("dateSelected", List("date"), SHtml.ajaxCall(JsVar("date"), dateString = _)._2)

Then you can emit the function where you want it (we push these down in comets when we need them). Then, in your JS change handler, you can just call dateSelected(<some date>) and the server-side function will get called!

Antonio

[pwagland]

Many thanks Antonio!

I was actually just coming here to paste the method that I had worked
out to do this, it is very similar to what you suggested, but perhaps
not so flexible:

HTML:
<lift:CalendarController.listeners>

<script type="text/javascript">
$(function() {
$('#datePicker').datepicker({
dateFormat: 'yy-mm-dd',

onSelect: function(dateText, inst) { <element:fn/> }
});
});
</script>
<element:textField/>
</lift:CalendarController.listeners>

SCALA:
class CalendarController {
def listeners(xhtml: NodeSeq): NodeSeq = {
var (fn, fnbody) = SHtml.ajaxCall(JsVar("dateText"), dateText =>
{ SetHtml("dateText", Text(dateText)) })
Helpers.bind("element", xhtml,
"fn" -> fnbody.toJsCmd,
"textField" -> <b id="dateText"/>)
}
}

But I like your method more, of actually creating and emitting a
separate javascript function. However, I do have one, probably totally
newbie question, where does the "Function" function come from? I am
guessing that it is not the scala "Function", mostly since that
doesn't compile for me. with the following line:

var fnd = Function("dateSelected", List("dateText"),
SHtml.ajaxCall(JsVar("dateText"), dateText => { SetHtml("dateText",
Text(dateText)) })._2)

I get the error "scala{type}.Function{object Function} of type object
Function does not take parameters"

Thanks again!

Cheers,
Paul

On Jan 11, 2:05 am, Antonio Salazar Cardozo <savedfastc...@gmail.com>
wrote:

[Antonio Salazar Cardozo]

I believe it's at net.liftweb.http.js.JsCmds.Function.

On Jan 11, 2:05 am, Antonio Salazar Cardozo <savedf...@gmail.com>

[pwagland]

On Jan 11, 4:28 am, Antonio Salazar Cardozo <savedfastc...@gmail.com>
wrote:

> I believe it's at net.liftweb.http.js.JsCmds.Function.

Thank you! That works perfectly!

[Antonio Salazar Cardozo]

On Monday, January 10, 2011 8:53:31 PM UTC-5, pwagland wrote:

On Jan 11, 4:28 am, Antonio Salazar Cardozo <savedf...@gmail.com>

wrote:
> I believe it's at net.liftweb.http.js.JsCmds.Function.

Thank you! That works perfectly!

Awesome! Good to hear :)

Antonio