I'm facing an issue trying to connect a button to an API using the click method. The JavaScript on the rest of my website is functioning properly, but this specific part doesn't seem to cooperate with me. I'm still new to asp .net and following a tutorial, so if anything seems off, it's because that's how it was done in the tutorial. Here is the code snippet from the page causing the problem:
@model IEnumerable<GigHub.Models.Gig>
@{
ViewBag.Title = "Home Page";
}
<ul class="gigs">
@foreach(var gig in Model)
{
<li>
<div class="date">
<div class="month">
@gig.DateTime.ToString("MMM")
</div>
<div class="day" style="background:#f7f7f7;color:#333;font-size:20px;padding:6px 12px;">
@gig.DateTime.ToString("d ")
</div>
</div>
<div class="details">
<span class="artist">
@gig.Artist.Name
</span>
<span class="genre">
@gig.Genre.Name
</span>
<button data-gig-id="@gig.Id" class="btn btn-default btn-sm pull-right js-toggle-attendence">Going?</button>
</div>
</li>
}
</ul>
@section scripts
{
<script>
$(document).ready(function () {
$("js-toggle-attendence").click(function (event) {
var button = $(event.target);
$.post("/api/attendances", { gigId: button.attr("data-gig-id") }).done(function () {
button.removeClass("btn-default").addClass("btn-info").text("Going");
}).fail(function () {
alert("Error Occured!");
});
});
});
</script>
}`
This section seems to be causing the trouble:
<div class="details">
<span class="artist">
@gig.Artist.Name
</span>
<span class="genre">
@gig.Genre.Name
</span>
<button data-gig-id="@gig.Id" class="btn btn-default btn-sm pull-right js-toggle-attendence">Going?</button>
</div>
And here is the script involved:
@section scripts
{
<script>
$(document).ready(function () {
$("js-toggle-attendence").click(function (event) {
var button = $(event.target);
$.post("/api/attendances", { gigId: button.attr("data-gig-id") }).done(function () {
button.removeClass("btn-default").addClass("btn-info").text("Going");
}).fail(function () {
alert("Error Occured!");
});
});
});
</script>
}`