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')
}
});
});
});
Related
This is my calendar initially after the event creation:
and this is after page refresh:
Can anyone help me understand how to keep the same style even after page refresh, specifically the vertical line in the middle? Sometimes the line increases as well.
The fullCalendar JS is as follows:
$('#calendar').fullCalendar({
locale: 'nl',
weekends: true, // false will hide Saturdays and Sundays
defaultView: 'agendaWeek',
allDaySlot: false,
slotLabelFormat: "HH:mm",
axisFormat: 'HH:mm',
timeFormat: 'HH:mm',
aspectRatio: 1,
editable: true,
eventStartEditable: true,
selectable: true,
selectHelper: true,
unselectAuto: false,
eventLimit: true,
dragScroll: true,
eventOverlap: false,
slotEventOverlap: false,
header: {
left: 'title',
center: '',
right: 'prev,next,today,agendaWeek,agendaDay'
},
views: {},
eventDrop: function (event, dayDelta, minuteDelta, allDay, revertFunc) {
var title = "Available";
var eventInfo;
eventInfo = {
title: title,
start: event.start,
end: event.end,
id: event.id
};
updateEvent(eventInfo);
},
eventResize: function (event, dayDelta, minuteDelta, revertFunc) {
var title = "Available";
var eventInfo;
eventInfo = {
title: title,
start: event.start,
end: event.end,
id: event.id
};
updateEvent(eventInfo);
},
select: function (start, end) {
var title = "Available";
var eventData;
if (title) {
eventData = {
title: title,
start: start,
end: end
};
$('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
createEvent(eventData);
}
$('#calendar').fullCalendar('unselect');
},
eventSources: [{
events: function (start, end, timezone, callback) {
var employeeId = $("#employee-Id").val();
$.ajax({
url: '../' + employeeId + '/events',
dataType: 'json',
success: function (response) {
var events = $.parseJSON(response.data);
$('#calendar').fullCalendar('addEventSource', events);
callback(events);
}
});
}
}],
eventRender: function (event, element) {
//delete event on double click..Tanvir
element.one().bind('dblclick', function (e) {
/* e.preventDefault();
$(this).prop('disabled', true);
setTimeout(function () { $(this).prop('disabled', false); }, 500);*/
$("#startTime").html(moment(event.start).format('MMM Do YYYY, h:mm A'));
$("#endTime").html(moment(event.end).format('MMM Do YYYY,h:mm A'));
$("#eventContent").dialog({modal: true, title: event.title, width: 100});
$('.delete-event').bind('click', function (e) {
$('#calendar').fullCalendar('removeEvents', event._id);
deleteEvent(event.id);
$("#eventContent").hide();
});
$('.discard-delete').bind('click', function () {
$("#eventContent").hide();
});
});
},
});
});
No duplicate event is created in the database. What is happening a the event HTML is rendering twice after refresh. Specifically fc-time-grid-event under the event container class is rendering twice after refresh.
The cause of the duplication is here, in your events function:
$('#calendar').fullCalendar('addEventSource', events);
callback(events);
You are adding the event objects as an event source, AND sending them back to the calendar as a list of events, in the documented way. So while the events may not be duplicated in your database, your code is sending two sets of identical event data to the calendar, and consequently they are displayed twice.
You can simply remove this line:
$('#calendar').fullCalendar('addEventSource', events);
as it is totally unnecessary in this context.
How can I show a description of Events in fullcalendar?
I have events that have a title and a description.
So how can I show the description?
When you add the title and description it will concatenate.
Using the below code, you can concatenate with the title:
eventRender: function (event, element, view) {
element.find('.fc-title').append('<div class="hr-line-solid-no-margin"></div><span style="font-size: 10px">' + event.description + '</span></div>');
},
Here is the working jQuery or JavaScript code.
I love Bootbox.js for showing message so I implemented that also here:
$(document).ready(function() {
var today_date = moment().format('YYYY-MM-DD');
console.log(today_date);
// $('#calendar').fullCalendar('gotoDate', today_date);
$('#calendar').fullCalendar({
theme: false,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek'
// right: 'month,basicWeek,basicDay'
},
// header: { center: 'month,agendaWeek' }, // Buttons for switching between views
defaultDate: today_date,
businessHours:
{
rendering: 'inverse-background',
dow: [0,1]
},
editable: false,
eventLimit: true, // Allow "more" link when too many events
events: myevents,
eventRender: function (event, element) {
element.attr('href', 'javascript:void(0);');
element.click(function() {
bootbox.alert({
message: 'Description : '+event.description,
title: event.title,
});
});
}
});
});
I currently am using Adam Shaw's jQuery Calendar 'FullCalendar' and am experiencing significant delays in the calendar rendering. In short, the page appears, 1 second passes, the Calendar pops in, another second passes, and then the events populate the page, here. Is there a way to only fetch a certain number of events behind and before today's date? Or even loading the calendar immediately would be an improvement. I am also using Craig Thompson's qTip2.
Javascript
<script type=text/javascript>
// Setup FullCalendar
jQuery(document).ready
(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var tooltip = $('<div/>').qtip({
id: 'fullcalendar',
prerender: true,
content: {
text: ' ',
title: {
},
},
events: {
render: function(event, api) {
var elem = api.elements.bgiframe;
}
},
position: {
my: 'bottom center',
at: 'top center',
target: 'event',
viewport: $(window),
adjust: {
mouse: false,
scroll: true,
method: 'shift',
resize: true
}
},
show: {
modal: {
on: false,
blur: true,
stealfocus: false
}
},
hide: false,
style: 'qtip-bootstrap'
}).qtip('api');
$('#fullcalendar').fullCalendar({
eventSources: ["https://www.google.com/calendar/feeds/emailaddresshere/public/basic",
"http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic"],
header: {
left: 'title',
center: '',
right: 'today prev,next'
},
selectable: true,
eventClick: function(data, event, view) {
var content = '<h3>'+data.title+'</h3>' +
'<p><b>Start:</b> '+data.start+'<br />' +
(data.end && '<p><b>End:</b> '+data.end+'</p>' || '');
tooltip.set({
'content.text': content
})
.reposition(event).show(event);
},
dayClick: function() { tooltip.hide() },
eventResizeStart: true,
eventDragStart: false,
viewDisplay: function() { tooltip.hide() }
});
}());
</script>
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.
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'));
}
});