Is there a way to get a jQuery modal dialog to be "truly" modal?
For example, if I create a confirmation dialog for a yes/no, how do I wait for the response from the user before processing anything else.
TIA
You have to place your logic for after the dialog into the dialog's button events. You can't use it to pause execution of a method mid stream. Only the native javascript alert/confirm boxes can do that.
$( ".selector" ).dialog({ buttons: [
{
text: "Ok",
click: function() {
// do whatever you want on OK.
}
}
] });
http://jqueryui.com/demos/dialog/
Related
I've a jquery dialog that contains a Kendo UI Grid.
$("#" + popupElementName).dialog({
modal: true,
open: function () {
//Kendo grid here ...
},
close: function (event, ui) {
$(this).dialog("destroy").remove();
}
});
If I click the X sign to close the dialog then open the popup again, I get 2 Kendo grids. I get as many grid as the number of times I closed and opened the jquery dialog.
After doing some researches, I've found out that I can initialize the dialog by using the command destroy. Unfortunately, it seems not to work. I'm still getting multiple grid.
Some posts have suggested to add remove. However, the problem with using remove is that the dialog doesn't work anymore because there is no more the div that's converted in dialog.
You should not initialize the grids on every open event.
var grid= $("#grid").data("kendoGrid");
if (!grid) {
//initalize if not already initialized
}
If not u should destroy kendo grids and clear the window on close and re-initialize the grids on every open
open: function () {
//Kendo grid here ...
},
close: function (event, ui) {
$("#grid").data("kendoGrid").destroy();
$(this).empty();
}
I am trying to do something similar to what this page is doing.
The only difference is that the jQuery UI dialog I use is modal.
I tried editing the script in the page to make the jQuery UI dialog modal.
$("#dialog-modal").dialog(
{
modal: true, // added this line to make dialog modal
width: 600,
height: 400,
open: function(event, ui)
{
var textarea = $('<textarea style="height: 276px;">');
$(textarea).redactor({
focus: true,
maxHeight: 300,
initCallback: function()
{
this.code.set('<p>Lorem...</p>');
}
});
}
});
I then clicked on the insert link button(the 3rd button from the right in the toolbar). This shows another jQuery UI modal dialog with a form.
I noticed that I cannot get the focus of the text fields. I cannot type anything into them.
The code works fine if I don't make the the first dialog modal.
Any idea how to circumvent this?
I ran into the same problem. This behavior is a result of jQuery UI handling focusin.dialog event on the document, and putting the focus back to the last jQuery UI dialog in the stack (using selector ".ui-dialog:visible:last"). I solved the problem by calling this code right after my modal dialog was created:
setTimeout(function() {
$(document).unbind("focusin.dialog");
}, 100);
I used setTimeout, because jQuery UI also uses setTimeout to bind this event. I was able to fix it thanks to this answer: jQuery UI Focus Stealing. I also tried upgrading to jQuery UI 1.11.4 but that does not solve the problem.
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 am working on a rotator using jquery ui and can get it to pause on hover with this:
$(document).ready(function(){
$("#rotator").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
$("#rotator").hover(
function() {
$("#rotator").tabs("rotate",0,true);
},
function() {
$("#rotator").tabs("rotate",5000,true);
}
);
});
This only problem is that it stops on the last item in the list and won't rotate through the first item unless I make it:
$(document).ready(function(){
$("#rotator > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
$("#rotator").hover(
function() {
$("#rotator").tabs("rotate",0,true);
},
function() {
$("#rotator").tabs("rotate",5000,true);
}
);
});
but then the hover doesn't work.
Any ideas how to get it to cycle through the list and pause on hover?
For some reason I had a really old version of jquery and jquery ui. I updated to the version we are running on our site (1.7.2 and jquery ui 1.82). Could run the newest versions, but we have too many issues with legacy code.
guys!
I just commited an extension to make Pause on Hover for jQuery UI Tabs
jQuery UI Tabs Rotate: Pause on Hover
Enjoy it!
I am working for mobile app. I am showing popup with content, If content is too long i feel to use scroll. Is possible to use iscroll in dialog popup?
$('#checkout').click(function() {
var jqxhr = $.post("/app/Trip/checkout", {
}, function(missing_info) {
$('#checkout').simpledialog( {
'mode': 'blank',
'prompt': false,
'forceInput': false,
'useModal': true,
'fullHTML': missing_info
})
});
});
I am getting popup with content but don't know how to implement iscroll in dialog. isroll for normal div working fine for me. This popup is jQuery mobile simple dialog. Anyone can help me?
yes of course you can use iscroll for a pop up div but that popup should be nested under a parent which should be a direct child of a body. set no styles for the parent and then take the id of popup and set iscroll once content is added.
var tempscroll;
tempscroll = new iScroll('id_of_popup');
thatsi