We Keep Coding

Listen to Response on HTML Form embedded in GWT View?

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?

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

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

Run JavaScript After DataBind

I have a ASP.Net Repeater control with a Table inside it. Is it possible to run a JavaScript function directly AFTER I call MyRepeater.DataBind()? I've been trying different things, but nothing is triggering the JavaScript function.
Thanks

Databinding occurs on the server in a postback as part of the Page Lifecycle process. In other words, excluding partial-postbadks, at the time this happens any existing DOM in the browser is destroyed. A whole new page is constructed on the server and transmitted to the browser, so that a new DOM can be built and rendered.
What all that means is that you want to think in terms of running your javascript in the page's onload event. One way to make this happen is using the ClientScriptManager.

Javascript can be called from server side by using RegisterStartupScript and RegisterClientScriptBlock methods.
http://www.mindfiresolutions.com/Register-clientside-startup-script-from-serverside-code-286.php

No. The javascript isn't even going to render and run until the code-behind has executed and the page delivered to the client. So it won't matter if adding the script is the first thing you do in the code-behind or the last thing you do (or directly after the DataBind()).
When using the ClientScriptManager Class, look at your code behind and you'll see the dynamic javascript is added just before the ending </form> tag (although it still may be possible to accomplish what you want to do, just with a different approach).

Well I found a solution, not sure it's the cleanest way to do it, but for my application's context it works:
I ran the javascript code after a partial postback using: Sys.WebForms.PageRequestManager.getInstance().add_endRequest();
Again, not the cleanest but suits the needs I have.
Thanks for all your input

How to add a javascript script for use in GWT?

How do I add a script such as the jQuery library so it is available for use in GWT? I know how to do JSNI, I just don't know how to make the jQuery library available to me so I can call it within JSNI.

GWT can call any JS function or reference any JS variable on the page using JSNI, so as long as the JQuery script is also loaded on the page, you can call any JQuery code you want.
For example:
public native void callJQuery() /*-{
$("p.neat").addClass("ohmy").show("slow");
}-*/;

They don't play well together, yet. The only way I know so far (correct me if I'm mistaken) is GWTQuery. Give it a try ;)
EDIT
I re-explained my thoughts, hope it'll be more clear now
It is possible to call any desired custom JavaScript code, see Jason's answer.
I recommend using GWTQuery, since it's successfull port of JQuery to Java-based GWT ecosystem and doesn't force you to use raw native JavaScript from Java code.

How to c# function using javascript

I have input HTML button(Not ASP.NET Button) click event in c#
Is there any way i can call c# function using javascript
Thank you very much....

Probably the easiest and most straightforward way will be to create an HTTPHandler on your ASP .NET site and then your JavaScript can make an AJAX call (easily done with jQuery, note the three links to three different methods, and there are likely more) to invoke that handler at its configured URL.
Additionally, does this method need to return anything? From the jQuery side your best bet will be to receive back a JSON object. This can be done pretty easily from the .NET side with the JavaScriptSerializer or even manually.

You need to use the MS Ajax JS libs. These will wire up things like that for you... but it has to be an ASP.NET button. Sounds like you want to make an AJAX Service call. Give us some more details as to how this is setup and how you want it to work. ASP.NET Forms is not very forgiving to simple buttons and JS... you need to think about viewstate.

Passing param to the OnLoad in aspx page from a javascript?

I have this javascript
function myFunction(source) {
window.open(source, "Title", 'width=400, height=400');
}
and in c# code I call it by
HtmlPage.Window.Invoke("myFunction", source);
which opens up a aspx page and goes to its OnLoad function:
protected override void OnLoad(System.EventArgs e)
{
base.OnLoad(e);
My questions are
how do I pass in parameters to the event args in the aspx page? or is that even possible?
and how can I pass these parameters from my c# code to the javascript?
I am still learning javascript so please explain.
Thanks,
Voodoo

You need to add a query string to the URL, such as http://server/path.file.aspx?SomeName=SomeValue.
You can access in in the C# server-side code by checking Request.QueryString["SomeValue"].

PageLoad happens on the serverside before the page has been sent down to the client's compter where the javascript is executed. Have a look at the asp.net page lifecycle It used to be one of our stock interview questions for web devs and it's amazing how many asp.net devs don't know it
SLaks answer is the easiest and most of the time will probably do you well, however you could always use an ajax operation to send some data back to the server and affect the page. This is more complicated but more powerful and leaves your URL looking nice and clean