$("#termSheetPrinted").dialog({
autoOpen: false,
resizable: true,
height: 800,
width: 950,
position: 'center',
title: 'Term Sheet',
close: function(event, ui) {
$(this).dialog("close");
},
modal: true,
buttons: {
"Print": function () {
$("#termSheetPrinted").jqprint();
},
"Cancel": function () {
$("#termSheetPrinted").html('');
$(this).dialog("close");
}
}
});
When I click the 'x' in the upper right hand corner, firefox freezes, crashes, and nothing happens.
Do I define the close function correctly?
you have infinite recursion on close.
try this code to see it.
close: function(event, ui) { alert("close is called");
$(this).dialog("close");
},
You should have only this
close: function(event, ui) {
},
To add to Vivek's answer (which resolved an issue I was having) I noticed that this only happens when the FireBug console is active. I hope that helps someone else who comes upon this problem. Prior versions of Firefox didn't seem to crash with this code.
Related
I am using FullCalendar version 3.9.0. We had previously been using a much older version.
For the events in the calendar, when you click them, it opens a pop-up window. This window is drawing behind the grid lines and numbers and it gets cut off if it goes beyond the bounds of the grid (for example opening an even right near the left edge would cause any of the popup that extends further left than the calendar to be cut off).
My calendar is defined like so:
$('#calendar').fullCalendar({
locale: initialLocaleCode,
height: "auto",
contentHeight: "auto",
header: {
left: 'title',
center: '',
right: 'today prev,next'
},
loading: function(isLoading) {
if (isLoading) {
isCalClick = true;
} else {
isCalClick = false;
}
},
events: function (start, end, timezone, callback) {
$.ajax({
url: homeUrl + 'Run',
type: "GET",
dataType: "JSON",
success: function (result) {
var events = [];
$.each(result.Events, function (i, data) {
events.push(
{
moduleId: data.moduleId,
title: data.title,
id: data.id,
timeStamp: data.timeStamp,
state: data.state,
user: data.user,
result: data.result,
start: moment(data.start).format('YYYY-MM-DD'),
end: moment(data.timeStamp).format('YYYY-MM-DD')
});
});
callback(events);
},
error: function () {
alert('there was an error while fetching events!');
}
});
},
eventRender: function (event, element) {
createEvent(event, $(element));
}
});
Then there is a create popover event that creates popups (popovers) for each event...
function createPopover(event, el) {
var title = event.title;
var html = SomeMethodToGetHtmlContentsOfPopup();
el.popover({
'placement': "left",
'html': true,
'title': title,
'content': html,
});
}
The popup (popover) window itself can be styled with the .popover CSS...
#calendar .popover,
.large-chart .popover {
color: #333;
width: 340px;
z-index: 999 !important;
position: relative !important;
}
I've tried all sorts of combinations of styling this .popover control. The styles do apply as I see them when debugging it. I would expect putting z-index higher than any other items and using position:relative should bring this to the front but it does not.
Any ideas? The examples I've seen running online don't seem to have this issue, just what I'm doing.
All,
I am trying to set a timeout on my JQuery UI Dialog but have not been able to get it to work. I read several SO posts and the docs on setTimeout() but apparently I am not implementing it correctly.
Below, is the syntax that I am using to set up my timeout, along with the dialog HTML.
Thanks
$.ajax({
type: "POST",
url: '/Dashboard/BackgroundCheck',
data: queryStr,
datatype: 'json',
success: function (data) {
if (data == true) {
$("#dialog-message").attr('title', 'Success!');
$(".js-dialog-content").html('Background Check status saved.');
$("#dialog-message").fadeIn('slow');
$("#dialog-message").dialog({
modal: true,
buttons: {
Ok: function () {
setTimeout(function() {
$(this).dialog("close");
},5000);
}
}
});
}
}
});
}
});
Dialog Box
<div id="dialog-message" title="" style="display:none">
<p>
<span class="ui-icon ui-icon-circle-check" style="float: left; margin: 0 7px 50px 0;"></span>
<span class="js-dialog-content"></span>
</p>
</div>
You should define your dialog parameters and you can use autoOpen or open it manually. please attention to this sample:
$('#dialog-message').dialog({
autoOpen: false,
resizable: false,
show: 'fade',
hide: 'fade',
height: 240,
modal: true,
dialogClass: "alert",
close: function (event, ui) { /*do somthing you want*/ },
open: function (event, ui) { setTimeout(function () { $('#dialog-message').dialog("close"); }, 2000) }
}).dialog("open");
As you can see i set the timeout in function related to open parameter.
Good Luck.
Hello this is the first time I'm using dialog. Here is my code:
$("#dialog").dialog({
autoOpen: false,
closeOnWscape: true,
show: "blind",
width: 800,
buttons: {
close: function () {
alert("close");
$(this).dialog("close");
}
}
});
$('p#pp').click(function () {
//jQuery('#fpoint').dialog();
//$("#dialog").load("Agrandir.aspx").dialog("open");
//var tid = $("#Label1").text.toString();
alert("open");
//$("#fpoint").dialog("open");
$("#dialog").load("Agrandir.aspx).dialog("open");
// window.open("Agrandir.aspx");
})
In the dialog will show a new page, in the page will show an execl. In the parent page there is an dropdownlist, when the button click this.session["id"] will get the value of the selected value, the Agrandir.aspx will use the session. Then click to open a dialog. But the dialog alway shows the same dialog which is created at the first time.
Place this script on your pages to prevent jQuery ajax calls from caching their responses.
$(function() {
$.ajaxSetup({ cache: false });
});
jquery.load() will cache responses without it.
See this for more information.
Not sure why but you are putting the close event in the buttons option list and you misspelled closeOnEscape. Try:
$("#dialog").dialog({
autoOpen: false,
closeOnEscape: true,
show: "blind",
width: 800,
buttons: {
"Close": function () {
alert("close");
$(this).dialog("close");
}
}
});
I'm having trouble in validating a jQuery UI dialog using Jquery Validate upon clicking Save.
Here's my code to create Jquery dialog. It loads the dialog from a target a href URL:
$(document).ready(dialogForms);
function dialogForms() {
$('a.dialog-form').click(function() {
var a = $(this);
$.get(a.attr('href'),function(resp){
var dialog = $('<div>').attr('id','formDialog').html($(resp).find('form:first').parent('div').html());
$('body').append(dialog);
dialog.find(':submit').hide();
dialog.find('#return').hide();
dialog.dialog({
title: a.attr('title') ? a.attr('title') : '',
modal: true,
buttons: {
'Save': function() {submitFormWithAjax($(this).find('form'));},
'Cancel': function() {$(this).dialog('close');}
},
close: function() {$(this).remove();},
width: 'auto'
});
}, 'html');
return false;
});
}
function submitFormWithAjax(form) {
form = $(form);
$.ajax({
beforeSend: function(data) {
//alert("beforesend");
form.validate();
},
url: form.attr('action'),
data: form.serialize(),
type: (form.attr('method')),
dataType: 'text',
error: function(data) {
alert(data);
$('#result').html(data);
},
success: function(data) {
//alert("success");
$('#result').html(data);
setTimeout("reloadPage()", 500);
}
});
return false;
}
The beforeSend is called, but it doesn't seem to call the validate method, which is located on the parent page from which Dialog is called.
$(document).ready(function() {
$("#event_form").validate({
rules: {
Name: {
required: true
},
Category: {
required: true
}
},
messages: {
Name: "Please enter an event name",
Category: "Please choose a category"
},
submitHandler: function(form) {
alert("validated");
// $('#loading_1').show();
// $('#proceed_c').hide();
// $(form).ajaxSubmit();
// //form.submit();
},
errorPlacement: function(error, element) {
error.appendTo(element.next(".status"));
}
});
}
Is the problem with the beforeSend within submitFormWithAjax function, the location of $("#event_form").validate or the submitHandler: function(form) within it? Any help will be greatly appreciated.
When you initialize the jQueryUI dialog, it modifies the DOM, the whole dialog is taken out of it's location in the page and inserted right before the </body> tag. You can see this with Firebug. This causes a problem for Validate, because now the form is empty. To solve this, on the dialog's open event, append it to the form. It sounds really wacky, but trust me, it works :)
dialog.dialog({
title: a.attr('title') ? a.attr('title') : '',
modal: true,
buttons: {
'Save': function() {submitFormWithAjax($(this).find('form'));},
'Cancel': function() {$(this).dialog('close');}
},
close: function() {$(this).remove();},
open: function(){
$(this).parent().appendTo($('#event_form'));
},
width: 'auto'
});
Edit:
<form id='event_form'>
<div id="dialog" title="DialogTitle">
</div>
</form>
Took a slightly different approach to this. I needed to reuse my modal form so I append it once jquery "creates" the modal:
$("#mdl_Subject").dialog({
autoOpen: false,
show: "drop",
hide: "drop",
modal: true,
create: function () {
$(this).parent().appendTo($('#aspnetForm'));
}
});
I have defined my dialog on the page load. I can see the dialog and everything seems to be fine so far:
dlg1 = $("#modalHolder");
dlg1 = dlg1.dialog({
width: 300,
height: 150,
modal: true,
autoOpen: false,
resizable: false,
closeOnEscape: false,
draggable: false,
overlay: {
backgroundColor: 'red',
opacity: 0.65
},
open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); }
});
Now I would like to set the close event dynamically, so I tried this:
function setCloseFunction(fun)
{
dlg1.dialog({
close: function(event, ui)
{
alert("2");
fun();
}
});
}
And I call it as:
setCloseFunction(new Function("alert('1')"));
However when closing the dialog, the alert never appears. Any ideas?
You should write the following:
dlg1.bind('dialogclose', function(event, ui) {
alert("2");
fun();
});
setCloseFunction(function() { alert('1'); });
EDIT: To remove the function, you can call unbind('dialogclose').
The syntax used in setCloseFunction is only correct when you're initializing a dialog. If the dialog already exists, as in your case, you normally change options like this:
dlg1.dialog('option', optionName, value);
For events, such as close, you bind a listener to it:
dlg1.bind('dialogclose', function(event, ui) {
...
});