I'm trying to edit objects with a modal Bootstrap. I've got that if you click over an event in Fullcalendar a form comes up with the info of that event (level,day,period) so I can edit the level and the day of that event(object). The problem is that when I click in the bottom save a new object is created instead of editing that event. Can't I get the params of the event clicked and change them??
This is my javascript where I set the eventClick function.
var y = "y";
function drawControl(controls) {
$('#calendar').fullCalendar({
editable: true,
aspectRatio: 1,
contentHeight: 500,
scrollTime: '24:00:00',
minTime: '01:00:00',
maxTime: '24:00:00',
defaultView: 'agendaWeek',
header:{left:"prev,next,today",
center:"title",
right:"month, agendaWeek, agendaDay"},
events: allControls(controls),
eventRender: function(event, element) {
var bloodLevel=event.title
if(bloodLevel >= 180) {
element.css('background-color', 'red');
}
else if(bloodLevel < 70) {
element.css('background-color', 'yellow');
}
},
eventClick: function(calEvent, jsEvent, view) {
x=calEvent.id;
$('#modalTitle').html(calEvent.title);
$('#control_day_edit').val(calEvent.start);
$('#control_level').val(calEvent.title.toString());
console.log(calEvent.title)
console.log(calEvent.start._i)
console.log(calEvent.id)
$('#eventUrl').attr('href',"/users/:user_id/controls/calEvent.id/edit");
$('#fullCalModal').modal();
y=calEvent;
}
})
}
});
document.getElementById('button_edit').addEventListener("click", editControl);
function editControl(event) {
event.preventDefault();
console.log(x);
var controlEdited = {
"level": document.getElementById('control_level').value,
"day": document.getElementById('control_day_edit').value,
"period": document.getElementById('control_period').value,
"id": x
}
$('#calendar').fullCalendar('updateEvent', y);
$.post("/editControls", JSON.stringify(controlEdited));
console.log(controlEdited)
};
This is the code of my controller
def editControls
if request.xhr?
#control = JSON.parse!(request.body.read.to_s)
Control.where(id: #control["id"])[0].update_attributes(level: #control["level"], day: #control["day"], period: #control["period"])
render json: "ok"
else
return error
end
end
This is the code of the view
<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">
<%= render 'form_edit' %>
</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>
This is the form
<% modal ||= false %>
<% remote = modal ? true : false %>
<div class="">
<%= form_for [#user, #control],remote: remote, html: {role: :form, 'data-model' => 'control'} do |f| %>
<p class="new_control_text">Edit Control</p>
<div class="form-group">
<div class="input-group">
<%= f.label :level, class: "sr-only"%>
<%= f.number_field :level, class: "form-control", placeholder: "Enter level" %>
</div>
</div>
<div class="form-group container">
<div class="row datetimeselect">
<div class='col-sm-12'>
<div class="form-group">
<div class='input-group date' id='datetimepicker2'>
<%= f.text_field :day, default: #control_day, :class => 'form-control', id: "control_day_edit" %>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="select_period">
<%= f.select :period, options_for_select([['pre-breakfast'], ['post-breakfast'],['pre-lunch'],['post-lunch'],['afternoon'],['pre-dinner'],['post-dinner']]), {}, class: "form-control" %>
</div>
<a href="#" id="button_edit" class="btn btn-default btn-lg" role="button">
Save
</a>
<% end %>
</div>
In your eventClick you have access to the calEvent object. You need to update this object to see it properly reflected in the calendar. Check out more of the event data methods in the fullCalendar docs
Your original event object has all the data inherent to your fullcalendar event. So you need to first get a hold of that object, then assign new values to the attributes you might want to change, and finally call the calendar with a with the "updateEvent" instruction.
The "updateEvent" reports changes to an event and renders them on the calendar.
.fullCalendar( 'updateEvent', event )
event must be the original Event Object for an event, not merely a reconstructed object. The original Event Object can obtained by callbacks such as eventClick, or by the clientEvents function.
Here is how you might update an event after a click:
$('#calendar').fullCalendar({
eventClick: function(event, element) {
event.title = "CLICKED!";
$('#calendar').fullCalendar('updateEvent', event);
}
});
Source: documentation
You need to make the event global.
Create a global variable
var evnt
Then within the fullcalendar click event give that variable the value of the event object.
eventClick: function (calEvent, jsEvent, view) {//click en un evento
evnt = calEvent;
//more actions
}
Then you have the event available for update in your modal or other function
function event_update(){
evnt.title = 'new title';
$('#calendar').fullCalendar('updateEvent', evnt);
}
I think you pretty much nailed it, you just needed to update the event object stored in the global y variable before calling updateEvent:
document.getElementById('button_edit').addEventListener("click", editControl);
function editControl(event) {
event.preventDefault();
console.log(x);
var controlEdited = {
"level": document.getElementById('control_level').value,
"day": document.getElementById('control_day_edit').value,
"period": document.getElementById('control_period').value,
"id": x
}
y.start = document.getElementById('control_day_edit').value;
y.title = document.getElementById('control_level').value;
$('#calendar').fullCalendar('updateEvent', y);
$.post("/editControls", JSON.stringify(controlEdited));
console.log(controlEdited)
};
Related
So, I'm working on a calendar app and I'm using Laravel and FullCalendar for this.
I want to be able to delete an event - once I click on the event in the calendar, a modal popup show up with a delete button. In order to delete the event, I must know its ID, but I can't get.
I can get it via JS selectors and display it as a text, but I can't figure out how to get it as a PHP variable so that I could use it in the action parameter of the form.
The reason why I'm doing this in the way I did it is: If I get all the events and "foreach" them into the "events" array of FullCalendar, my source code when the calendar renders would be a mess, full of events and their details. By using this approach, I find that events are not displayed in the source and the page renders more quickly (but I might be mistaken).
The way I display events from the database is as follows:
EventsController
public function getEvents()
{
return Event::where('event_date', '>', '2022-01-01')
->join('hospitals', 'events.hospital_id', '=', 'hospitals.hospital_id')
->select('hospitals.hospital_color', 'hospitals.hospital_max_people', 'event_id', 'event_content', 'event_date', 'user_id')
->get()
->map(fn ($events) => [
'id' => $events->event_id,
'title' => $events->event_content,
'start' => $events->event_date,
'allDay' => true,
'editable' => false,
'backgroundColor' => $events->hospital_color,
'borderColor' => $events->hospital_color,
'hospital_max_people' => $events->hospital_max_people,
'volunteer' => User::find($events->user_id)->first_name .' '. User::find($events->user_id)->last_name
]);
}
Events blade template - FullCalendar settings:
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
editable: false,
droppable: true,
selectable: true,
initialView: 'dayGridWeek',
views: {
dayGridWeek: {
type: 'dayGridWeek',
duration: { weeks: 2 },
buttonText: '4 day'
}
},
header: {
left: 'prev,next today',
center: 'title',
right: 'month,listMonth'
},
themeSystem: 'bootstrap5',
locale: 'en',
firstDay: '1',
contentHeight: 500,
height: 700,
expandRows: true,
events: 'getEvents',
eventClick: function(calendar, jsEvent, view) {
$('#eventDetail').modal("show");
$('#id').html(calendar.event.id);
$('#title').html(calendar.event.title);
$('#start').html(moment(calendar.event.start).format('DD.MM.YYYY'));
$('#volunteer').html(calendar.event.extendedProps.volunteer);
}
});
calendar.render();
});
</script>
Events blade template for showing modal:
<div class="modal fade" id="eventDetail" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="bar" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Event details</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Start: <p id="start"></p>
Volunteer: <p id="volunteer"></p>
Title: <p id="title"></p>
</div>
<div class="modal-footer">
<form method="POST" action="{{ route('calendar.destroy') }}" class="needs-validation" novalidate=""></p>
#csrf
#method('DELETE')
<div class="form-group">
<x-button tabindex="3">
{{ __('Delete event') }}
</x-button>
</div>
</form>
</div>
</div>
</div>
</div>
So, I did it in anoter way; just wanted to post the answer - I added a hidden input field: <input type="hidden" name="id" id="id" value=""> and the value is filled out when a modal opens with addition of this to the original id selector: $('#id').html(calendar.event.id).attr('value', calendar.event.id);
I also had to alter my delete route: Route::DELETE('calendar/destroy/{event_id}'
And that's it. Thank you anyway for your help
Note: Whole code can be found here:
https://github.com/Julian-Th/crowducate-platform/tree/feature/courseEditRights
The issue: I can't retrieve the {{this}} value with an event. Console.log() is printing 0.
My HTML:
<!-- Modal to control who can collaborate on a course-->
<template name="modalAddCollaborators">
<div id="modalAddCollaborators" 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">Manage Your Collaborators</h4>
</div>
<div class="modal-body">
<form class="form" role="form">
<ul class="list-group">
{{#each addedCollaborators}}
{{#each canEditCourse}}
<li class="list-group-item js-listed-collaborator">{{this}}<a title="Remove Collaborator" id="remove-collaborator" class="btn btn-danger pull-right" href="#"><i class="fa fa-trash"></i></a></li>
{{/each}}
{{/each}}
</ul>
<div class="form-group">
<input class="form-control typeahead" type="text" id="collaboratorName" placeholder="add a collaborator ..." data-source="courses" autocomplete="off" spellcheck="off">
<button type="button" id="js-addCollaborator" class="btn btn-success">Add</button>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</template>
My JS:
Template.modalAddCollaborators.rendered = function() {
// initializes all typeahead instances
Meteor.typeahead.inject();
};
Template.modalAddCollaborators.courses = function(){
return Courses.find().fetch().map(function(it){ return it.author; });
//return users.find().fetch().map(function(it){ return it.username; });
};
Template.modalAddCollaborators.helpers({
'addedCollaborators': function () {
return Courses.find().fetch();
}
});
Template.modalAddCollaborators.events({
'click #js-addCollaborator' : function (event) {
var collaboratorName = $('#collaboratorName').val(); //
Courses.update(
{_id: this._id},
{$addToSet: {canEditCourse: collaboratorName}}
);
$('#collaboratorName').val("");
},
'click #remove-collaborator': function (event) {
var listedCollaborator = $('.js-listed-collaborator').val();
console.log(listedCollaborator);
Courses.update(
{_id: this._id },
{$pull: {canEditCourse: listedCollaborator}}
);
}
});
My MongoDB JSON:
{
"_id" : "j7A3tFdFBn5ECQGwe",
"title" : "Beatles",
"coverImageId" : "RERiadyMx8j8C9QQi",
"author" : "John",
"keywords" : [
"Paul"
],
"published" : "true",
"about" : "Testing the Course",
"canEditCourse" : [
"uo8SMdNroPGnxMoRg",
"FLhFJEczF4ak7CxqN",
"lkahdakjshdal",
"asödjaöslkdjalsöSA"
],
"createdById" : "uo8SMdNroPGnxMoRg",
"dateCreated" : ISODate("2015-12-28T16:30:34.714Z")
}
As seen in the JS-File, my final goal is to delete the clicked user from an array.
To get the text of the li item in the child link click event, combine the use of .parent() and .text() (since you can't use .val() on list items):
'click #remove-collaborator': function (event) {
console.log(event.target);
var listedCollaborator = $(event.currentTarget).parent().text();
console.log(listedCollaborator);
console.log(JSON.stringify(Template.parentData(0)));
Courses.update(
{
_id: Template.parentData(0)._id, /* or _id: Template.currentData()._id, */
canEditCourse: listedCollaborator
},
{ $pull: { canEditCourse: listedCollaborator } }
);
}
Notice you can use the current DOM element within the event bubbling phase through event.currentTarget to reference the element that kicked off the event. Since the element is the anchor tag, you get the li item as
its .parent(), and subsequently get its value with .text().
As for the update, use Template.parentData() to get the parent _id. Specify a parameter of 0 in the method which denotes the current data context level to look.
For example, Template.parentData(0) is equivalent to Template.currentData(). Template.parentData(2) is equivalent to {{../..}} in a template.
Since you've attached your event handler to the modalAddCollaborators template this will be the data context of that template which is nothing.
Just setup a nested template at the level you want to catch the event.
Furthermore with this pattern you can identify the _id of the collaborator directly, it will be this. The course _id however comes from the context of the parent template. (I'm not sure whether the course level data context is 1 or 2 levels higher however).
html:
{{#each canEditCourse}}
{{> nestedTemplate }}
{{/each}}
<template name="nestedTemplate">
<li class="list-group-item js-listed-collaborator">
{{this}}<a title="Remove Collaborator" id="remove-collaborator" class="btn btn-danger pull-right" href="#"><i class="fa fa-trash"></i></a>
</li>
</template>
js:
Template.nestedTemplate.events({
'click #remove-collaborator': function (event) {
Courses.update({_id: Template.parentData()._id },{$pull: {canEditCourse: this}});
}
});
I'm using the FullCalendar package as well as the below code which is working perfectly:
HTML:
<body>
{{>calendar}}
</body>
</template>
<template name="calendar">
{{#if showEditEvent}}
{{>editEvent}}
{{/if}}
<div class="container">
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-8">
<div id="calendar">
</div>
</div>
<div class="col-md-2">
</div>
</div>
</div>
</template>
<template name="editEvent">
<!--Modal Dialog-->
<div class="modal" id="EditEventModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria- hidden="true">x</button>
<h4 class="modal-title">Agenda Item</h4>
</div>
<div class="modal-body">
<label for="title">Item: </label><input type="text" class="title" name="title" value="{{evt.title}}" id="title">
</div>
<div class="modal-footer">
Delete
Save
Cancel
</div>
</div>
</div>
</div>
JS:
// Set session defaults
Session.setDefault('editing_calevent', null);
Session.setDefault('showEditEvent', false);
Template.calendar.showEditEvent = function(){
return Session.get('showEditEvent');
}
Template.editEvent.evt = function(){
// run a query to the database
var calEvent = CalEvents.findOne({_id:Session.get('editing_calevent')});
return calEvent;
}
var updateCalendar = function(){
$('#calendar').fullCalendar( 'refetchEvents' );
}
Template.editEvent.events({
'click .save':function(evt,tmpl)
{updateCalEvent(Session.get('editing_calevent'),tmpl.find('.title').value);
Session.set('editing_calevent',null);
Session.set('showEditEvent',false);
},
'click .close':function(evt,tmpl){
Session.set('editing_calevent',null);
Session.set('showEditEvent',false);
$('#EditEventModal').modal("hide");
} ,
'click .remove':function(evt,tmpl){
removeCalEvent(Session.get('editing_calevent'));
Session.set('editing_calevent',null);
Session.set('showEditEvent',false);
$('#EditEventModal').modal("hide");
}
})
Template.calendar.rendered = function(){
$('#calendar').fullCalendar({
header:{
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
// Event triggered when someone clicks on a day in the calendar
dayClick:function( date, allDay, jsEvent, view) {
// Insert the day someone's clicked on
CalEvents.insert({title:'New Item',start:date,end:date});
// Refreshes the calendar
updateCalendar();
},
eventClick:function(calEvent,jsEvent,view){
// Set the editing_calevent variable to equal the calEvent.id
Session.set('editing_calevent',calEvent.id);
// Set the showEditEvent variable to true
Session.set('showEditEvent', true);
$('#EditEventModal').modal("show");
},
eventDrop:function(calEvent){
CalEvents.update(calEvent.id,
{$set: {start:calEvent.start,end:calEvent.end}});
updateCalendar();
},
events: function(start, end, callback) {
// Create an empty array to store the events
var events = [];
// Variable to pass events to the calendar
// Gets us all of the calendar events and puts them in the array
calEvents = CalEvents.find();
// Do a for each loop and add what you find to events array
calEvents.forEach(function(evt){
events.push(
{ id:evt._id,title:evt.title,start:evt.start,end:evt.end});
})
// Callback to pass events back to the calendar
callback(events);
},
editable:true
});
}
var removeCalEvent = function(id,title){
CalEvents.remove({_id:id});
updateCalendar();
}
var updateCalEvent = function(id,title){
CalEvents.update(id, {$set: {title:title}});
updateCalendar();
}
My two part question is:
A) how do i integrate something like the below in order to have more than one custom fields in the JSON feed?
B) how do I store the resultant data in a new Mongo Collection?
$(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();
}
});
});
Thank you.
I have a simple ItemView that's being rendered inside a modal window, using the technique of a custom modal region.
I have several modal regions on top of each other, and it does not seem to affect negatively the events of other views (that are also modal).
No events at all are being fired. I already debugged Marionette sources, and it looks like it's passing through the delegateEvents method correctly, without errors.
Here's the view:
"use strict";
define(function(require){
var Marionette = require("marionette");
var BaseModalView = require("views/Base/BaseModal");
var PointOfInterestModalTemplate = require("text!templates/PointOfInterest/PointOfInterestModal.html");
var DistanceHelper = require("utils/DistanceHelper");
return Marionette.ItemView.extend({
template: PointOfInterestModalTemplate,
events: {
"click #route-button": "route",
"click #like-button": "like",
"click .report-button": "report"
},
route: function(event) {
console.log("route");
//var coordinates = this.model.attributes.geometry.coordinates;
//var originalLatLng = L.latLng(coordinates[1], coordinates[0]);
//vent.trigger("routing:routeTo", originalLatLng);
},
like: function(event) {
console.log("like");
},
report: function(event) {
console.log("report");
},
onRender: function() {
var distanceHelper = new DistanceHelper();
var distanceString = distanceHelper.verboseDistance(this.model.geometry._latlng);
this.$("#distance-placeholder").html(distanceString);
}
});
});
My template is pretty lengthy, but here's the relevant part (I checked and the whole thing is production correct HTML)
<script type="text/template">
<div id="poi-info-modal" class="modal fade" tabindex="-1" style="display: none">
<div class="modal-header modal-header-blue">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
<h4 class="modal-title">Details</h4>
</div>
<div class="modal-body">
<div class="container-fluid">
<h2><%= name %></h2>
<div class="row">
<div class="col-xs-12 col-md-12">
<p class="small">
<% if (address) { %>
<%= address %>
<% } else { %>
No address available
<% } %>
</p>
<p class="small">
<span id="distance-placeholder"></span>
</p>
</div>
</div>
<div class="row margin-top-row center-row">
<div class="col-xs-4 col-md-4">
<a href="javascript:void(0)" id="route-button" class="btn btn-circle btn-lg btn-blue">
<i class="fa fa-map-marker"></i>
</a>
</div>
<div class="col-xs-4 col-md-4">
<a id="like-button" class="btn btn-circle btn-blue btn-lg">
<i class="fa fa-heart"></i>
</a>
</div>
<div class="col-xs-4 col-md-4">
<a href="javascript:void(0)" class="report-button btn btn-circle btn-blue btn-lg">
<i class="fa fa-exclamation-triangle"></i>
</a>
</div>
</div>
</div> <!--container-->
</div> <!--modalbody-->
</div> <!--modal-div-->
Other views are used in similar fashion, and work quite well.
the basics for displaying this modal is using a region, like this:
var region = new ModalRegion();
region.show(new ModalView({model: model});
Here's is the region for reference. The weird thing is that this does give any errors or whatsoever.
"use strict";
define(function(require){
var $ = require("jquery");
var bootstrap = require("bootstrap");
var bootstrapModal = require("bootstrap-modal");
var Marionette = require("marionette");
return Marionette.Region.extend({
el: "#modal-container",
constructor: function(){
Backbone.Marionette.Region.prototype.constructor.apply(this, arguments);
this.on("show", this.showModal, this);
},
getEl: function(selector){
var $el = $(selector);
$el.on("hidden", this.close);
return $el;
},
showModal: function(view){
view.on("close", this.hideModal, this);
var width = view.modalWidth || 700;
var height = view.modalHeight || 600;
var maxHeight = view.modalMaxHeight || 600;
$(".modal").modal({
show: true,
width: width,
height: height,
maxHeight: maxHeight
});
},
hideModal: function(){
$(".modal").modal({
show: false
});
}
});
});
I know this kinda boring and hard to help, but I appreciated it. Thanks!
I have an MVC 4 application containing a grid with a link button to trigger the display of record details. I'm using a bootstrap modal dialog to display record details when the user selects a grid row.
I don't want to load the record details unless they are asked for; there are too many data elements involved (1000+).
The grid page uses a modal div containing the partial page (with a ViewModel reference).
I need the partial page's ViewModel to refresh prior to the display of the dialog. so when the user clicks the link, I get the record id from the grid and use it to create the url to the controller method - which seems to work, but seems to happen AFTER the dialog is shown.
How do I get this to work?
This code is in my Index.cshtml:
×
Account Number: #Html.DisplayFor(model => model.AccountNumber)
#{Html.RenderPartial("_KeyTable");}
#{Html.RenderPartial("_LoanTable");}
Close
$(document).ready(function () {
$("#divDialog").hide();
$("#btnClose").hide();
$("#lblAcceptAll").show();
$("#OnHoldsGrid").focus();
pageGrids.OnHoldsGrid.onRowSelect(function (e) {
accountNumber = e.row.AccountNumber;
});
$(".modal-link").click(function (event) {
event.preventDefault();
$('#detailsModal').removeData("modal");
var url = '#(Url.Action("_DetailsForModal", "Home", null, Request.Url.Scheme))?accountNumber=' + accountNumber;
$('#detailsModal').load(url);
$('#detailsModal').modal('show');
//alert(url);
});
});
// This code is in my Controller:
public ActionResult _DetailsForModal(string accountNumber)
{ // This refreshes the data in the ViewModel:
LOIHoldsViewModel model = new LOIHoldsViewModel();
model.GetLOIHoldExtended(accountNumber);
return PartialView("_DetailsForModal", model);
}
// This code is in my partial page _KeyTable.cshtml:
#model LOIHolds.Models.LOIHoldsViewModel
<div id="divKeyTable">
<br />
<hr />
<div class="KeyTableExpandContent">
<h2>Show/Hide Key Table Information</h2>
</div>
<label>Provider Date:</label>
#Html.DisplayFor(model => model.LOIHoldWithTables.KeyTable.ProviderDate)
<label>PFI Date:</label>
#Html.DisplayFor(model => model.LOIHoldWithTables.KeyTable.PFIDate)
<label>User Accept Date:</label>
#Html.DisplayFor(model => model.LOIHoldWithTables.KeyTable.UserAcceptDate)
<label>User Deny Date:</label>
#Html.DisplayFor(model => model.LOIHoldWithTables.KeyTable.UserDenyDate)
<label>Process Date:</label>
#Html.DisplayFor(model => model.LOIHoldWithTables.KeyTable.ProcessDate)
<label>Fiserv Accept Date:</label>
#Html.DisplayFor(model => model.LOIHoldWithTables.KeyTable.FiservAcceptDate)
</div>
<script>
$('.KeyTableExpandContent').click(function () {
$('.divKeyTable').toggle();
});
</script>
// This is the partial _DetailsForModal.cshtml:
#model LOIHolds.Models.LOIHoldsViewModel
<div 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 class="modal-title" id="detailsModalLabel"><label>Account Number: </label>#Html.DisplayFor(model => model.AccountNumber) </h4>
</div>
<div class="modal-body">
<p>
#{Html.RenderPartial("_KeyTable");}
#{Html.RenderPartial("_LoanTable");}
</p>
</div>
<div class="modal-footer">
<button type="button" id="CancelModal" class="btn btn-default modal-close-btn" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
You will have to use Ajax when you click the .modal-link:
$(".modal-link").click(function (event) {
var mUrl = '#(Url.Action("DetailsForModal", "Home", null, Request.Url.Scheme))?accountNumber=' + accountNumber;
$.ajax({
url: mUrl,
success:function(result){
// result should contain PartialView from Controller
//Assign Modal DIV the PartialView
$('#detailsModal').html(result);
$('#detailsModal').modal('show');
}
});
}
Put your Modal Logic in a Partial View, then Create a function in Home Controller: Something like this:
public ActionResult DetailsForModal(int accountNumber){
var model = new PartialModalDialogViewModel();
// Load Modal Data
return PartialView("PartialViewName", model);
}
EDIT:
Try removing this from the Modal Partial View and put in somewhere in the _Layout.cshtml
<div class="modal fade" id="detailsModal" tabindex="-1" role="dialog" aria-labelledby="detailsModalLabel" aria-hidden="true">
</div>