Listen to Response on HTML Form embedded in GWT View?

Question

I have a HTML like the following:

<div>
<form>
  <input type="text" />
  <button class="sendForm" value="Send form" />
</form> 
</div>
<script>
// post the form with Jquery post
// register a callback that handles the response
</script>

I use this type of form a lot with a JavaScript/JQuery overlay that displays the form. That could be handled for example with plugins like FancyBox. I use Fancybox for Ajax content.

I also want to use this form embedded into a GWT view. Lets assume that the for cannot be created on client side because it has some server based markup language inside to set up some model data.

If I want to use this form in GWT I have to do the following. Tell GWT the form request url and use a RequestBuilder to query the html content of this form. Then I can insert it into a div generated by GWT. So far so good.

Problem:

When the user hits the send button the response is handled my the JQuery callback that is inside the script under the form.

• Is there a way to access this callback from within GWT?

• Is there a way to overwrite the JQuery send action? Since, the code is HTML and comes from the server I cannot place ui-binder UiFields inside to get access to these DOM elements.

• I need to get the response if the submitted form accessible to GWT.

Is there a way how I can achieve this with JSNI?

Answer 1

Answers to each question:

1 Is there a way to access this callback from within GWT? actually you cannot modify the callback itself, what you can do from GWT is to call any jquery method, thus you can unbind any previous added handler, and set yours.

  //NOTE: not wrapping code in $entry() to make a clearer code.
  private static native unbindForm() /*-{

    // remove all jQuery handlers added previously to my form
    $wnd.$("my_form_selector").off();

    // add a new handler for the submit event
    $wnd.$("my_form_selector").on("submit", function(event) {
       event.preventDefault();
       $wnd.$(this).post(url, ...).done(function(data) {

         // Use JSNI to call a GWT method
         @.com.example.MyClass.handleFormResponse(*)(data);
         // NOTE: that you can use a star instead of having to write parameter
         // types, when you only have one method signature in your class.
       });
    } 
  }-*/

  // handle the form response in GWT
  public static void handleFormResponse(String data) {
    // handle form response in GWT
  }

Another thing you can do with GWT, is to wrap your form in a FormPanel and use specific widget methods to set a handler and read the response. But I think this is not what you are asking for.

2 Is there a way to overwrite the JQuery send action Yes, using JSNI to ask jQuery to unbind previously set events. See code in #1.

3 I need to get the response if the submitted form accessible to GWT. You have to include in the jquery.post callback some code to call GWT static methods (you can use-non static as well but this way is easier) this is also JSNI. See code in #1.

4 Is there a way how I can achieve this with JSNI? Of course, JSNI is the way to interact with handwritten javascript from GWT.

Aditional Notes:

• GWT is designed to build RIA apps with very optimized js code. I know each one has their reasons for using external libraries, but adding 3party javascript to your app is against the main goals of gwt compiler remove death code and optimize output. If you like jquery like syntax and features for GWT I recomend to use gwtquery, which has been fully written in gwt, hence the compiler will include just the code you use.

• Writing JSNI is a source of mistakes difficult to handle in the debugger. So I recommend to use gwt-exporter to populate java methods/classes or gwtquery to call external javascript. See these post I wrote some time ago: Pass value from GWT to Javascript via JSNI and Calling GWT Java function from JavaScript

Answer 2

Javascript => GWT and GWT => javascript values passing both can be done using JSNI . Please have a look here for more information about JSNI