I try to implement a simple calendar in ASP.NET MVC 4. Its aim is to view a day and schedule meetings among different units of an organization. I am getting "Uncaught ReferenceError: GetDayViewJS is not defined" exception. Backend side of the project has passed the tests. Here is the Razor view of the erroneous page:
@model ToplantiOrganizasyon.Viewler.Somut.TimeFrameView
@{
ViewBag.Title = "Meeting Organization";
}
<meta charset="utf-8">
<title>Dynamic Calendar JavaScript | CodingNepal</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Google Font Link for Icons -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">
<script src="script.js" defer></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script>
function GetDayViewJS(dayId, monthId) {
debugger;
var url ="/Home/GetDayView?dayId=" + dayId;
$("#MyModal2").modal();
$.ajax({
url:url,
type:"get",
success:function(data)
{
var obj=JSON.parse(data);
$("#id").val(obj.ID);
$("#Kategori").val(obj.Kategori);
$("#Aciklama").val(obj.Aciklama);
}
/*
complete: function(){
Hide(); // Hide loader icon
},
*/
/*
error: function (jqXHR, textStatus, errorThrown) {
alert("HTTP Status: " + jqXHR.status + "; Error Text: " + jqXHR.responseText); // Display error message
}
*/
failure: function (jqXHR, textStatus, errorThrown) {
alert("Status: " + jqXHR.status + "; Error: " + jqXHR.responseText); // Display error message
}
});
}
</script>
<div id="sample-overview">
<header>
<p class="current-date"></p>
<div class="icons">
<span id="prev" class="material-symbols-rounded">chevron_left</span>
<span id="next" class="material-symbols-rounded">chevron_right</span>
</div>
</header>
<div class="calendar">
<p class="calendar">@Model.Definition</p>
<ul class="weeks">
<li>Monday</li>
<li>Tuesday</li>
<li>Wedn.</li>
<li>Thursday</li>
<li>Friday</li>
<li>Saturday</li>
<li>Sunday</li>
</ul>
<ul class="days">
@*This is the start of the erroneous lines*@
<li><a href='#' @*class='btn btn-success'*@ onclick=GetDayViewJS(1,7)>1</a></li>
<li><a href='#' @*class='btn btn-success'*@ onclick=GetDayViewJS(2,7)>2</a></li>
<li><a href='#' @*class='btn btn-success'*@ onclick=GetDayViewJS(3,7)>3</a></li>
<li><a href='#' @*class='btn btn-success'*@ onclick=GetDayViewJS(4,7)>4</a></li>
<li><a href='#' @*class='btn btn-success'*@ onclick=GetDayViewJS(5,7)>5</a></li>
<li><a href='#' @*class='btn btn-success'*@ onclick=GetDayViewJS(6,7)>6</a></li>
<li><a href='#' @*class='btn btn-success'*@ onclick=GetDayViewJS(7,7)>7</a></li>
<li><a href='#' @*class='btn btn-success'*@ onclick=GetDayViewJS(8,7)>8</a></li>
<li><a href='#' @*class='btn btn-success'*@ onclick=GetDayViewJS(9,7)>9</a></li>
<li><a href='#' @*class='btn btn-success'*@ onclick=GetDayViewJS(10,7)>10</a></li>
@*This is the end of the erroneous lines*@
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
<li>31</li>
<li>32</li>
<li>33</li>
<li>34</li>
<li>35</li>
</ul>
</div>
</div>
The main aim of the GetDayViewJS is to get the time frame of the selected day and month through an Ajax call. The time frame of the day consists of the meetings and other events that take place on a specific day. After an Ajax call, it is supposed to reflect the data into divDayPresence div, however, it is not the present concern. GetDayViewJS is supposed to hit the function GetDayView function defined at the HomeController. Here is the definition of the GetDayView function of the HomeController:
public JsonResult GetDayView(int dayId)
{
try
{
int monthId = 7;
if (dayId < 0 || monthId < 0)
throw new ArgumentException(String.Format("dayId:{0} monthId:{1}", dayId, monthId));
DateTime day = this._dateTimeAffairs.CreateDateTime(dayId, monthId, DateTime.Now.Year);
if (day == DateTime.MinValue)
throw new InvalidOperationException(String.Format("day == DateTime.MinValue. day:{0}", day.ToString()));
DayView dayView = this._dateTimeAffairs.CreateDayView(day);
if (dayView == null)
throw new InvalidOperationException("dayView == null");
string resultValue = JsonConvert.SerializeObject(dayView, Formatting.Indented, new JsonSerializerSettings
{
//COMMENT what is this?
ReferenceLoopHandling = ReferenceLoopHandling.Ignore
});
return Json(new { Status = "200", value = resultValue }, JsonRequestBehavior.AllowGet);
}
catch (ArgumentException exception)
{
//exception handling
}
catch (InvalidOperationException exception)
{
//exception handling
}
catch (NullReferenceException exception)
{
//exception handling
}
catch (Exception exception)
{
//exception handling
}
}
I know that GetDayView runs smoothly. The problem here is that flow never reaches the GetDayView function, in the browser's console, I am observing the exception:
(index):127 Uncaught ReferenceError: GetDayViewJS is not defined at HTMLAnchorElement.onclick ((index):127:56)
I wrote the script section of the razor page at the end of the razor page but no avail. Where am I wrong? Thanks in advance.
As CBroe points out that, when I put comma after success:function(data) {...}, it works.