How can I attach client-only js and ajax call to onclick handler?

[Ivan Schuetz]

Hi,

I want that when I click a button

1. A progressbar (different from the generic progress bar from Lift) becomes visible

2. Make Ajax call

I have currently this CSS selector, for the Ajax call:

 "li [onclick]" #> SHtml.onEvent(onClickCallback)

And I also have the JsCmd to make the progressbar visible, but I don't know how to use it in the selector.

Since the return type of (String, JsExp) / onClickCallback is not evaluated immediatly, I don't know how to combine it with my jsCmd.

Thanks in advance.

[Aleph-1]

Ivan,

Have you tried placing the javascript for showing the progress bar in your template? The event handler can then call a function which you can inject from your snippet using with:

net.liftweb.http.js.JsCmds.Function

I find that having the UI code in the template itself is a clean separation from the snippet and then the ajaxCall can then call a callback to hide the progress bar.

[Ivan Schuetz]

But this doesn't solve the problem, how do I add the Function call to CSS selector with SHtml.onEvent?

[Aleph-1]

What I meant is have a javascript block something to this effect. Note that I am showing a dialog

$("#load").click(function(){
    $("#loadDialog").reveal();
    loadEventsFromServer(function(){
        $('#loadDialog').trigger('reveal:close');
    });
});

Note that the loadEventsFromServer is a JS that I inject from my snippet using the JsCmds.Function.

Admittedly this may not be the "best practices" approach to Lift's Ajax mechanism. However I prefer this as it eliminates injecting static UI handling code from the snippets and allows me to have it in my template.

YMMV.

Cheers!

[Ivan Schuetz]

Uhm... ok, thanks. Still a bit obscure for me, since I wouldn't know how to inject the call there - and not sure if I like this approach.

For now I did another approach, which I also don't like. I put the client only JS in the onclick in HTML (could also be done via JQuery) and then:

listItemSel &= "li [onclick+]" #> SHtml.onEvent(onClickCallback)

It works and it's the easiest for me to implement now. Still I would prefer to add the JS directly in the snippet.

[Ivan Schuetz]

Correction - code is:

 "li [onclick+]" #> SHtml.onEvent(onClickCallback)

[Andreas Joseph Krogh]

Don't use onEvent, it's for form-elements, use ajaxInvoke.

 

There are several ways to do what you want, here are two:

 

1.

        "button [onclick]" #> (Call("myJsFuncToDisplayProgressbar") & SHtml.ajaxInvoke(() => Alert("snipp!"))) &

This "concatenates" two JsCmds (javascript commands) and places them in your "onclick"-handler

 

2.

        "button [onclick]" #> Call("myJsFuncToDisplayProgressbar", AnonFunc(SHtml.ajaxInvoke(() => Alert("snipp!")))) &

This passes the anonymous function, which when called executes the ajax-call, as the argument to myJsFuncToDisplayProgressbar. It may have the following signature:

 

function myJsFuncToDisplayProgressbar(callback) {

    displayProgressbar();

    callback()

}

 

Hope this helps.

 

--
Andreas Joseph Krogh <and...@officenet.no>      mob: +47 909 56 963
Senior Software Developer / CTO - OfficeNet AS - http://www.officenet.no
Public key: http://home.officenet.no/~andreak/public_key.asc