I have a question, I am having a hard time to figure out a way to use bootstrap modal in fullcalendar. What I am trying to do is when you click on the event on the calendar, the modal will pop-up and provide the full name of the event and summary of the event.
The following is the code I am using to generate the calendar:
<cffunction name="FullCalendar">
<cfscript>
var calendarid = $.getbean('content').loadby(title='Regal Events').getcontentid();
</cfscript>
<cfsavecontent variable="local.str">
<cfoutput>
<div id="UpcomingCal" class="calendarResize">
</div>
<div id="fullCalModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span> <span class="sr-only">close</span></button>
<h4 id="modalTitle" class="modal-title"></h4>
</div>
<div id="modalBody" class="modal-body"></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button class="btn btn-primary"><a id="eventUrl" target="_blank">Event Page</a></button>
</div>
</div>
</div>
</div>
<script>
mura.loader()
.loadcss("#$.siteConfig('requirementspath')#/fullcalendar/fullcalendar.css",{media:'all'})
.loadcss("#$.siteConfig('requirementspath')#/fullcalendar/fullcalendar-custom.css",{media:'all'})
.loadcss("#$.siteConfig('requirementspath')#/fullcalendar/fullcalendar.print.css",{media:'print'})
.loadjs(
"#$.siteConfig('requirementspath')#/fullcalendar/lib/moment.min.js",
"#$.siteConfig('requirementspath')#/fullcalendar/fullcalendar.min.js",
"#$.siteConfig('requirementspath')#/fullcalendar/gcal.js",
function(){
$('##UpcomingCal').fullCalendar({
weekMode: 'variable',
eventSources: [
{
$('#eventUrl'): '#variables.$.siteConfig('requirementspath')#/fullcalendar/proxy.cfc?calendarid=#esapiEncode("javascript",CalendarID)#'
, type: 'POST'
, data: {
method: 'getFullCalendarItems'
, calendarid: '#esapiEncode("javascript",CalendarID)#'
, siteid: '#variables.$.content('siteid')#'
, categoryid: '#esapiEncode('javascript',variables.$.event('categoryid'))#'
, tag: '#esapiEncode('javascript',variables.$.event('tag'))#'
}
<!---, color: '#this.calendarcolors[colorIndex].background#'
, textColor: '#this.calendarcolors[colorIndex].text#'--->
, error: function() {
$('##mura-calendar-error').show();
}
},
]
});
}
)
</script>
</cfoutput>
</cfsavecontent>
<cfreturn local.str />
</cffunction>
As you can see above, I have included the bootstrap modal. However, I am not sure how to add the following code so that when you click on the event, the modal appears:
$(document).ready(function() {
$('#bootstrapModalFullCalendar').fullCalendar({
events: '/hackyjson/cal/',
header: {
left: '',
center: 'prev title next',
right: ''
},
eventClick: function(event, jsEvent, view) {
$('#modalTitle').html(event.title);
$('#modalBody').html(event.description);
$('#eventUrl').attr('href',event.url);
$('#fullCalModal').modal();
}
});
});
Any help would be appreciated
Thanks
Your problem is not is not related to javascript, bootstrap or fullcalendar.
I created a minimal test case to help you out and it works.
You should check coldfusion and mura.loader code.
Related
I have a list of items, every row has it's own "action" buttons. One of the actions is editing the record, the other one shows a list of related records (loaded dynamically via an Ajax call), and so on. When the modal opens, the respective ID for the record will be passed to the modal as well.
For each row, when user clicks on the button, a Bootstrap modal will appear, with respective content (as I mentioned, dynamically from the server). The issue is, I cannot validate the forms for edit nor related records. Here is the code snippet I used for building the recordset:
<span class="openRecordsModalBtn" id="7">Records</span>
<span class="openEditModalBtn" id="7">Edit</span>
Modal:
<div class="modal fade" id="editModal" role="dialog" tabindex="-1">
<div class="modal-dialog modal-lg modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Edit record</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal"> Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade bd-example-modal-lg" id="recordModal" role="dialog" tabindex="-1">
<div class="modal-dialog modal-lg modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Releted records</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal"> Close</button>
</div>
</div>
</div>
</div>
The content of the modal generates by ajax (it is a simple HTML form). Here is the Javascript I used for calling the Ajax script and pass record ID to the modal:
$(document).ready(function() {
$('.openRecordsModalBtn').on('click',function(){
var id = $(this).attr('id');
$('.modal-body').load('/ajax/record.php?id=' + id, function(){
$('#recordModal').modal({show:true});
})
})
});
$(document).ready(function() {
$('.openEditModalBtn').on('click',function(){
var id = $(this).attr('id');
$('.modal-body').load('/ajax/edit.php?id=' + id, function(){
$('#editModal').modal({show:true});
})
})
});
My guess is, by the time page loads, the form has not been generated yet. Therefore, validation cannot be done. How can I validate the form created by the Ajax call?
This is the validation function:
document.addEventListener('DOMContentLoaded', function(e) {
FormValidation.formValidation(
document.getElementById('edit-form'),
{
fields: {
name: {
validators: {
notEmpty: {
message: 'Please provide a name.'
}
}
}
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
bootstrap: new FormValidation.plugins.Bootstrap(),
submitButton: new FormValidation.plugins.SubmitButton(),
defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
icon: new FormValidation.plugins.Icon({
valid: 'fa fa-check',
invalid: 'fa fa-times',
validating: 'fa fa-refresh'
}),
},
});
});
Why are you mixing JQuery and javascript? You should only be using one $(document).ready(function(). I believe to make this work, you need to use event delegation. Haven't tested this but hopefully something like this will work for you. Substitute document with the closest static parent element of the modals.
$(document).on('shown.bs.modal', '#recordModal', '#editModal', function(e) {
FormValidation.formValidation(
document.getElementById('edit-form'), {
fields: {
name: {
validators: {
notEmpty: {
message: 'Please provide a name.'
}
}
}
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
bootstrap: new FormValidation.plugins.Bootstrap(),
submitButton: new FormValidation.plugins.SubmitButton(),
defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
icon: new FormValidation.plugins.Icon({
valid: 'fa fa-check',
invalid: 'fa fa-times',
validating: 'fa fa-refresh'
}),
},
});
});
This explains about the modal events.
I have a JSP page,say xyz.jsp. I have a button called "send Mail" that has it's onclick() property set to a script function called sendMail(). Sending mail includes sending html data to the controller for generating PDF for which I am using Ajax. Now after the mail is sent successfully ,i want to show a pop-up indicating success. So on Ajax success i want to trigger the popup.
I am using bootstrap modal for popup.
This is my code for button and modal:
<div id="reportbuttons">
<button type="button" class="btn bg-red waves-effect" onclick="convertToPdf()" style="margin-right: 5px;float: right; margin-top: -8px">Download</button>
<button type="button" class="btn bg-red waves-effect" onclick="sendMail()" style="margin-right: 5px;float: right; margin-top: -8px">Send Mail</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-
dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data
dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
And, this is my script:
<script>
function sendMail() {
let doc = new jsPDF('p','pt','a4');
doc.setProperties({
title: 'PDF Document',
subject: 'subject',
author: 'ABC',
keywords: 'generated, javascript, web 2.0, ajax',
creator: 'XYZ'
});
//document.getElementById('reportbuttons').remove();
document.getElementById('reportbuttons').style.display ="none";
doc.addHTML(document.body, function() {
var data = doc.output('datauristring');
var reqJson = {};
reqJson.machineId = "<%=machineId%>";
reqJson.monthYear = "<%=monthYear%>";
reqJson.data = data;
$.ajax(
{
url : "sendMail/",
type: "POST",
dataType: 'json',
data : JSON.stringify(reqJson),
contentType: "application/json",
success:function(data)
{
$("#myModal").modal();
alert('mail sent successfully');
document.getElementById('reportbuttons').style.display ="block";
},
error: function(data)
{
document.getElementById('reportbuttons').style.display ="block";
}
});
});
}
</script>
I want to show the bootstrap modal popup after the mail is succesfully sent or in other words on Ajax success.
I know this question is asked several times I have searched all the questions and following the answers but i don't understand why my code is not working or where am going wrong.
Calendar is displaying with events but when i clicked on an event am not getting a modal popup. Any help will be appreciated
css && js
bootstrap.min.css
jquery-3.3.1.min.js
bootstrap.min.js
fullcalendar-3.10.0/fullcalendar.css
fullcalendar-3.10.0/lib/jquery-ui.min.js
fullcalendar-3.10.0/lib/jquery.min.js
fullcalendar-3.10.0/lib/moment.min.js
fullcalendar-3.10.0/fullcalendar.js
fullcalendar-3.10.0/gcal.js
Javascript
$(document).ready(function(){
$('#id_btn_showEvents').click(function(){
$('#mcoCalendarForm').submit();
pleaseWait();
});
$('#calendar').fullCalendar({
header: {
left: 'prevYear,prev,next,nextYear today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listWeek'
},
defaultDate: new Date(),
navLinks: true,
editable:false,
eventLimit: true,
eventColor: '#1D5C90',
events: ${eventJson},
dayRender: function(date, cell) {
var today = $.fullCalendar.moment();
var end = $.fullCalendar.moment().add(7, 'days');
$("th.fc-"+date.format('ddd').toLowerCase()).css("background", "#1E5D91");
$("th.fc-"+date.format('ddd').toLowerCase()).css("color", "#f8f9fa");
},
eventClick: function(event, jsEvent, view) {
alert("in event click");
$('#modalTitle').html(calEvent.title);
$('#modalBody').html(calEvent.title);
$('#calendarModal').modal();
}
});
});
<div class='col-md-11'>
<div id='calendar' class='mcoCal' style="padding: 15px;"></div>
</div>
<div id="calendarModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span> <span>close</span></button>
<h4 id="modalTitle" class="modal-title"></h4>
</div>
<div id="modalBody" class="modal-body"> </div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
After a lot of research I have found that jquery.min.js is referred to twice in my page.
Modal window is displaying now after removing fullcalendar-3.10.0/lib/jquery.min.js
I want to show ckEditor on bootstrap modal but the ckEditor is not opening as shown below. After searching through the internet I have got some solution in a different way like this link but I will perform an ajax request hence I have to open the modal using $('.cia_modal').modal('toggle'). The above-mentioned solution link does not work for me
Modal Button:
<button class="btn btn-info btn-xs cia_modal_btn" data-id="<?php echo $post->post_id; ?>" data-table="post" data-attr="post_id">
Create New Post
</button>
Modal:
<!--Modal-->
<div class="modal fade cia_modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header bg-primary">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title">Create New Post</h4>
</div>
<div class="modal-body">
<form action="/action_page.php">
<div class="form-group">
<textarea class="ck_editor" name="post" id="" cols="30" rows="10"></textarea>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!--End Modal-->
Javascript:
<script type="text/javascript">
$(document).on("click", ".modal_btn", function (e) {
e.preventDefault();
e.stopPropagation();
let cia_modal = $('.cia_modal');
//Set modal show/hide
cia_modal.modal('toggle');
let id = $(this).attr('data-id');
let table = $(this).attr('data-table');
let attr = $(this).attr('data-attr');
//Set Form Data
let formData = new FormData();
formData.append('id',id);
formData.append('table',table);
formData.append('attr',attr);
$.ajax({
type: 'post',
url: '<?php echo base_url()?>post/create_post',
data: formData,
contentType: false,
processData: false,
success: function (data) {
//
}
});
});
</script>
Please help me. Thanks
I assume, you are using CKEditor 4.x.
You need to create editor using CKEDITOR.replace( 'ck_editor' ), you can do it only on element that is existing inside document. It doesn't matter if it's hidden or not. If your modal is inside DOM, but hidden, then just initialize editor. Otherwise you need to wait until element is appended then call CKEDITOR.replace.
Depending on how bootstraps implements modal.show. If it's just changes CSS to make it visible, then most likely you can initialize editor at the start of your script, if it adds elements to document, then you need to use some of bootstrap events to create editor in right time. See shown.bs.modal: https://getbootstrap.com/docs/4.0/components/modal/#events
Just initialize the editor:
<script type="text/javascript">
ClassicEditor.create($('.ck_editor')[0])
.then( editor => {
console.log( editor );
})
.catch( error => {
console.log( error );
});
$(document).on("click", ".modal_btn", function (e) {
//....
I'm using full calendar with a asp.net MVC 5 application.
When I click a on a empty space I get a modal view for creating a event. This works perfect.
When I click on a event I want to get the event data but also some other data then just the start date end date and description.
I have the following:
eventRender: function (event, element) {
var id = event.id;
element.popover({
placement: 'top',
html: true,
content: '<button id="customers" class="btn btn-default" onclick="KlantenModal(' + id + ')">Klant overzicht</button>',
animation: true
});
}
The function that calls the modal.
function KlantenModal(event) {
$('#klanten #eventId').val(event);
$('#klanten').modal('show');
}
and the bootstrap modal:
<div class="modal fade" id="klanten" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Klanten</h4>
</div>
<div class="modal-body">
/* here I want some Data eg. names of customers */
<input type="hidden" id="eventId" name="eventId" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary"></button>
</div>
</div>
</div>
If i understood you well the only thing you have to do is to add fields to the event like this:
Somewhere in your code populate an array with diferent customers and add that array to the event properties
var customers = [];
customers.push("im customer x");
customers.push("im customer y");
...
events:[
{
'start': 2013-12-30,
'end': 2013-12-30,
'allDay': true,
'customers': customers
}
and when you click on the event and access the event fields you will get the customers field wich contains your customers for that day.