I have a form and I want to display a confirmation dialogBox when the user presses the back button. Let say that I have one Texbonx that listens to a ChangeValueHandler
addValueChangeHandler(new ValueChangeHandler<String>() {
#Override
public void onValueChange(ValueChangeEvent<String> event) {
setChanged(true);
}
});
This is the short scenario
1) I enter text in the TextBox
2) I hit the back button
3) The ValueChangeEvent is not called
I tried the fire the BlurEvent programmatically on the TextBox with textBox.fireEvent(new BlurEvent() { }); but still no result.
Any suggestions ?
When the page is closed (by pressing the back button, or closing the page) no events will be fired by the controls. What will fire first is window.onbeforeunload to give you a chance to warn the user about data loss and offer to stay on the page. If the user chooses to stay on the page, then all the events that were supposed to be fired, will fire (so your change event will fire).
You can attach a handler to the native onbeforeunload event by using Window.addClosingHandler.
Window.addWindowClosingHandler(new ClosingHandler() {
#Override
public void onWindowClosing( ClosingEvent event )
{
event.setMessage("If you leave the page now all data will be lost.");
}
});
It's worth noting that the ClosingEvent and it's underlying onbeforeunload event, cannot, under any circumstances, be cancelled programmatically. The only way to prevent the user from leaving the page is if the user itself chooses "Stay On This Page" in the popup that results from the code above.
What I did is to set the focus of the TextBox to False and then check if it's changed, that forces the TextBox to unfocus when hiting the back button.
This is the code that check if a form is changed
public boolean isChanged(){
if(formPanel == null) return false;
for (int i = 0; i < formPanel.getWidgetCount(); i++) {
if(formPanel.getWidget(i) instanceof BaseWidget){
BaseWidget w= (BaseWidget) formPanel.getWidget(i);
w.setFocus(false);
if(w.isChanged()){
return true;
}
}
}
return false;
}
Related
I have a gantt attached to onTaskClick and onTaskDblClick events.
When I double click it also fires the onTaskClick event.
How can I prevent that from happening?
It can be non-trivial because the fact is that when the first onTaskClick event fires there is no way to determine whether a user is done with clicking or is he going to do another single click which will then invoke double click event. So if you capture events in browser double click will always look like a sequence 'click'-'click'-'doubleclick'.
So if you need onclick not to fire for double clicks, you may need some timeout in onclick handler in order to check whether next click/doubleclick follows(200-300ms, the exact value may vary between browsers and OS). That way when the user does a single click, the onclick handler will be executed after some delay, and if it's the double click - a timeout for a click handler will be dropped so only onTaskDblClick handler will run.
var a;
gantt.attachEvent("onTaskClick", function(id,e){
setTimeout(function() {
if (a) {
return false;
} else {
gantt.message("onTaskClick")
return true;
}
}, 200)
a = 0;
});
gantt.attachEvent("onTaskDblClick", function(id,e){
gantt.message("onTaskDblClick")
a=1;
return true;
});
Please check this snippet that demonstrates how it works.
I would like to port an existing fully functional Chrome extension to Firefox, everything seems to work except the confirm() function behavior.
When the user clicks a specific button in the popup.html page, he is asked to confirm the action.
Chrome successfully prompts the dialog, I then get a Boolean back as soon as "ok" or "cancel" button is clicked, code related to the boolean returned is executed.
Firefox behavior feels buggy on the other hand. The confirm dialog prompts too but the extension popup is instantly dismissed, preventing further code in the click event handler to execute.
manifest.json : …, "default_popup": "popup.html", …
popup.html :
…
<script src="js/popup.js"></script>
</body>
popup.js :
removeButton.addEventListener('click', function () {
// Firefox: calling confirm() closes the popup.html page ...
// ... terminating event handler code
if (confirm("Please confirm you wish to remove this item.")) {
// …
}
});
Is there something to do about it or should I stop using confirm() and find a workaround ?
EDIT - Workaround solution
As a workaround, I set a 3 seconds countdown when the button is clicked and change its caption every second. Before time is up, if the user click again, the final action gets cancelled, otherwise final action is performed.
let log = document.querySelector('p')
,resetInterval = null
;
document.getElementById('resetbtn').addEventListener('click', function(e) {
if (!resetInterval) {
// Create a countdown and delete data when time is up.
e.target.content = e.target.innerHTML;
resetInterval = setInterval( function() {
var counter = +(e.target.innerHTML.trim().match(/\d+/)||[4])[0];
if (counter == 1) {
// Sending command to bacground page
// chrome.runtime.sendMessage({command:'remove'}, function (){
e.target.innerHTML = e.target.content;
resetInterval && clearInterval(resetInterval);
resetInterval = null;
log.innerHTML = 'Perform action…';
// });
} else e.target.innerHTML = 'Reset in '+(counter-1)+'s';
}, 1000);
log.innerHTML = '';
} else {
resetInterval && clearInterval(resetInterval);
e.target.innerHTML = e.target.content;
resetInterval = null;
log.innerHTML = 'Action aborted';
}
});
<button type="button" id="resetbtn">Reset</button>
<p></p>
Popout windows are designed to be dismissed when you move focus to another window. You can’t use dialogs (new windows) from the popout as they’re moving focus and thus dismissing the popout.
I am creating a custom CheckBoxTableView where the selected items are displayed with a CheckBox. If the user attempts to sort the table once items are selected, it appears to mess up. I would like to prompt the user to see if they would like to continue. If so, I would like to clear the selection, if not, simply consume the event so the sorting doesn't happen.
Unfortunately - my EventFilter seems to fire after the sort was completed.
On the TableView constructor, I placed the following code:
addEventFilter(MouseEvent.MOUSE_CLICKED, event -> {
if(event.getTarget() instanceof TableColumnHeader) {
Alert a = new Alert(Alert.AlertType.CONFIRMATION);
a.setContextText("you sure?");
Optional<ButtonType> bt = a.showAndWait();
if(bt.isPresent() && bt.get() == ButtonType.OK){
//Clear selection
getSelectionModel().clearSelection();
}else {
event.consume();
}
}
});
But by the time my EventFilter fires, the table has been sorted.
Any thoughts?
Use MouseEvent.MOUSE_PRESSED
MouseEvent.MOUSE_CLICKED is fired after MouseEvent.MOUSE_RELEASED that's too late to intercept listeners and listeners :)
I am currently working on a project in which the end user has two ways of submitting data for analysis.
The first way is: he clicks on a button - the button's listener fires an event called "ProcessBtnClick"
The second way is: he/she presses ENTER - the ENTER key fires the "ProcessBtnClick" event
When the ENTER key is pressed, the "ProcessBtnClick" event gets fired twice, it seems like the click event gets fired this way as well. Is there any way of avoiding this behavior? If so, How?
I enabled the ENTER key as follows:
this.control({
'container *' : {
specialkey : this.onHandleSpecialKey
}
});
The onHandleSpecialKey is defined as follows:
onHandleSpecialKey: function(field, event, options) {
if (event.getKey() == event.ENTER) {
QuickCloseUI.app.fireEvent("ProcessBtnClick");
}
}
I've created some elements of my GUI with GWT framework. I've just one button with an simple onCLick method. And when the button gets the focus (setfocus(true)) the triogger fires a click event automatically. But I just want the button holds the focus without fire any events .
How to make it in a simple way ?
my code :
public void onModuleLoad(){
..............
textBoxTx = new TextBox();
textBoxTx.addKeyDownHandler(new KeyDownHandler() {
public void onKeyDown(KeyDownEvent event) {
switch(event.getNativeKeyCode()){
case KeyCodes.KEY_ENTER: addTx();
}
}
});
....
protected void addTx()
final String tx = textBoxTx.getText().toUpperCase().trim();
textBoxTx.setFocus(true);
if (!tx.matches("^[0-9\\.]{1,10}$")) {
Window.alert("'" + tx + "' n'est pas valide .");
textBoxTx.selectAll();
return;
}
textBoxTx.setText("");
param_Tx=Double.parseDouble(tx);
if (param_An==0)
rateFlexTable.setText(1, 2, tx);
else
{
for (int i=1;i<=param_An;i++)
rateFlexTable.setText(i, 2,tx);
rateFlexTable.setText(param_An, 4,"");
}
**// fire the click event of my button when I give the focus**
**btnCalcul.setFocus(true)**
}
If you have a standard com.google.gwt.user.client.ui.Button, calling setFocus(true) on it will not activate the ClickHandlers for that button. It may be good if you could share some code because what you describe should not happen unless you are explicitly calling Button.click() or the user is actually click on the button.