I am creating a JQuery UI popup this way:
function ShowJQueryStandardDialog(searchTarget, title, width, height, closeFunction)
{
var $dialog = $('<div id="dialogDIV"><iframe id="dialogIFrame" frameborder="no" scrolling="auto" src="' + searchTarget + '" width="' + (width - 50) + 'px" height="' + (height - 50) + 'px"></iframe></div>');
$dialog.dialog(
{
modal: true,
title: title,
show: 'slide',
width: width,
height: height,
closeOnEscape: true,
close: function (event, ui)
{
if (typeof closeFunction === 'function') closeFunction();
}
});
}
I then want to get the instance of the popup elsewhere in the code so I can close it. I tried:
var $dialog = $('#dialogDIV');
var $dialog = $('.ui-dialog');
var $dialog = $('.ui-dialog-content');
But it returns empty object. Note that if I put the above code in the close method of the dialog, it works fine. Shall I conclude that I can't access the popup from outside its init code?
Found a way:
function ShowJQueryStandardDialog(searchTarget, title, width, height, closeFunction)
{
$dialog = $('<div id="dialogDIV"><iframe id="dialogIFrame" frameborder="no" scrolling="auto" src="' + searchTarget + '" width="' + (width - 50) + 'px" height="' + (height - 50) + 'px"></iframe></div>');
$dialog.dialog(
{
modal: true,
title: title,
show: 'slide',
width: width,
height: height,
closeOnEscape: true,
close: function (event, ui)
{
if (typeof closeFunction === 'function') closeFunction();
}
});
/* IMPORTANT BIT */
$(document).bind('close-dialog', function ()
{
$dialog.dialog('close');
});
}
Then call parent.$(parent.document).trigger('close-dialog'); when you want to close your dialog.
Related
I have a dialog that will popup when an element is hovered over. The implementation utilizes hoverintent to open and close the dialog. Using jqueryui 1.12, the dialog flickers and doesnt stay open. Recently updated the open dialog method to utilize object which will display the dialog next to the object (which was a required change).
HOVERLINKDELAY: 100
$("span.memberNameLink").hoverIntent({ over: claimstatus.memberOver, out: claimstatus.memberOut, interval: c.HOVERLINKDELAY });
memberOver: function (e) {
let claimid = $(this).attr('data-claimid');
let rowData = $(claimstatus.claimsGrid).getRowData(claimid);
claimstatus.openHoverDialog('Claim\'s Member Info: ' + rowData.MemberName.stripTags('span'), 400, 220, e);
let html = '<dl><dt>System ID:</dt><dd>' + rowData.PatientId + '</dd></dl>';
html += '<dl><dt>External Member ID:</dt><dd>' + rowData.ExtMemberID + '</dd></dl>';
html += '<dl><dt>Patient Account Number:</dt><dd>' + rowData.PatientAcctNumber + '</dd></dl>';
html += '<dl><dt>SSN:</dt><dd>' + rowData.SSNumber + '</dd></dl>';
$('#dialogHoverForm').html(html);
},
memberOut: function () {
claimstatus.closeHoverDialog();
},
openHoverDialog: function (title, width, height, overEvent) {
$("#dialog-hover").dialog({
position: { my: "center", at: "center", of: overEvent },
title: title,
width: width,
height: height,
modal: false,
draggable: true,
resizable: true,
closeOnEscape: false,
open: function (event, ui) { $(".ui-dialog-titlebar-close", this.parentNode).hide(); }
});
},
What would be a viable way to prevent the dialog box from 'flickering'?
I ended up adding a timeout and that seemed to remedy the issue. With the below change, the dialog will appear for 2 seconds before closing.
setTimeout(function () { claimstatus.closeHoverDialog(); }, 2000);
I created this fiddle to show my problem.
Isn't it possible to use bootstrap columns in a jquery ui dialog without getting this annoying horizontal scrollbar?
Soory, I don't know how to insert the fiddle code with the right depencies in the right way.
First think then write...
Just remove the "row" div and it works.
Look here.
Soory, I don't know how to insert the fiddle code with the right depencies in the right way.
Just add "style='overflow-x:hidden;'" to the dialog container div.
function CreateBusinessDialog(action, formId) {
var contId = 'dlgcont_' + GetUidString();
var container = document.createElement('div');
container.setAttribute('id', contId);
container.setAttribute('style', 'overflow-x:hidden;');
document.body.appendChild(container);
$('#' + contId).dialog({
autoOpen: false,
modal: true,
title: 'Create New',
width: '75%', //$(window).width() - 150,
height: $(window).height() - 150,
open: function (event, ui) {
$(this).load(action);
},
buttons: [{
text: 'Create',
click: function () {
var form = $('#' + formId);
form.validate();
if (form.valid()) {
//alert('valid');
form.submit();
}
}
}, {
text: 'Close',
click: function () {
$(this).dialog('close');
}
}],
close: function () {
container.parentNode.removeChild(container);
}
});
$('#' + contId).dialog('open');
}
I have several delete href on a page.
</i>
When a user clicks on this link I'm showing a jquery box to ask if he is sure to delete.
Until now everything is working fine, but I can't the window.location.href with the parameters from data-key to work. Some help would much appreciated.
I have followed this example: http://jsfiddle.net/yayh3/3/
<script>
$(".delete").click(
function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height:170,
modal: true,
buttons: {
"Verwijder": function() {
var me = $(this),
data = me.data('key');
window.location.href = "pagina_delete.php?id_record="+data.param1+"&id_table="+data.param2+"&table="+data.param3+"&paginanaam="+data.param4+"&template="+data.param5+"&lang="+data.param6;
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
}
);
});
</script>
You need to capture the context of the clicked element.
Directly within the click event handler, you can store the current value of this (which will refer to the clicked element), and then you can use this variable within the nested dialog methods/options.
In this case, you would just use var data = $(self).data('key') within the dialog method.
$(".delete").click(function () {
var self = this;
$("#dialog-confirm").dialog({
resizable: false,
height: 170,
modal: true,
buttons: {
"Verwijder": function () {
var data = $(self).data('key');
window.location.href = "pagina_delete.php?id_record=" + data.param1 + "&id_table=" + data.param2 + "&table=" + data.param3 + "&paginanaam=" + data.param4 + "&template=" + data.param5 + "&lang=" + data.param6;
},
Cancel: function () {
$(this).dialog("close");
}
}
});
});
I have created a grid and customized a column to contain a jquery UI menu like in the Split Button example
Everything works fine except for the fact that the menu window appear inside the cell causing a bad visual effect, that is, the cell height increase to make room for the menu window.
Have a look at the following screenshot for a visual explanation (nevermind about the menu item in disabled state).
Is there any way way to make the menu window appear on top of the table element in term of z-index?
Thanks very much for your valuable help, community :)
EDIT as per comment request:
The code to create the splitbutton menu is the following. First the column model markup
{ name: 'act', index: 'act', width: 80, sortable: false, search: false, align: 'center',
formatter: function (cellvalue, options, rowObject) {
var markup = "<div>" +
"<div class='actionsButtonset'>" +
"<button class='dshbd_ConfirmMonth' rel='" + rowObject.UmltID + "' rev='" + rowObject.IsConfirmAvailable + "' plock='" + rowObject.IsPeriodLocked + "' alt='Confirm'>Confirm</button>" +
"<button class='btnSelectMenu' rev='" + rowObject.IsUmltLocked + "' " + ">Select</button>" +
"</div>" +
"<ul class='actionMenu'>" +
"<li><a class='dshbd_UnlockMonth' href='#' rel='" + rowObject.UmltID + "' alt='Unlock'>Unlock</a></li>" +
"</ul>" +
"</div>";
return markup;
}
}
Then, inside the gridComplete event I have the following code (please note that some code is needed to enable/disable menu items
var confirmMonthBtn = $('.dshbd_ConfirmMonth');
$.each(confirmMonthBtn, function (key, value) {
var button = $(this);
var umltID = button.attr('rel');
button.button().click(function (event) {
event.preventDefault();
});
var isPeriodLocked = (button.attr('plock') === 'true');
if (!isPeriodLocked) {
var isConfirmAvailable = ($(this).attr('rev') === 'true');
if (!isConfirmAvailable) {
button.button({ disabled: true });
}
} else {
button.button({ disabled: true });
}
});
var currentPeriod = GetCurrentPeriod();
var period = GetCurrentViewPeriod();
var isCurrent = false;
if (currentPeriod != null && period != null) {
isCurrent = period.PeriodID == currentPeriod.PeriodID;
}
var selectBtns = $('.btnSelectMenu');
$.each(selectBtns, function (key, value) {
var button = $(this);
button.button({ text: false, icons: { primary: 'ui-icon-triangle-1-s'} });
button.click(function (event) {
var menu = $(this).parent().next().show();
menu.position({
my: 'left top',
at: 'left bottom',
of: this
});
$(document).on('click', function () {
menu.hide();
});
return false;
});
$('div.actionsButtonset').buttonset();
var menuElement = button.parent().next();
menuElement.hide();
menuElement.menu({
select: function (event, ui) {
var umltID = ui.item.children().attr('rel');
event.preventDefault();
}
});
if (!isCurrent) {
var isPeriodLocked = ($(this).attr('plock') === 'true');
if (isPeriodLocked) {
menuElement.menu({ disabled: false });
} else {
var isUmltLocked = ($(this).attr('rev') === 'true');
menuElement.menu({ disabled: !isUmltLocked });
}
} else {
//The current period is always unlocked
menuElement.menu({ disabled: true });
}
});
I prepared the demo for you which demonstrates how Split Button can be used inside of jqGrid. It displays
More detailed explanation of the demo I'll post later. Probably you will understand all yourself after examining of the code.
I am using the jQuery-UI inside of a plugin and am trying to set a callback function for the close: event of the dialog. I figure I am doing this wrong since it fires immediately (2x) when the page is loaded rather than when the dialog is closed.
Plugin Code
(function($) {
//dynamically add UI CSS
var link = $('<link>');
link.attr({
type: 'text/css',
rel: 'stylesheet',
href: 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/themes/black-tie/jquery-ui.css'
}).appendTo('head');
//dynamically add UI JS
var script = $('<script'>);
script.attr({
type: 'text/javascript',
src: 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js'
}).appendTo('head');
$.fn.photoDialog = function(options) {
//set default settings
var defaults = {
autoOpen: false,
title: 'Photo Tool',
minHeight: 560,
minWidth: 540,
url: 'http://www.goffinmoleculartechnologies.com/images/no-image-large.png',
onClose: function(){}
};
//extend options to defaults
var opts = $.extend(defaults, options);
return this.each(function() {
$this = $(this);
//create UI dialog
var $dialog = $('<div>')
.html('<img src="' + opts.url + '" width="' + opts.minWidth + '" height="' + minHeight + '" alt="" />')
.dialog({
autoOpen: opts.autoOpen,
title: opts.title,
minHeight: opts.minHeight,
minWidth: opts.minWidth,
modal: true,
close: opts.onClose.call(this) //callback function
});
//add dialog open to click function of caller
$this.click(function() {
$dialog.dialog('open');
return false;
});
});
};
})(jQuery);
Calling Page Code
$(document).ready(function() {
$('.photoLink').photoDialog({
url: 'http://tvrecappersanonymous.files.wordpress.com/2010/03/doozer2.jpg',
title: 'Doozer',
onClose: function() {
alert('Callback'); //fires 2x when page loads
}
});
});
Any suggestions on what I'm doing wrong are appreciated.
It because you are assigning the result of the opts.onClose callback function execution rather than function. Wrap it in an inline function instead.
Also use a variable to pass this variable to the callback.call.
Change your return statement to:
return this.each(function() {
var $this = $(this);
var that = $(this);
//create UI dialog
var $dialog = $('<div>')
.html('<img src="' + opts.url + '" width="' + opts.minWidth + '" height="' + minHeight + '" alt="" />')
.dialog({
autoOpen: opts.autoOpen,
title: opts.title,
minHeight: opts.minHeight,
minWidth: opts.minWidth,
modal: true,
close: function(){
opts.onClose.call(that) //callback function
}
});