I would like to trigger a click on the browse button on a hidden FileUpload widget.
The following code works fine on IE 6+, but doesn't work in FireFox.
final FileUpload upload = new FileUpload();
upload.setVisible(false);
upload.setName("uploadFormElement");
panel.add(upload);
panel.add( new Button("Select File", new ClickListener()
{ public void onClick(Widget pSender)
{ jsClickUpload( upload.getElement() ); } }));
native void jsClickUpload( Element pElement ) /*-{ pElement.click(); }-*/;
How can I achieve the same in FireFox (and possibly other browsers)?
The solution can be read here:
http://www.quirksmode.org/dom/inputfile.html
in the last paragraph:
The click() method allows you to
simulate a click on a form field.
Checkboxes get toggled, radios
selected, and so on. Unfortunately
Mozilla and Opera haven't added this
method to file upload fields. I wonder
why, adding it is not really a
security risk since the worst that can
happen is that the file selection
window pops up.
have you tried calling the onClick() method directly?
The click method is currently in the process of being implemented in FF 4. It is being discussed what security rules will be implemented and it sounds like it will be similar to Window.open and must be the direct result of a user action and not a timer or load.
Related
I am trying to open an email client just like using mail me tag.
But I want to use my custom widget, which is not hyperlink, anchor or so. I added a DOM handler to my widget to listen to clicks:
public class VContactWidget extends VHorizontalLayout implements ClickHandler {
private HandlerRegistration clickHandler;
public VContactWidget() {
// added some content here
clickHandler = addDomHandler(this, ClickEvent.getType());
}
#Override
public void onClick(ClickEvent event) {
Window.open("mailto:john.doe#mail.com", "_blank", "");
}
}
Everything is working fine except one detail: When the widget is clicked, new empty browser tab will open with url set to mailto:john.doe#mail.com. I don't want the new tab opened. Can I avoid it somehow?
Note I set _blank parameter, as used in many examples. I also tried to use empty string or some other values as well. I looked into documentation, but didn't find anything useful.
https://developer.mozilla.org/en-US/docs/Web/API/window.open
One solution may be to use Anchor, but my component is more complex, not just single <a> link.
Another detail to note may be application server - I am using Tomcat 7 now.
Trying to fire native event on hidden Anchor programatically did not work for me. (Which does not mean it cannot be done.)
This is, how I actually solved my problem: Instead of Window.open(), I used following call:
public void onClick(ClickEvent event) {
Window.Location.assign("mailto:john.doe#mail.com");
}
This is not something that you can control. Whether this link opens in a new tab or a new window depends on the browser settings and user preferences.
I don't think it will make a difference if you use an Anchor or Window.open. In either case, the behavior may be different in different browsers. Also remember that for some users a click on this link will open Outlook or Mail, while for other users it will open Gmail in a browser window.
UPDATE:
If you want an exact behavior of an <a> element, create a hidden anchor element and fire a click on it when a user clicks on your composite widget.
Firing click event from code in gwt
I have a ListView that displays a list of Panels, one below the other. Every panel features a button (implemented via AjaxLink) that closes the panel and removes it from the list.
This is how the ListView is initalized and how the panels are created:
panelsList = new ArrayList<MyPanel>();
pnlContainer = new WebMarkupContainer("pnlContainer");
ListView<MyPanel> pnlItems = new ListView<MyPanel>("pnlItems", panelsList) {
#Override
protected void populateItem(final ListItem<MyPanel> item) {
item.add(item.getModelObject());
item.add(new AjaxLink<Void>("pnlClose") {
#Override
public void onClick(AjaxRequestTarget target) {
panelsList.remove(item.getModelObject());
target.add(pnlContainer); // repaint panel container
}
});
}
};
pnlContainer.setOutputMarkupId(true);
pnlContainer.add(pnlItems);
add(pnlContainer);
This works so far - the actions that trigger adding new panels (usually also AjaxLinks) do what they should and the new panel is added and displayed correctly. But I have problems getting the close button to fully work.
Please see the following steps:
1) I start the server and navigate to the main page. The ListView is initially populated with one panel.
Close-button-code of this panel:
<a wicket:id="pnlClose" id="pnlClose7" href="javascript:;">Close</a>
Searching the page code for pnlClose7 finds the following javascript code that makes the button work as expected:
Wicket.Ajax.ajax({"u":"./?0-1.IBehaviorListener.0-pnlContainer-pnlItems-0-pnlClose","e":"click","c":"pnlClose7"});;
Note: I do not press the button now, if i would, it would work as expected (thoroughly tested).
2) I trigger an action that opens a second panel. The panel is displayed below the first one as expected.
Close-button of the first panel:
<a wicket:id="pnlClose" id="pnlClosef" href="javascript:;">X</i></a>
Close-button of the second panel:
<a wicket:id="pnlClose" id="pnlClose10" href="javascript:;">X</i></a>
But now, neither searching for pnlClosef nor pnlClose10 finds some javascript code. The buttons (both!) do not work. I can still find the javascript code for pnlClose7.
3) I reload the page via pressing F5.
The button IDs change to pnlClose1a and pnlClose1b. Both IDs have javascript counterparts and work.
4) I press the first button (upper panel, ID pnlClose1a). The panel is closed as expected.
The remaining button's ID changes to pnlClose1c, again without a javascript counterpart. Javascript code for pnlClose1a and pnlClose1b is still present.
To make a long story short, the javascript handlers for my AjaxLinks seem to have shyness issues and only appear after I press F5 or reload the whole page in any other manner. I guess thats because repainting the pnlContainer changes the IDs of the current panels - but why is the linked javascript not updated at the same time? Is there anything I can change in my code to update the whole page without completely reloading it?
Wierd thing is that I am pretty sure this worked before... But I checked the whole class history and can't find any major change that would have triggered that. The ListView-code is mainly static since I added it.
I was had similiar problem. if you have any hardcoded javascript code in your page or panels html file (using <script> tag) remove it and set that js code in renderHead of your panel.
I tried to create a fileUploader with GWT.
Here is the problem, while I was adding ChangeHandler to fileUploader, I found that the behavior of IE and Chrome are different. If I choose the same file I uploaded, IE will trigger the onChange(), while Chrome won't. That's too weird. Can anybody tells me if it is a bug of GWT of not??
FileUpload fileUploader = new FileUpload();
fileUploader.addChangeHandler(new ChangeHandler(){
#Override
public void onChange(ChangeEvent event)
{
submitButton.setEnabled(true);
}
});
There are browser discrepancies that GWT cannot hide. The only mean to really reset a FileUpload in a cross-browser way, is to create a new one to replace the previous instance.
As we are facing GWT performance issues in a mobile app I peeked into Google Wave code since it is developed with GWT.
I thought that all the buttons there are widgets but if you look into generated HTML with firebug you see no onclick attribute set on clickable divs. I wonder how they achieve it having an element that issues click or mousedown events and seemingly neither being a widget nor injected with onclick attribute.
Being able to create such components would surely take me one step further to optimizing performance.
Thanks.
ps: wasnt google going to open source client code too. Have not been able to find it.
You don't have to put an onclick attribute on the HTML to make it have an onclick handler. This is a very simple example:
<div id="mydiv">Regular old div</div>
Then in script:
document.getElementById('mydiv').onclick = function() {
alert('hello!');
}
They wouldn't set the onclick property directly, it would have been set in the GWT code or via another Javascript library.
The GWT documentation shows how to create handlers within a GWT Java app:
public void anonClickHandlerExample() {
Button b = new Button("Click Me");
b.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
// handle the click event
}
});
}
This will generate an HTML element and bind a click handler to it. However, in practice this has the same result as using document.getElementById('element').onclick() on an existing element in your page.
You can hook functions to the onclick event using JavaScript. Here's an example using jQuery:
$(document).ready(function(){
$("#div-id").click(function(){
/* Do something */
});
});
If you're interested in optimizing performance around this, you may need to investigate event delegation, depending on your situation.
A click event is generated for every DOM element within the Body. The event travels from the Body down to the element clicked (unless you are using Internet Explorer), hits the element clicked, and then bubbles back up. The event can be captured either through DOM element attributes, event handlers in the javascript, or attributes at any of the parent levels (the bubbling or capturing event triggers this).
I'd imagine they've just set it in a .js file.
Easily done with say jQuery with $(document).ready() for example.
I want to handle the event in the case of link by my own event listener.If we click on a link in browser, browser will open the address given in the link but i want to call my own event listener. I tried to do it in GWT by removing the attribute of the anchor tag which worked but it is not a clean solution.
So if you are having any idea how to block the browser from opening that link please reply.
In GWT 1.6 the correct code is:
ClickHandler foo = new ClickHandler() {
public void onClick(ClickEvent event) {
/// do your stuff
event.stopPropagation(); // stops the event from bubbling to parent
event.preventDefault(); // prevents the browsers default action,
// following a link, etc
}
}
This is roughly equivalent to:
Link
Isn't that what this widget does:
http://google-web-toolkit.googlecode.com/svn/javadoc/1.6/com/google/gwt/user/client/ui/Hyperlink.html
eg: it looks like a normal hyperlink but lets you handle the onclick event?
You can just call event.cancel() (GWT 1.6) or
Event.getCurrentEvent().cancelBubble(true); // In 1.4 and earlier
DOM.eventCancelBubble(DOM.eventGetCurrentEvent(), true); // In 1.5
There is also a method to cancel an event from its instance within GWT 1.5, but I can't remember.