I am trying to display a confirm dialog when a user tries to close a window by click the 'X' in the top right corner. If the user goes for 'OK' option, I would like to continue closing the window but if the user presses the 'Cancel' button I would like to prevent the window from closing. Is there a way to do that?
For Razor:
#(Html.Telerik().Window()
.Name("Window")
.ClientEvents(events =>
.OnClose("preventClose")))
<script type="text/javascript">
function preventClose(e)
{
var shouldClose = confirm("Are you sure you want to close?");
if (!shouldClose)
{
e.preventDefault();
}
}
</script>
Tested and working. Note that this function is called when they click on the X or if you call $("#Window").data("tWindow").close(); so unless you have some validation check like I demonstrated you won't be able to close the window. I don't see a way to distinguish between clicking on the X and calling $(window).close() manually.
I was able to figure out the solution to my problem on my own:
If you do e.preventDefualt(); in the onClose event it would prevent the window from closing. There is a mention in the documentation that the onClose event is cancellable but nowhere does it say how to cancel the onclose event.
Related
I'm developing jQuery Mobile (jQm) app.
I wanna utilize taphold event to some crucial elements, such as remove button, to assure, that this element is secured from unwanted trigger.
I created Remove button on jQm popup and aded some JS to it, but I cannot force default action to quit, not with event.preventDefault() and event.stopImmediatePropagation(), nor with return false.
I prepared jsFiddle as duplicate of my code. The popup there contains simple progress bar as indicator of holded tap. You can try it here: jsFiddle (note: HTML5 data tag taphold="true" is not jQm default)
As a workaround, I'm currently replacing <a href="#" data-role="button"...></a> with <div>styled like button. This works well, since it doesn't have any default action, but I'm curious why the "proper" solution doesn't work?
$("a:jqmData(taphold='true')").bind("vmousedown vmouseup", function(event) {
event.preventDefault();
event.stopImmediatePropagation();
The event.preventDefault(); and event.stopImmediatePropagation(); used in the above piece of code, refer to the vmousedown and vmouseup events and not to every event which is bound to the selected element(s).
This means that the default behaviour for the click event still exists. So when you click the remove button, the click event is triggered and that's why the pop up closes immediately.
I hope this helps.
In my jQM - Backbone app I add a dialog programmatically if a certain condition is true, like this
$('body').append('<div data-role="dialog" id="interlink" data-theme="b" data-close-btn="none" data-url="insignificant"></div> ');
// remove dialog from DOM on pagehide
$("#interlink").on('pagehide', function () {
$(this).remove();
// remove this views popup-containers
$('#interlink-video-popup-popup').remove();
});
Beside other content in the dialog there is a button to open a popup widget to play a video clip and a close button to close the dialog. The code for closing the dialog looks like this:
backBtnHandler: function(e) {
e.preventDefault();
$('#interlink').dialog('close');
$(this).remove(); // all DOM listeners get removed as well by jQuery
}
This works all well if the video clip is watched in full length, the popup widget closes on ended and the user clicks the dialog close button to close it.
A requirement is when the video clip is playing and the user scans another NFC tag the video should stop, trigger an ended event and close the popup. This is also working, however the dialog should also close. Here is a simplified code snippet with a timeout to simulate a NFC scan:
INTERPRETOUR.interlinkVideoPlayer = $('#interlink-video-player')[0];
// bind onended event to close the popup
$(INTERPRETOUR.interlinkVideoPlayer).on('ended', function() {
$('#interlink-video-popup').popup('close');
INTERPRETOUR.interlinkVideoPlayer = 'undefined';
$('#interlink-back-btn').trigger('click');
});
// play video
INTERPRETOUR.interlinkVideoPlayer.src = 'http://mydomain.ca' + this.model.get('video')[0].url;
INTERPRETOUR.interlinkVideoPlayer.play();
setTimeout(function() {
$.publish('item', '2479');
}, 5000);
The issue is that $('#interlink-back-btn').trigger('click'); invokes the backBtnHandler but pagehide is never triggered and so the dialog doesn't close.
Any help to resolve this issue would be much appreciated.
Instead of invoking a button using .trigger('click'), bind closing when popupafterclose event triggers.
Demo 1 / Demo 2
Static Popup
$('#popupID').on('popupafterclose', function () {
$('#dialogID').dialog('close');
});
Dynamically generated Popup
$(document).on('popupafterclose', '#popupID', function () {
$('#dialogID').dialog('close');
});
I have a serious problem in Safari on iPad. The new contenteditable features doesn't seem to work with touchmove event!
code:
...
<script>
function doNothing(event) { return; }
function initIFrame() {
var iframe=document.getElementById("iframeedit");
iframe.contentWindow.document.designMode="on";
iframe.contentWindow.document.addEventListener("touchmove", doNothing, true);
}
</script>
</head>
<body onload="initIFrame()">
<iframe style="width:500ppx;height:200px" src="content.html" id="iframeedit"></iframe>
...
By adding touchmove somewhere to the document the editable content can not be edited anymore after a touchmove (hold finger down to get the magnifier). The cursor can be set but typing by onscreen keyboard is not allowed anymore.
Test script (for iPad + iOS5):
http://flyingdog.biz/tests/ipad/test2.html
Another test script which is working:
http://flyingdog.biz/tests/ipad/test1.html
As you can see in that other script I put a few lines of text in front of iFrame - very strange! I am looking for another/better workaround or did I have done something wrong? Without the touchmove event it is working but I need this for a good editing experience.
I found a workaround for this bug: It seems that the iframe document looses the focus after a touch event, especially when the copy&paste menu appears. To workaround this bug add a keydown event handler to the iframe-document and reset the focus to the document:
var iframeDoc = $(iframe.contentWindow.document);
iframeDoc.keydown(function(event) {
iframe.contentWindow.focus();
});
This fixes the bug mostly for me. Only if the user types very fast (e.g. on a connected bluetooth keyboard) it can happen that some keystrokes are lost, because the javascript keydown handler execution is a little bit delayed on the iPad.
I want to show a popup screen on my page using JQuery UI Dialog widget.
To implement this I have a <div class="popup-placeholder"> on my page. Actually there are more than one on the page (If this makes a difference to the solution)
On click of a button, I am initializing the dialog and 'open'ing it. The initialization of the popup is inside the action click because it is supposed to make an Ajax call to get the content of the popup. (I tried taking the initialization out of the click event, but that did not work $('div.popup-placeholder').dialog(); )
var popupContext = $('#' + contextControl.id + ' > .popup-placeholder');
popupContext.html(formHtml);
$(popupContext).dialog({
bgiframe: true,
modal: true,
autoOpen: false,
closeOnEscape: false,
dialogClass: '',
draggable: true,
position: 'center',
resizable: false,
width: 600
});
On click of the action button, the form shows and does what it is supposed to.
Now, I have a close link on the popup WHICH IS NOT A DIALOG BUTTON, but just another link with an event binded to it.
It does this...
$('#popup-placeholder-61').dialog('close');
where #popup-placeholder-61 is the same as $(popupContext)
The problem I am facing now is that, on close of the popup, the same action button does not show the popup again. The issues seems to be that the <div class="popup-placeholder"> has been removed from the mark-up.
I tried the solutions on the following page but did not help -
Jquery Dialog Close on StackOverflow
So, I need more help
After struggling a bit, i came up with a best solution. Please use below line instead of dialog('close')
$('#popup-placeholder-61').dialog("destroy");
This will allow div to retain its position
My issue has been resolved, but I will be looking into why my earlier approach did not work.
What I was doing earlier was that I had multiple place-holders with different IDs, and I was making only one of them the dialog. I used some Jquery selectors to select the appropriate div for the dialog box and had issues as described above.
The only change I did now is that I have a single div which acts as the placeholder. And that now works. It also initialized fine outside my event.
So, maybe it was something to do with my selectors? I will try more and if I find something will post it as a follow up.
Thanks.
Try taking the initialization code out of the click event it may be that by trying to rebind everything again it's failing to pop the dialog open with the second click ... I had a similar problem which I "resolved" by creating the the markup for the dialog every time the dialog was to be opened.
The ajax bit of your problem is not hold back for you to take the initialization out of the click event, just load your ajax content on the click event and show the dialog with dialog('open').
The main problem was that I was looking for the dialog div in the wrong place.
See this post for more details ...
Jquery Dialog - div disappears after initialization
I want to open a jQuery UI dialog when a user presses enter or space on a given element. It appears that the enter/space keys are being processed by the dialog, however, causing the default element (the cancel button) to be pressed. The dialog is closed almost as soon as it opens.
Here is a simplified demonstration:
<script type="text/javascript">
function Go() {
$("#dialog").text("Are you sure?").dialog({
modal: true,
buttons: {
Cancel: function() {
$("#dialog").dialog("destroy");
},
OK: function() {
$("#dialog").dialog("destroy");
}
}
}); // end .dialog
}
</script>
<input type="button" value="Test" onkeydown="Go()" />
<div title="Dialog" style="display: none;" id="dialog"></div>
If the button is given focus and then the user presses space the dialog opens and then immediately closes. If the user presses enter, the dialog closes so quickly it doesn't even flash (at least that was my experience with Firefox 3.5.3)
How do I prevent the dialog from processing the key from the onkeydown event which caused the dialog to open?
Try onkeyup if there is one. If it works, I'll give you the explanation(Busy).
Edit Explantion:
It's mainly because the onkeydown event does not get called once, it gets called continually while it's pressed down, and since computers opperate so fast(1 second is eternity to them) it get's called many times during one push down. The solution is not to call it when it's pushed down, but call it on the up part(when you let go).
Happens all the time in electronics with switches and logic gates etc. I forgot the technical terms.