I am using WP Fullcalendar Plugin (https://wordpress.org/plugins/wp-fullcalendar/) on my website. It works fine as a shortcode placed on a normal page template. However I want it to work in a Bootstrap Modal Dialog box which is opened on clicking a link.
Here is my code of modal Dialog with Fullcalendar shortcode in it.
<!-- Modal -->
<div class="modal fade" id="myCalendarModal" tabindex="-1" role="dialog" aria-labelledby="myCalendarModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myCalendarModalLabel">Modal title</h4>
</div>
<div class="modal-body"><?php echo do_shortcode( ' [fullcalendar] ' ); ?></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
And here is the link to open this dialog box
<a class="open-cal" href="#" data-toggle="modal" data-target="#myCalendarModal">Open Calendar</a>
Now when I open the modal dialog box it does not load the calendar and only shows the loader spinning and spinning.
As suggested in answers like this one, Full calendar not showing inside bootstrap modal, the solution like
$('#myCalendarModal').on('shown.bs.modal', function () {
$(".wpfc-calendar").fullCalendar('render');
});
is not feasible here because the fullCalendar function needs to be passed the "fullcalendar_args" which is set in a footer hook and the related javascript file is located within the plugin files.
Any suggestion to make it work without hacking core plugin files?
Yes I have had to hack the core plugin inline.js file, as there is no other option right now.
1.You have to declare the "fullcalendar_args" variable as global
In line 4 of /includes/js/inline.js, Change
var fullcalendar_args = {
to
fullcalendar_args = {
2.Comment out 90 and 91 lines in the same file
/*
$(document).trigger('wpfc_fullcalendar_args', [fullcalendar_args]);
$('.wpfc-calendar').first().fullCalendar(fullcalendar_args);
*/
And then
3.Call these two lines in the page template where you have modal to be called, such as:
$('#myCalendarModal').on('shown.bs.modal', function () {
$(document).trigger('wpfc_fullcalendar_args', [fullcalendar_args]);
jQuery(".wpfc-calendar").fullCalendar(fullcalendar_args);
});
After this has been done, if wanted to show normal calendar on any other page, you may have to call the following two lines where ever you want calendar to appear, such as in footer or something, based on a condition etc.
$(document).trigger('wpfc_fullcalendar_args', [fullcalendar_args]);
jQuery(".wpfc-calendar").fullCalendar(fullcalendar_args);
It would be good if further updates to WP Fullcalendar Plugin incorporate these changes based on a shortcode argument or something similar approach.
Related
I have multiple reveal modals on the page and I trying to display the dynamic custom post type content on each modal when clicked, but the modal keeps repeating the same content on all the modals.
I am trying to initiate new modal on every click so the content doesn't repeat but for some reason it's just not working. If I remove Reveal Modal, then can view the dynamic content. Am I initiating the reveal modal properly? I am not seeing any errors on the console.
Here's my code:
<a class="modal" data-open="exampleModal">Reveal Button</a>
<div class="reveal large" id="exampleModal" data-reveal>
<!-- content -->
<button class="close-button" data-close aria-label="Close reveal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
<script>
jQuery(function($) {
var modal = $('#exampleModal');
$('a.modal').click(function() {
var reveal = new Foundation.Reveal(modal);
});
});
</script>
Can someone help please. Thanks in advance.
The default value for ngbCollapse is false, as described at https://ng-bootstrap.github.io/#/components/collapse. The example given there uses the following code: https://ng-bootstrap.github.io/app/components/collapse/demos/basic/plnkr.html
<p>
<button type="button" class="btn btn-outline-primary" (click)="isCollapsed = !isCollapsed"
[attr.aria-expanded]="!isCollapsed" aria-controls="collapseExample">
Toggle
</button>
</p>
<div id="collapseExample" [ngbCollapse]="isCollapsed">
<div class="card">
<div class="card-block">
You can collapse this card by clicking Toggle
</div>
</div>
</div>
How does one over-ride the default so that the toolbar is collapsed by default?
Noticed the same thing. Initialize the variable in a constructor and it works fine.
export class AppComponent {
isCollapsed:boolean;
constructor() {
this.isCollapsed = true;
}
Modifying this within the Typescript seems to drive away from the intent of using the module's provided properties. Instead, by utilize [ngbCollapse] you do not need add to Typescript and have more control with the advantage of ngDirectives.
<div id="collapseExample" [ngbCollapse]="!isCollapsed">
Additionally, when used within dynamically generated content (*ngFor...[ngbCollapse]=) you can take advantage of ng-if-else conditional states
*ngIf="getIsEditing(buffer); then tableEdit; else tableView;"
I'm working with meteor#1.1.10 and twbs:bootstrap#3.3.5
I can get a modal window to spawn, close, and register a button has been clicked. I cannot get it to read any information from a form though. It just closes. I included a console message and it never shows up to either the browser or the command prompt.
Is there a way to do this without including another package? I've included my modal HTML template and Javascript. I'm hoping it's just something missed in the code.
Below is the HTML:
<template name="emodal">
<div id="myModal" class="modal fade" 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">Spends Email Details</h4>
</div>
<div class="modal-body">
<form class="emailspends">
<label for="input">Recipient:</label>
<input type="text" name="emailto" required>
<label for="input">Character Name:</label>
<input type="text" name="charname" required>
<input type="submit" id="sendemail" class="email" value="Email Spends" data-dismiss="modal">
</form>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</template>
Below is the Javascript:
Template.emodal.events({
"submit .emailspends": function (event) {
console.log(Meteor.user().emails[0].address);
// Prevent default browser form submit
event.preventDefault();
// Get value from form element
//var emailto = event.target.emailto.value;
var emailto = event.target.emailto.value;
var charname = event.target.charname.value;
var title = "Experience spends for " + charname;
Meteor.call('sendEmail', emailto,
'zbottorff#uwalumni.com', title,
'Yup, modal testies.');
// Clear form
event.target.emailto.value = "";
event.target.charname.value = "";
}
});
Update: Realized I should include this, but I did make sure I could get a submit-able template without it being in a modal window. Now I want to turn it into a modal and it's not submitting.
Bah! I found it just after I posted this.
I had too many parts to my submit button. I removed the "Class" and "id" parts, changed my Javascript to look for a 'submit form' event instead. Voala! Got the bugger to work.
I can't figure out why this Bootstrap modal receives the wrong data context.
Let's begin with my templates (excluding the modal for now). The first iterates through a list of items fetched by itemsList:
<template name="CategoryItems">
<ul>
{{#each itemsList}}
{{> Item}}
{{/each}}
</ul>
</template>
itemsList looks like this, by the way:
itemsList: function() {
return Items.find()
}
The inside template, Item, details just how these items should appear:
<template name="Item">
<li>
<span class="item-name">{{name}} </span>
<a href="#" class="anchor-item-edit" data-toggle="modal" data-target="#edit-item-modal">
<span class="fa fa-2x fa-pencil-square-o"></span> //Font Awesome icon
</a>
{{> EditItemModal}}
</li>
</template>
So basically it displays the name of the item fetched from the database and then provides an edit button that opens the edit-item-modal. The modal itself is placed here (it's hidden by default) so that it gets the correct data context, however that doesn't seem to work.
When the edit link is clicked, the modal opens. Excluding a lot of markup, it looks like this:
<template name="EditItemModal">
<div class="modal fade" id="edit-item-modal" tabindex="-1" role="dialog" aria-hidden="true">
<h4>{{name}}</h4>
</div>
</template>
The name, however, always displays the name of my first item in the list, ignoring what I actually clicked on.
A very strange thing, though, is that if I include a helper check inside the modal like so,
<template name="EditItemModal">
{{checkDataContext}}
//the other stuff
</template>
and makes the helper look like this,
Template.EditItemModal.helpers({
checkDataContext: function() {
console.dir(this)
}
})
then all the correct items are spit out in the console as soon as I load the page.
What's going on here?
Your modal markup only defines one shared ID between all of your modals, which is not valid HTML and ends up being the root of your problem.
When you click on any button triggering the modal, it's going to show up the first modal it finds in your markup, which always happens to be the first one.
You need to decorate your modals IDs with your items IDs (since they come from a Mongo.Collection), your markup will no longer contain duplicated modal IDs and your code will run as expected.
<template name="EditItemModal">
<div class="modal fade" id="edit-item-modal-{{_id}}" tabindex="-1" role="dialog" aria-hidden="true">
<h4>{{name}}</h4>
</div>
</template>
<template name="Item">
<li>
<span class="item-name">{{name}} </span>
<a href="#" class="anchor-item-edit" data-toggle="modal" data-target="#edit-item-modal-{{_id}}">
<span class="fa fa-2x fa-pencil-square-o"></span> //Font Awesome icon
</a>
{{> EditItemModal}}
</li>
</template>
I am currently loading Partial View returned by MVC controller to a bootstrap model via AngularJS $http.get call. My View in rendered properly in modal dialog, but the only problem is that my partial view which is rendered also uses angular and for some reason angular is not working in my partial view, but if the i convert the same partial view to a normal view it works properly.
Partial View Code:
#{
ViewBag.Title = "Add Article Types";
}
//other scripts files e.g app.js and angular.js are included in main layout file.
<script src="~/Scripts/Angular/ArticleTypeController.js"></script>
<div class="modal-content" ng-controller="ArticleTypeController">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
Add New Article Type
</div>
<form novalidate role="form" name="ArticleTypeForm" ng-submit="ArticleTypeForm.$valid && Add(model)">
<div class="modal-body">
<div class="form-group">
<label for="ArticleType" class="control-label">Article Type</label>
<input type="text" required ng-model="model.ArticleTypeName" class="form-control" id="ArticleType" />
</div>
</div>
</form>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" value="Add" >Add</button>
{{ArticleTypeForm.$valid}}
</div>
</div>
Controller to load modal with the partial view.
MenuController.js
angular.module('myApp').controller('MenuController', [
'$scope', '$http', 'httpPreConfig', function ($scope, $http, httpPreConfig) {
$scope.AddArticleType = function () {
$.get("/ArticleType/Add")//returns the partial view.
.success(function (response) {
ShowModal(response);//it properly shows the modal. but angular doesn't work
});
}
}]);
As you can see from the image below that angular expression is not being evaluated.
Any help would be really appreciated.
Just so that you know, angular expressions etc. are working in normal views.
Perhaps the view you're returning is not compiled by Angular. Try compiling it before displaying it in the modal by the $compile service and linking to a correct scope:
$scope.AddArticleType = function () {
$.get("/ArticleType/Add")
.success(function (response) {
$compile(response)($scope);
ShowModal(response);
});
}
But actually, this is not the right thing to do in the Angular world. IMO it would be better to use ng-include to load your content inside the modal and then show it to the user.