GWT adding Event Handler overrides the native one? - java

lets say i have the following html element on my host page:
<input type="text" onfocus="this.value = ''" id="textField"/>
In gwt i wrap this into an TextBox Widget like this:
final TextBox myTextBox = TextBox.wrap(DOM.getElementById("textField"));
If i now want to add a focus handler what will happen?
myTextBox.addFocusHandler(new FocusHandler() {
public void onFocus(final FocusEvent event) {
// do something
}
});
What i want to achieve is that first the javascript which was defined on the host page should be executed and after that my focus handler should be executed. But what actually is happening is that the javascript from the hostpage is not being executed and only the code within onFocus is executed. Is this behavoir normal? I would expect that add means actually add and not override. Is there a way to work arround this? Or do i maybe have any flaws which induce this behavoir. Any help is appreceated.
kuku

Related

Override existing Javascript function in a webpage

I display a webpage (not mine) in a webview. There is a Textarea, in which I need to put some text.
<TEXTAREA NAME="app1" ROWS="3" style="width:95%" TABINDEX="1"
onKeyDown="javascript:return gerTouch(event);"
onKeyUp="javascript:verif(app1,300,true);"
onBlur="javascript:effacer();">TEXT TO CHANGE</TEXTAREA>
Is it possible, with addJavascriptInterface, to rewrite the existing onKeyDown (or another one) function, in order to put my text in the desired place ?
Something like :
webview1.addJavascriptInterface(new Object()
{
public void verif(String strl,int i,boolean b)
{
//Some code ?
}
}, "ok");
The textarea's name changes at each loading, and I cannot access the html textarea with another way.
Any other suggestion would be welcome :-) (my goal: put a value in a webview's textarea : Put text inside a textarea in a webview)
You can change the verif function by running something like after the webview has loaded (call it inside the onPageFinished() of your WebViewClient) :
webview.loadUrl("javascript:window.verif = function(strl,i,b){/*some code*/}");

GWT History - Why does it change the focus of my screen?

I have a simple application structure that will contain three composites at any one time - my header, footer and content composites. The composites are laid out in the follow manner.
<body>
<div id="header">
<div id="content">
<div id="footer">
</body>
The composites are assigned to the three <div>'s in my EntryPoint. The EntryPoint also contains a History Handler as follows.
History.addValueChangeHandler(new ValueChangeHandler<String>() {
#Override
public void onValueChange(ValueChangeEvent<String> event) {
String historyToken = event.getValue();
if(historyToken.isEmpty()) {
parseTokens();
ContentContainer.INSTANCE.setContent(new IndexScreen());
}
else if(historyToken.equalsIgnoreCase("registration")) {
ContentContainer.INSTANCE.setContent(new RegisterScreen());
}
else if(historyToken.equalsIgnoreCase("login")) {
ContentContainer.INSTANCE.setContent(new LoginScreen());
}
}
});
History.fireCurrentHistoryState();
In my Composites, I have several ClickEvent handlers that look similar to the following.
#UiHandler("registerLink")
public void handleClick(ClickEvent event) {
ContentContainer.INSTANCE.setContent(new RegisterScreen());
History.newItem("registration", true);
}
This registers the history very nicely. It also brings me to the appropriate pages when I click the back button. However, it has the very odd effect of focusing the browser on the content composite, with the effect of the browser being scrolled to the bottom. It's not a deal breaker but it kind of breaks the user experience a little. (Do let me know if the explanation isn't clear, I'll add images)
What exactly is causing this and how can I fix it?
GWT history tokens work with the hash # token. In html this was originally intended to use the browser to focus on a specific part of the page, if an element has a name or id with the string after the # token. Could it be you have an id matching your history token?
Also in you handleClick you call setContent. But if I'm correct the call after it triggers a change event and will end up in the onValueChange, which also calls the setContent. So it looks like you are calling setContent twice here.

Jquery event not called after update

I have a pretty simple JSF form on my hand like so:
<h:inputText id="number" value="#{bean.value}"
styleClass="integer" onkeyup="update()" />
I have a jQuery selector as well like this:
jQuery(document)
.ready(
jQuery(".integer")
.keydown(
function(event) {
//do your stuf
});
Now, this function is getting triggered pretty well, until I update the container around this input. It is a ui:repeat by the way. The update() method only refreshes a label. After the update the function is never triggered until I reload the page. This jquery included from a file in the head part, but is is still there after the update, function is not triggered however? How can I make it work again after update?
As others have already answered: When you update the container the event handler is not attached anymore and your need to reattach it.
However, another option to this is using jquery`s on() method.
So use something like this (untested though):
jQuery(document)
.ready(
$(document).on("keydown", '.integer', function (event) {
//do your stuf
}));
This isn't work after you update because the element isn't bound event anymore, so you should create a Javascript's function to solve this issue:
<script type="text/javascript">
function test(){
jQuery(".integer")
.keydown(
function(event) {
//do your stuf
});
};
jQuery(document)
.ready(test();
);
</script>
Component update your target component should call this test() function, like:
<p:commandButton oncomplete="test();" update=":COMPONENT_ID_HERE" ..../>

Exception while adding a widget to iframe?

I am using GWT. have below code in my host page.
<div id="mainDiv"/>
<iframe id="__printingFrame" style="width:0;height:0;border:0"> </iframe>
in EntryPoint's onModuleLoad() i have below code:
#Override
public void onModuleLoad() {
RootPanel.get("mainDiv").add(new SomePage());
}
in one of the methods of SomePage.java i am doing:
RootPanel rootPanel = RootPanel.get("__printingFrame");
rootPanel.add(new Html(" "));//adding some widget
But bcaz of above line i am getting below exception. Am i missing anything here?
java.lang.AssertionError: A widget that has an existing parent widget may not be added to the detach list
at com.google.gwt.user.client.ui.RootPanel.detachOnWindowClose(RootPanel.java:136)
at com.google.gwt.user.client.ui.RootPanel.get(RootPanel.java:211)
Thanks!
There are 2 issues in your code (but you're only seeing one for now):
You cannot have nested RootPanels (see http://code.google.com/p/google-web-toolkit/issues/detail?id=3511 and http://code.google.com/p/google-web-toolkit/issues/detail?id=3528), this is what's causing the error you're seeing
You cannot add widgets to an iframe. Well, wrapping it within a RootPanel, technically, you could, but they'd be added as children of the iframe element, so they wouldn't be visible to your users (I cannot think of a single browser that interprets JavaScript but doesn't support iframes).
RootPanel.get("id") can only get <div> element.you can wrap existed element like that.
Frame frame=Frame.wrap(DOM.getElementById("__printingFrame"));

Modal Window or confirm box in Form.onSubmit

In Form.onSubmit can I add a SimpleAttributeModifier to that form? Actually I have a situation where the onSubmit method of the form look like this:
#Override
public void onSubmit() {
//some code
if (some_condition) {
//here I want to show Javascript confirm box or wicket modal window
//but I can not get any AjaxRequestTarget here to show that modal
add(new SimpleAttributeModifier("onSubmit", "return confirm('confirm msg')"));
}
//some code
}
It is not working. Is there any way to achieve this? Thank you.
What you're trying will definitely not work, as the onSubmit() method is not called in time. It is a server-side method called when the form is submitted. In order to show a confirm dialogue, you want some javascript executed on the client before the form is sent back from the client to the server.
You need the attachment of javascript to happen when the html is rendered, so that it's there to be called when the user clicks the submit button.
It can of course be done. I don't have my own code for it handy, but I think this example should get you pointed in the right direction.

Categories