Calling Java function from within jQuery slider through JSNI

Question

I have got the main class (say StockWatcher) call a JSNI to define a jQuery UI dialog within the body at page-load. The dialog is called within a JSNI function. On onModuleLoad, I do something like prepareUI();. The prepareUI JSNI runs as follows:

public void native prepareUI() /*-{
  $wnd.jQuery($doc).ready(function($) { 
    message = "<div id = 'message'>Don't do this...</div>
    $(message).appendTo("body");
    $( "#message" ).dialog({
            modal: true,
            buttons: {
                Ok: function() {
                    $( this ).dialog( "close" );
                }
            },
            close:function() {  [email protected]::doit()(); },
            autoOpen: true,
            show: {
            effect: "puff",
            duration: 500
            },
            hide: {
            effect: "explode",
            duration: 500
            }
        });
 });
}-*/;

This is followed by the doit() function, which is simple enough:

public void doit() {
  Window.alert("Foo");
}

But, on page-load, even though the dialog appears correctly, and even closes corrrectly on clicking the Ok button, the alert doesn't pop up (No error is shown in console). Can anyone tell me how to fix this? The class within which this is done is StockWatcher in the package com.google.gwt.sample.stockwatcher.client (imagine the default GWT StockWatcher package hierarchy).

Same issue as stackoverflow.com/questions/15275087/… (and you should use $entry too) — Thomas Broyer
– Thomas Broyer, Commented Mar 7, 2013 at 15:39
You mean replacing this by com.google.gwt.sample.stockwatcher.client.StockWatcher? — NedStarkOfWinterfell
– NedStarkOfWinterfell, Commented Mar 7, 2013 at 15:42

Thomas Broyer · Accepted Answer · 2013-03-07 16:54:51Z

2

Your problem is the this. When the function is called, this is not your StockWatcher class (it'll be your #message element). You have to use $.proxy or a simple var that = this at the top of your method. It's all about scoping.

BTW, you should also wrap your function with $entry: it'll make sure a few things go well in GWT: exceptions are routed to the GWT.UncaughtExceptionHandler, and commands scheduled via Scheduler#scheduleEntry and Scheduler#scheduleFinally are correctly called.

Example using $.proxy:

var closeFn = $.proxy($entry(function() {
    [email protected]::doit()();
  }), this);
$wnd.jQuery($doc).ready(function($) {
  …
  $( "#message" ).dialog({
    …
    close: closeFn,
…

Example using var that = this:

var that = this;
$wnd.jQuery($doc).ready(function($) {
  …
  $( "#message" ).dialog({
    …
    close: $entry(function() { [email protected]::doit()(); }),
…

answered Mar 7, 2013 at 16:54

Thomas Broyer

64.6k7 gold badges95 silver badges165 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

NedStarkOfWinterfell Over a year ago

Well, so much awesomeness in one answer!

Thomas Broyer Over a year ago

Oh, BTW, you can make closeFn event simpler, given you're only calling your method: var closeFn = $.proxy($entry([email protected]::doit()), this);

Collectives™ on Stack Overflow

Calling Java function from within jQuery slider through JSNI

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related