[jQuery] jquery and gwt(google) effects help
Hi,
I am trying to integrate jquery(latest version) with google's gwt(1.0.21 beta), I want
to use jquery's basic effects to hide and show a div element. The div is generated
from gwt. I can hide the div element, receive a callback. Inside my callback function
I try to redisplay/show the div element again. But the div element does not reappear. It like
my show event is lost. Would anyone know how I can get my div element to reappear?
Any help greatly appreciated
The sequence of events are
- click on the 'click me' link, this calls
function hide() {
$('#slot1').hide("slow", function() { show(); } );
}
- it invokes my show function
function show() {
alert("show");
callback();
$('#slot1').show("slow");
}
- I receive an alert "show"
and an alert from my gwt widget.
- but $('#slot1').show("slow");
does not redisplay the div element.
-----------------------------------------------------------------------------------------------------
My html file
<html>
<head>
<title>Wrapper HTML for Test</title>
<script type="text/javascript" src="js/jquery.js"></script>
<style>
</style>
<!-- -->
<!-- The module reference below is the link -->
<!-- between html and your Web Toolkit module -->
<!-- -->
<meta name='gwt:module' content='com.Test'>
</head>
<!-- -->
<!-- The body can have arbitrary html, or -->
<!-- you can leave the body empty if you want -->
<!-- to create a completely dynamic ui -->
<!-- -->
<body>
<script language="javascript">
function show() {
alert("show");
callback();
$('#slot1').show("slow");
}
function hide() {
$('#slot1').hide("slow", function() { show(); } );
}
</script>
<!-- -->
<!-- This script is required bootstrap stuff. -->
<!-- You can put it in the HEAD, but startup -->
<!-- is slightly faster if you include it here. -->
<!-- -->
<script language="javascript" src="gwt.js"></script>
<!-- OPTIONAL: include this if you want history support -->
<iframe id="__gwt_historyFrame" style="width:0;height:0;border:0"></iframe>
<a href="#" onclick="hide();">click me</a>
<div id="slot1"/>
</body>
</html>
--------------------------------------------------------------------------------------------------
The gwt java file which creates html and assigns it to a div, slot1.
package com.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.*;
import com.google.gwt.user.client.*;
/**
* Entry point classes define <code>onModuleLoad()</code>.
*/
public class Test implements EntryPoint {
/**
* This is the entry point method.
*/
public void onModuleLoad() {
Label label = new Label("This is a test");
RootPanel.get("slot1").add(label);
setupDelegator();
}
public static native void callback() /*-{
$wnd.alert("gwt callback");
}-*/;
public native void setupDelegator() /*-{
$wnd.callback = function() {
@com.client.Test::callback()();
}
}-*/;
}
_______________________________________________
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/