Main objective:
My goal is to enable users to click on a specific day on the calendar plugin and have a popup Bootstrap modal display events scheduled for that day.
Current Progress:
I am currently utilizing a javascript plugin called fullCalendar. Within this plugin, there is a dayClick event that I am implementing. Upon clicking a day, I have included AJAX code to send values via POST as shown below:
<div id="calendar"></div>
@Html.Partial("Modal",null)
...
<script>
$(document).ready(function () {
$('#calendar').fullCalendar({
height: 170,
selectable: true,
editable: true,
defaultView: 'basicWeek',
dayClick: function (date, jsEvent, view) {
$.ajax(
{
url: '@Url.Action("Index","Home")',
type: "POST",
data: JSON.stringify({ date: date }),
dataType: "json",
contentType: "application/json; charset=utf-8",
cache: false
})
$("#myModal").modal();
}
});
});
</script>
Following this, the process goes to the controller which then retrieves related data for that particular day and directs it to a partial view. Based on my debugging efforts, everything seems to be functioning correctly.
[HttpPost]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public ActionResult Index(string date)
{
if (date != null)
{
string[] dateSplit = date.Split(new char[] { 'T' });
DateTime objDate = Convert.ToDateTime(dateSplit[0]);
var content = db.Calendars.Where(x => x.startDate == objDate).ToList();
return PartialView("~/Views/Home/Modal.cshtml", content);
}
else
return PartialView("~/Views/Home/Modal.cshtml", null);
}
The Issue at Hand:
It appears that the data is not being passed correctly into the partial view, only displaying the initial null value. I originally thought that passing data through the post of the index would populate the partial view properly.
Could it possibly be that the javascript call $("#myModal").modal(); is being triggered before the data can fully populate? I've conducted some tests by including an if statement (Model != null) within all sections of code in the partial view, alongside an else statement that should display a paragraph with elements in it. However, it consistently shows the paragraph tag.
Here is the View Section:
@model IEnumerable<webby.Models.Calendar>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="padding:20.5% 15%;">
<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="myModalLabel">Events on @ViewBag.Date</h4>
</div>
<div class="modal-body">
<table>
@if(Model != null)
{
@foreach(var item in Model)
{
<tr>
<td>
@Html.DisplayFor(model => item.events)
</td>
</tr>
<tr>
<td>
@Html.DisplayFor(model => item.type)
</td>
</tr>
<tr>
<td>
@Html.DisplayFor(model => item.content)
</td>
</tr>
}
}
</table>
</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>