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);
Related
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'm able to load and reopen jQueryUI Dialogs with a Datepicker as the first element in all browsers I've tried ... except IE 9.
If a Datepicker is the first element to receive focus when the Dialog opens, the Datepicker will auto launch. I'm able to suppress this behavior in FireFox and Chrome. IE 9 still launches the Datepicker on creation.
My open and close function for the Dialog are:
open: function (event, ui) {
$('#Date').blur(); // kill the focus
if ($('#Date').hasClass('hasDatepicker')) {
$("#Date").datepicker('enable');
}
else {
$("#Date").datepicker();
}
},
close: function (event, ui) {
$("#Date").datepicker('disable');
}
Here is the 'click' code
var dialogs = {};
$('#clicker').click(function (e) {
if (!dialogs['dlg']) {
loadAndShowDialog('dlg');
} else {
dialogs['dlg'].dialog('open');
}
});
var loadAndShowDialog = function (id) {
dialogs[id] = $('#dlg').clone().find('#ChangeMe').attr('id', 'Date').end()
.appendTo(document.body)
.dialog({ // Create the jQuery UI dialog
title: 'Testing',
modal: true,
resizable: true,
draggable: true,
width: 300,
open: see above
close: see above
};
jsfiddle showing this IE9 problem http://jsfiddle.net/stocksp/DdRLp/8/
What can I do to get IE to behave, short of not placing the Datepicker as the first element?
I don't have IE9 available at home so give this a try: http://jsfiddle.net/DdRLp/10/
I added a class to the datepicker input to make it easier to grab.
$(function() {
$(document).on("dialogcreate", "#dlg", function() {
$(".date_picker").datepicker();
$(".date_picker").datepicker("disable");
});
var dialogs = {};
$('#clicker').click(function(e) {
if (!dialogs['dlg']) {
loadAndShowDialog('dlg');
} else {
dialogs['dlg'].dialog('open');
}
});
var loadAndShowDialog = function(id) {
dialogs[id] = $('#dlg').clone().find('#ChangeMe').attr('id', 'Date').end().appendTo(document.body).dialog({ // Create the jQuery UI dialog
title: 'Testing',
modal: true,
resizable: true,
draggable: true,
width: 300,
open: function(event, ui) {
$("div#dlg form input").blur(); //takes focus off inputs
$(".date_picker").datepicker("enable");
},
close: function(event, ui) {
$(".date_picker").datepicker("disable");
}
});
};
});
I am playing with Jquery UI
I create a dialog on the fly from a DIV, i gave this DIV and ID and a button to call a closeDialog Function
It works fine as shown on this example
http://jsbin.com/ubovej
The problem I am having, is that if I d load a page THAT contains the BUTTON. The button will not work
as in:
$("<div id='mydialog1'>").dialog({
autoOpen: false,
modal: false,
width: 740,
height: 840,
title: 'Dialog1 = dynamic',
open: function(e, ui){
$(this).load(myUrl);
}
});
If this is the button Click Event code then
autoOpen: false,
should be
autoOpen: true,
EDIT: If you don't want it opened til you click the button then:
Do this when you want the dialog created.
var $dialog = $("<div id='mydialog1'>").dialog({
autoOpen: false,
modal: false,
width: 740,
height: 840,
title: 'Dialog1 = dynamic',
open: function(e, ui){
$(this).load(myUrl);
}
});
and do this after they click the button (only after the dialog is created)
$("button_selector").click(function () {
$dialog.dialog("open");
});
EDIT: Try changing
function closeDialog1(){
alert('closing Dialog1');
window.parent.$('#mydialog1').dialog('close');
return false;
}
to
function closeDialog1(){
alert('closing Dialog1');
$('#mydialog1').dialog('close');
return false;
}
Or a better way to do this might be
$("<div id='mydialog1'>").dialog({
autoOpen: false,
modal: false,
width: 740,
height: 840,
title: 'Dialog1 = dynamic',
open: function(e, ui){
$(this).load('dialogtest1a.html');
},
buttons: {
"Close" : function () {
$(this).dialog("close");
}
}
});
Does the button that closes the dialog HAVE TO be in the page you are loading?
I have the following JS:
$('#listeditdialog').dialog('open');
Which opens the following dialog:
$('#listeditdialog').dialog({
autoOpen: false,
resizable: false,
position: ['center',150],
width: 450,
open: function(event, ui) {
$("#listeditdialog").load("/projects/view/tasks/ajax/?listid=" + XXXX);
},
close: function(event, ui) {
$("#listeditdialog").html('<p id="loading"> </p>');
}
});
My Question is when I use the dialog open function in another JS function, how can I pass a listID variable which I would get fom the click even bind that fired the dialog open func.
Thanks!
If I understand you right, you want to have data that you have access to when you call $('#listeditdialog').dialog('open')
that's available when the open event fires?
Something like this could help:
// where dialog is opened
$('#listeditdialog').data('listID', listIDVarOrSimilar); //assign the ID for later use
$('#listeditdialog').dialog('open')
// dialog definition
$('#listeditdialog').dialog({
autoOpen: false,
resizable: false,
position: ['center',150],
width: 450,
open: function(event, ui) {
var $led = $("#listeditdialog");
$led.load("/projects/view/tasks/ajax/?listid=" + $led.data('listID'); //use the previously saved id
},
close: function(event, ui) {
$("#listeditdialog").html('<p id="loading"> </p>');
}
});`
http://api.jquery.com/data/