'Buttons in Partial View do not work after reloading a partial view
I am trying to create a voting-like system on a page with help of AJAX , so that page won't resfresh everytime a user votes/clicks the button.
Buttons work when you try and click/vote the first time, but after a reload they don't do anything. Like when you voted "plus" you are not allowed to vote twice up, but you can still change up your mind and change vote - but the buttons dont react to anything after the first vote and AJAX POST.
Still new to ajax, returned to this "project" after a few months, I would apprectiate some guidance.
ImageController.cs
public ActionResult ImagePage(int id, string title)
{
int ImageId = id;
Images image = new Images();
image = Context.Images
.Where(m => m.Id == ImageId)
.Select(m => m)
.SingleOrDefault();
//return View(image);
return PartialView(image);
}
public ActionResult ParitialImage(int id, string title)
{
int ImageId = id;
Images image = new Images();
image = Context.Images
.Where(m => m.Id == ImageId)
.Select(m => m)
.SingleOrDefault();
return PartialView(image);
}
public int ItemByIdFinder(int id)
{
var item = Context.Images
.Where(m => m.Id == id)
.Select(m => m.Rating)
.SingleOrDefault();
return item;
}
[HttpPost]
public ActionResult Buttons(string plus, string minus)
{
if (HttpContext.Session.Keys != null)
{
string ImageId;
string Username = HttpContext.Session.GetString("_Name");
int UserID = Context.Register
.Where(m => m.Username == Username)
.Select(m => m.Id)
.SingleOrDefault();
if (plus == null)
{
//sprawdzenie czy na minus
var madeVote = Context.ImagesVotes
.Where(m => m.RegisterID == UserID && (m.ImagesID == Int32.Parse(minus)))
.Select(m => m.Vote)
.SingleOrDefault();
if (madeVote == "minus")
{
List<Images> image = (from i in this.Context.Images
where i.Rating >= 1
select i).ToList();
return PartialView("MainPage",image);
}
else if (madeVote == "plus")
{
var doneVote = new ImagesVotes { RegisterID = UserID, ImagesID = Int32.Parse(minus) };
var dataPerson = this.Context.ImagesVotes.FirstOrDefault(m => m.RegisterID == UserID && (m.ImagesID == Int32.Parse(minus)));
dataPerson.Vote = "NULL";
ImageId = minus;
int id = Int32.Parse(ImageId);
int Rating = Context.Images
.Where(m => m.Id == id)
.Select(m => m.Rating)
.SingleOrDefault();
var Ratings = Context.Images.Find(id);
Ratings.Rating = Ratings.Rating - 1;
List<Images> image = (from i in this.Context.Images
where i.Rating >= 1
select i).ToList();
Context.Entry(dataPerson).State = EntityState.Modified;
Context.SaveChanges();
return PartialView("MainPage",image);
}
else if (madeVote == "NULL")
{
var doneVote = new ImagesVotes { RegisterID = UserID, ImagesID = Int32.Parse(minus) };
var dataPerson = this.Context.ImagesVotes.FirstOrDefault(m => m.RegisterID == UserID && (m.ImagesID == Int32.Parse(minus)));
dataPerson.Vote = "minus";
ImageId = minus;
int id = Int32.Parse(ImageId);
int Rating = Context.Images
.Where(m => m.Id == id)
.Select(m => m.Rating)
.SingleOrDefault();
var Ratings = Context.Images.Find(id);
Ratings.Rating = Ratings.Rating - 1;
List<Images> image = (from i in this.Context.Images
where i.Rating >= 1
select i).ToList();
Context.Entry(dataPerson).State = EntityState.Modified;
Context.SaveChanges();
return PartialView("MainPage", image);
}
}
else
{
var madeVote = Context.ImagesVotes
.Where(m => m.RegisterID == UserID && (m.ImagesID == Int32.Parse(plus)))
.Select(m => m.Vote)
.SingleOrDefault();
if (madeVote == "plus")
{
List<Images> image = (from i in this.Context.Images
where i.Rating >= 1
select i).ToList();
return PartialView("MainPage",image);
}
else if (madeVote == "minus")
{
//podmianka aminusa na plusa
var doneVote = new ImagesVotes { RegisterID = UserID, ImagesID = Int32.Parse(plus) };
var daneOsoby = this.Context.ImagesVotes.FirstOrDefault(m => m.RegisterID == UserID && (m.ImagesID == Int32.Parse(plus)));
daneOsoby.Vote = "NULL";
ImageId = plus;
int id = Int32.Parse(ImageId);
int Rating = Context.Images
.Where(m => m.Id == id)
.Select(m => m.Rating)
.SingleOrDefault();
var Ratings = Context.Images.Find(id);
Ratings.Rating = Ratings.Rating + 1;
//this.Context.ImagesVotes.Update(doneVote);
List<Images> image = (from i in this.Context.Images
where i.Rating >= 1
select i).ToList();
Context.Entry(daneOsoby).State = EntityState.Modified;
Context.SaveChanges();
return PartialView("MainPage", image);
}
else
{
//glos na plus
ImageId = plus;
string vote = "plus";
int id = Int32.Parse(ImageId);
int Rating = Context.Images
.Where(m => m.Id == id)
.Select(m => m.Rating)
.SingleOrDefault();
var Ratings = Context.Images.Find(id);
Ratings.Rating = Ratings.Rating + 1;
ImagesVotes imagesVotes = new ImagesVotes();
imagesVotes.ImagesID = id;
imagesVotes.RegisterID = UserID;
imagesVotes.Vote = vote;
this.Context.ImagesVotes.Add(imagesVotes);
Images image = new Images();
image = Context.Images
.Where(m => m.Id == id)
.Select(m => m)
.SingleOrDefault();
this.Context.SaveChanges();
List<Images> imaged = (from i in this.Context.Images
where i.Rating >= 1
select i).ToList();
return PartialView("MainPage", imaged);
}
}
}
else {
throw new Exception($"SESSION NOT SET");
}
return RedirectToAction("MainPage");
}
[HttpPost]
public ActionResult ButtonsOnPage(string plus, string minus, int newid)
{
if (HttpContext.Session.Keys != null)
{
string ImageId;
string Username = HttpContext.Session.GetString("_Name");
int UserID = Context.Register
.Where(m => m.Username == Username)
.Select(m => m.Id)
.SingleOrDefault();
int CorrectImageId = newid;
Images correctImage = new Images();
correctImage = Context.Images
.Where(m => m.Id == CorrectImageId)
.Select(m => m)
.SingleOrDefault();
if (plus == null)
{
//sprawdzenie czy na minus
var madeVote = Context.ImagesVotes
.Where(m => m.RegisterID == UserID && (m.ImagesID == Int32.Parse(minus)))
.Select(m => m.Vote)
.SingleOrDefault();
if (madeVote == "minus")
{
List<Images> image = (from i in this.Context.Images
where i.Rating >= 1
select i).ToList();
var image2 = from i in this.Context.Images
where i.Id == Int32.Parse(minus)
select i;
//Images image3 = (Images)image2;
return PartialView("ParitialImage", image2.FirstOrDefault());
}
else if (madeVote == "plus")
{
var doneVote = new ImagesVotes { RegisterID = UserID, ImagesID = Int32.Parse(minus) };
var dataPerson = this.Context.ImagesVotes.FirstOrDefault(m => m.RegisterID == UserID && (m.ImagesID == Int32.Parse(minus)));
dataPerson.Vote = "NULL";
ImageId = minus;
int id = Int32.Parse(ImageId);
int Rating = Context.Images
.Where(m => m.Id == id)
.Select(m => m.Rating)
.SingleOrDefault();
var Ratings = Context.Images.Find(id);
Ratings.Rating = Ratings.Rating - 1;
List<Images> image = (from i in this.Context.Images
where i.Rating >= 1
select i).ToList();
//Images image3 = (Images)image2;
Context.Entry(dataPerson).State = EntityState.Modified;
Context.SaveChanges();
var image2 = from i in this.Context.Images
where i.Id == Int32.Parse(minus)
select i;
return PartialView("ParitialImage", image2.FirstOrDefault());
}
else if (madeVote == "NULL")
{
var doneVote = new ImagesVotes { RegisterID = UserID, ImagesID = Int32.Parse(minus) };
var dataPerson = this.Context.ImagesVotes.FirstOrDefault(m => m.RegisterID == UserID && (m.ImagesID == Int32.Parse(minus)));
dataPerson.Vote = "minus";
ImageId = minus;
int id = Int32.Parse(ImageId);
int Rating = Context.Images
.Where(m => m.Id == id)
.Select(m => m.Rating)
.SingleOrDefault();
var Ratings = Context.Images.Find(id);
Ratings.Rating = Ratings.Rating - 1;
List<Images> image = (from i in this.Context.Images
where i.Rating >= 1
select i).ToList();
//Images image3 = (Images)image2;
Context.Entry(dataPerson).State = EntityState.Modified;
Context.SaveChanges();
var image2 = from i in this.Context.Images
where i.Id == Int32.Parse(minus)
select i;
return PartialView("ParitialImage", image2.FirstOrDefault());
}
else
{
//glos na minus czysty
ImageId = minus;
string vote = "minus";
int id = Int32.Parse(ImageId);
int Rating = Context.Images
.Where(m => m.Id == id)
.Select(m => m.Rating)
.SingleOrDefault();
var Ratings = Context.Images.Find(id);
Ratings.Rating = Ratings.Rating - 1;
ImagesVotes imagesVotes = new ImagesVotes();
imagesVotes.ImagesID = id;
imagesVotes.RegisterID = UserID;
imagesVotes.Vote = vote;
this.Context.ImagesVotes.Add(imagesVotes);
Images image = new Images();
image = Context.Images
.Where(m => m.Id == id)
.Select(m => m)
.SingleOrDefault();
this.Context.SaveChanges();
List<Images> imaged = (from i in this.Context.Images
where i.Rating >= 1
select i).ToList();
var image2 = from i in this.Context.Images
where i.Id == Int32.Parse(minus)
select i;
//Images image3 = (Images)image2;
return PartialView("ParitialImage", image2.FirstOrDefault());
}
}
else
{
var madeVote = Context.ImagesVotes
.Where(m => m.RegisterID == UserID && (m.ImagesID == Int32.Parse(plus)))
.Select(m => m.Vote)
.SingleOrDefault();
if (madeVote == "plus")
{
List<Images> image = (from i in this.Context.Images
where i.Rating >= 1
select i).ToList();
var image2 = from i in this.Context.Images
where i.Id == Int32.Parse(plus)
select i;
// Images image3 = (Images)image2;
return PartialView("ParitialImage", image2.FirstOrDefault());
}
else if (madeVote == "minus")
{
//podmianka aminusa na plusa
var doneVote = new ImagesVotes { RegisterID = UserID, ImagesID = Int32.Parse(plus) };
var daneOsoby = this.Context.ImagesVotes.FirstOrDefault(m => m.RegisterID == UserID && (m.ImagesID == Int32.Parse(plus)));
daneOsoby.Vote = "NULL";
ImageId = plus;
int id = Int32.Parse(ImageId);
int Rating = Context.Images
.Where(m => m.Id == id)
.Select(m => m.Rating)
.SingleOrDefault();
var Ratings = Context.Images.Find(id);
Ratings.Rating = Ratings.Rating + 1;
//this.Context.ImagesVotes.Update(doneVote);
List<Images> image = (from i in this.Context.Images
where i.Rating >= 1
select i).ToList();
//Images image3 = (Images)image2;
Context.Entry(daneOsoby).State = EntityState.Modified;
Context.SaveChanges();
var image2 = from i in this.Context.Images
where i.Id == Int32.Parse(plus)
select i;
return PartialView("ParitialImage", image2.FirstOrDefault());
}
else
{
//glos na plus
ImageId = plus;
string vote = "plus";
int id = Int32.Parse(ImageId);
int Rating = Context.Images
.Where(m => m.Id == id)
.Select(m => m.Rating)
.SingleOrDefault();
var Ratings = Context.Images.Find(id);
Ratings.Rating = Ratings.Rating + 1;
ImagesVotes imagesVotes = new ImagesVotes();
imagesVotes.ImagesID = id;
imagesVotes.RegisterID = UserID;
imagesVotes.Vote = vote;
this.Context.ImagesVotes.Add(imagesVotes);
Images image = new Images();
image = Context.Images
.Where(m => m.Id == id)
.Select(m => m)
.SingleOrDefault();
this.Context.SaveChanges();
List<Images> imaged = (from i in this.Context.Images
where i.Rating >= 1
select i).ToList();
var image2 = from i in this.Context.Images
where i.Id == Int32.Parse(plus)
select i;
//Images image3 = (Images)image2;
return PartialView("ParitialImage", image2.FirstOrDefault());
}
}
}
else
{
throw new Exception($"SESSION NOT SET");
}
//return RedirectToAction("ParitialImage");
}
PartialImage.cshtml (my partial view)
@model AplikacjaMVC.Models.Images
@{ ViewData["Title"] = @Model.Title;}
<div id="result">
<div class="card mb-3" style="width: 40rem;">
<div class="card-body">
<h3 class="card-title">@Model.Title</h3>
<h5 class="card-text">@Model.Description</h5>
<p class="card-text"><small class="text-muted">Autor: XXX</small></p>
</div>
<div>
<div class="form-group"> </div>
<img src="@Url.Content(Model.Path)" onclick="" class="card-img-top" alt="Image">
<div id="VotingButtons" class="input-group-button">
<button name="plus" class="btn btn-dark" id="plusButton" value="@Model.Id">+</button>
@*<input type="button" name="plus" id="@Model.Id" value="+" />*@
@Model.Rating
<input hidden asp-for="Rating" />
<button name="minus" class="btn btn-dark" id="minusButton" value="@Model.Id">-</button>
@*<input type="button" name="minus" id="@Model.Id" value="-" />*@
</div>
</div>
</div>
</div>
ImagePage.cshtml
@model AplikacjaMVC.Models.Images
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@{
ViewData["Title"] = @Model.Title;
}
@{ Layout = "~/Views/Shared/_Layout.cshtml"; }
<head>
<meta name="_csrf" content="${_csrf.token}"/>
<meta name="_csrf_header" content="${_csrf.headerName}"/>
</head>
<div id="DivToUpdate">
@Html.Partial("ParitialImage")
</div>
@section scripts{
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ajax-unobtrusive/3.2.6/jquery.unobtrusive-ajax.js" integrity="sha256-v2nySZafnswY87um3ymbg7p9f766IQspC5oqaqZVX2c=" crossorigin="anonymous"></script>
<script type="text/javascript">
$("#plusButton").click(function () {
event.preventDefault();
var plus2 = $("#plusButton").val();
$.ajax({
type: 'POST',
url: '@Url.Action("ButtonsOnPage")',
data: {
plus: plus2,
id: @Model.Id,
},
success: function (VotingButtons) {
$("#DivToUpdate").html(VotingButtons);
},
error: function (VotingButtons) {
//
alert(result.status);
alert(thrownError);
}
});
});
</script>
<script type="text/javascript">
$("#minusButton").click(function () {
event.preventDefault();
var minus2 = $("#minusButton").val();
$.ajax({
type: "POST",
url: '@Url.Action("ButtonsOnPage")',
data: {
minus: minus2,
newid: @Model.Id,
},
success: function (VotingButtons) {
$("#DivToUpdate").html(VotingButtons);
},
error: function (VotingButtons) {
alert(result.status);
alert(thrownError);
}
});
});
</script>
}
Solution 1:[1]
Cause
When this code is called:
$("#minusButton").click(function () {
// Removed for bevity
});
JQuery finds the element on the page with an ID of "minusButton". The problem is that button is located inside of the DIV you are updating via ajax. So as soon as "DivToUpdate" is updated that original button no longer exists, there is in it's place an entirly new button with the same ID that has not had the click event bound to it.
Resolution Option One : Delegated Event
$('body').on('click','#minusButton',function(){
// Removed for bevity
});
This one's a little hacky... In effect everytime you click anywhere on the page it then looks for the button with the ID.
You can read about delegated handlers here
Resolution Option Two: Nesting
You can can wrap it all in a function. Then call that same function as part of the success function.
function initMinusBtnClick() {
$("#minusButton").click(function () {
event.preventDefault();
var minus2 = $("#minusButton").val();
$.ajax({
type: "POST",
url: '@Url.Action("ButtonsOnPage")',
data: {
minus: minus2,
newid: @Model.Id,
},
success: function (VotingButtons) {
$("#DivToUpdate").html(VotingButtons);
initMinusBtnClick();
},
error: function (VotingButtons) {
alert(result.status);
alert(thrownError);
}
});
});
};
initMinusBtnClick();
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Jon Ryan |