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.
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.
When I open my modal and it has great content, and its height is large, is opening on top of my footer, how do you not open up in the footer but make my content (body of the page) to automatically increase?
see below:
$('#lnkAdicionar').live("click", function () {
$('#dialogClienteFornecedor').dialog({
width: 608,
resizable: false,
title: 'Novo Cliente e Fornecedor',
modal: true,
draggable: false,
open: function (event, ui) {
$.ajax({
url: '#Url.Action("CadastroClienteFornecedor")',
type: 'GET',
cache: false,
context: this,
success: function (result) {
$(this).html(result);
},
});
},
close: function (event, ui) {
$('#dialogClienteFornecedor').empty();
},
position: {
my: 'top',
at: 'top',
of: $('#divMenu')
}
});
});
});
I am working on an asp.net page where I have used JQuery UI dialogue. This dialogue has a submit button. When I click the submit button dialogue closes. I want to call a Webmethod on it. If method returns ture, then I want to close it otherwise I want to keep it open with error message shown.
[Edited]
<script>
jQuery(function () {
var dlg = jQuery("#dialog").dialog({
draggable: true,
resizable: true,
show: 'Transfer',
hide: 'Transfer',
width: 320,
autoOpen: false,
minHeight: 10,
minwidth: 10,
beforeClose: function () {
$.ajax({
url: "Default.aspx/GetResult",
success: function (response) {
if (response == true) {
("#dialog").close()
}
else {
alert('asdasdds');
}
}
});
return false; //this will stop dialog box to close
}
});
dlg.parent().appendTo(jQuery("form:first"));
});
</script>
<div id="Result">
Click here for the time.</div>
<div id="dialog" style="text-align: left; display: none;">
<asp:Button ID="btnButton" runat="server" Text="Button" OnClick="btnButton_Click" />
</div>
how to do it. Please suggest.
Regards,
Asif Hameed
You can call webmethod using ajax and then act on it conditionally based on the response. Let your webmethod just return true/false and then you can check this value on the client side.
Execute this code on submit button click and do not close the dialog. Let the success handler decide whether to close it or no.
$.ajax({
url: "urlOfTheService.asmx/methodName",
success: function(response){
if(response == true){
//Code to close the dialog
}
else{
//Show the error message
}
}
});
ajax() reference: http://api.jquery.com/jQuery.ajax/
Update:
Use open event of dialog box to attach the submit handler to form and execute the above code.
jQuery(function () {
var dlg = jQuery("#dialog").dialog({
draggable: true,
resizable: true,
show: 'Transfer',
hide: 'Transfer',
width: 320,
autoOpen: false,
minHeight: 10,
minwidth: 10,
open: function(){
$(this).find('form')
.unbind('submit')
.submit(function(){
var $form = $(this);
$.ajax({
url: "urlOfTheService.asmx/methodName",
success: function(response){
if(response == true){
//Submit the form
$form.unbind('submit')[0].submit();
}
else{
//Show the error message
}
}
});
return false;
});
}
});
dlg.parent().appendTo(jQuery("form:first"));
});
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) {
...
});