Привет!
Делаю пример из книжки на использование js, но js не отрабатывает
Index.js:
function selectView(view) {
$('.display').not('#' + view + "Display").hide();
$('#' + view + "Display").show();
}
function getData() {
$.ajax({
type: "GET",
url: "/api/reservation",
success: function (data) {
$('#tableBody').empty();
for (var i = 0; i < data.length; i++) {
$('#tableBody').append('<tr><td><input id="id" name="id" type="radio"'
+ 'value="' + data[i].ReservationId + '" /></td>'
+ '<td>' + data[i].ClientName + '</td>'
+ '<td>' + data[i].Location + '</td></tr>');
}
$('input:radio')[0].checked = "checked";
selectView("summary");
}
});
}
$(document).ready(function () {
selectView("summary");
getData();
$("button").click(function (e) {
var selectedRadio = $('input:radio:checked')
switch (e.target.id) {
case "refresh":
getData();
break;
case "delete":
break;
case "add":
selectView("add");
break;
case "edit":
selectView("edit");
break;
case "submitEdit":
break;
}
});
});
Index.cshtml:
@{
ViewBag.Title = "Index";
}
@section scripts {
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="~/Scripts/jquery-1.11.1.min.js"></script>
<script src="~/Scripts/jquery-2.1.1.min.js"></script>
<script src="~/Scripts/Home/Index.js"></script>
}
<head>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" type="text/css" href="~/Content/Site.css" />
<title>Index</title>
</head>
<div id="summaryDisplay" class="display">
<h4>Reservations</h4>
<table>
<thead>
<tr>
<th class="selectCol"></th>
<th class="nameCol">Name</th>
<th class="locationCol">Location</th>
</tr>
</thead>
<tbody id="tableBody">
<tr><td colspan="3">The data is loading</td></tr>
</tbody>
</table>
<div id="buttonContainer">
<button id="refresh">Refresh</button>
<button id="add">Add</button>
<button id="edit">Edit</button>
<button id="delete">Delete</button>
</div>
</div>
<div id="addDisplay" class="display">
<h4>Add New Reservation</h4>
@{
AjaxOptions addAjaxOpts = new AjaxOptions
{
// options will go here
};
}
@using (Ajax.BeginForm(addAjaxOpts))
{
@Html.Hidden("ReservationId", 0)
<p><label>Name:</label>@Html.Editor("ClientName")</p>
<p><label>Location:</label>@Html.Editor("Location")</p>
<button type="submit">Submit</button>
}
</div>
<div id="editDisplay" class="display">
<h4>Edit Reservation</h4>
<form id="editForm">
<input id="editReservationId" type="hidden" name="ReservationId" />
<p><label>Name:</label><input id="editClientName" name="ClientName" /></p>
<p><label>Location:</label><input id="editLocation" name="Location" /></p>
</form>
<button id="submitEdit" type="submit">Save</button>
</div>
во время запуска должна быть одна секция div видна и кнопки add, delete должны быть активны, но не работает.
В чем ошибка, подскажите, пожалуйста.
Спасибо.
