Develop Reference

Getting a 405 error when trying to call Delete Modal Confirmation action (Asp.Net Core 6 javascript)

I'm working on my first Asp.Net Core application, and am struggling with modals, Razor pages and route mapping are completely new things for me, and javascript is a pretty old thing for me. I'm trying to create a delete modal that can be used for any object (my test object is of type Employee). Maybe this isn't possible, I'm not sure. My modal displays fine, but when I click to call my DeletePOST method I get a 405 error. The URL in question returns as https://localhost:44313/Employee/DeletePOST/1 (when the employee with id = 1 is selected). The "warning" message that I get in the console is
(index):6789 crbug/1173575, non-JS module files deprecated.(anonymous) # (index):6789.
Here is the applicable code from View.Employee.Index
<tbody>
#foreach (var employee in Model)
{
<tr id="row_#employee.Id">
<td>#employee.Name</td>
<td>#employee.Phone</td>
<td>#employee.Email</td>
<td>#employee.Address</td>
<td>#employee.Role</td>
<td>#employee.Availability</td>
<td class="w-100 btn-group" role="group">
<a asp-controller="Employee" asp-action="Edit" asp-route-id="#employee.Id"
class="btn btn-primary mx-2"> <i class="bi bi-pencil-square"></i> Edit</a>
<!--delete modal confirmation button-->
<a class="btn btn-danger delete" id="#delete" data-id="#employee.Id"
data-url ="#Url.Action("DeletePOST","Employee")/"
data-body-message= "Are you sure you want to delete this employee?">
<i class="bi bi-trash"></i> Delete</a>
</td>
</tr>
}
</tbody>
Code from wwwroot.js.delete.js
$((function () {
var target;
var pathToDelete;
var id;
$('body').append(`
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-bs-dismiss="modal"
aria-label="Close"><span aria-hidden="true">×</span> </button>
<h4 class="modal-title" id="myModalLabel">Warning</h4>
</div>
<div class="modal-body delete-modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal"
id="cancel-delete">Cancel</button>
<button type="submit" class="btn btn-danger"
id="confirm-delete">Delete</button>
</div>
</div>
</div>
</div>`);
//Delete Action
$(".delete").on('click', (e) => {
e.preventDefault();
target = e.target;
id = $(target).data('id');
pathToDelete = $(target).data('url');
var bodyMessage = $(target).data('body-message');
pathToDelete = pathToDelete + id;
$(".delete-modal-body").text(bodyMessage);
$("#deleteModal").modal('show');
});
$("#confirm-delete").on('click', () => {
window.location.href = pathToDelete; //suspect issue
});
}()));
Code from Controllers.EmployeeController.cs
[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult DeletePOST(int? id)
{
var selectedEmployee = _db.Employees.Find(id);
if (selectedEmployee == null)
{
return NotFound();
}
_db.Employees.Remove(selectedEmployee);
_db.SaveChanges();
return RedirectToAction("Index"); //suspect issue
}
```

If you want to call DeletePOST in js,you can try to use ajax,since you need to add AntiForgeryToken to the request,you also need to add #Html.AntiForgoryTokento your view:
view:
<tbody>
#foreach (var employee in Model)
{
<tr id="row_#employee.Id">
<td>#employee.Name</td>
<td>#employee.Phone</td>
<td>#employee.Email</td>
<td>#employee.Address</td>
<td>#employee.Role</td>
<td>#employee.Availability</td>
<td class="w-100 btn-group" role="group">
<a asp-controller="Employee" asp-action="Edit" asp-route-id="#employee.Id"
class="btn btn-primary mx-2"> <i class="bi bi-pencil-square"></i> Edit</a>
<!--delete modal confirmation button-->
<a class="btn btn-danger delete" id="#delete" data-id="#employee.Id"
data-url ="#Url.Action("DeletePOST","Employee")/"
data-body-message= "Are you sure you want to delete this employee?">
<i class="bi bi-trash"></i> Delete</a>
</td>
</tr>
}
</tbody>
#Html.AntiForgoryToken
js:
$("#confirm-delete").on('click', () => {
$.ajax({
type: "POST",
url: pathToDelete,
headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() },
}).done(function (result) {
//redirect to Index here
window.location.href="Index";
});
});
Or you can remove the following code in Controller:
[HttpPost]
[ValidateAntiForgeryToken]

Clear an automatic Setinterval to open a modal

I have a list update part in my php where the ajax will update the list. The list is generated through sql queries and in a while loop. So it creates n number of list based on database values. Now I have a button on every list which will open up a modal box.
The update is done through set interval function below
var int = startinterval();
function startinterval() {
interval = setInterval(fetch_list, 1000);
return interval;
}
function fetch_list() {
var action = "fetch_data";
$.ajax({
url: "list.php",
method: "POST",
data: {
action: action
},
success: function(data) {
$('.list').html(data);
}
})
}
My Html where the data is updated to the list class
<div class="col-lg-12 list" style="overflow-y: auto;height: 400px;">
Now my problem is when i click the button on the list (as mention earlier) which should normally open up the modal box. Due to setInterval constantly updating the list every sec, the modal when open dissapears and goes hidden.
So what I'm trying is when I click the button to open the modal, it should stop the setinterval function. The setinterval should come back running once I click the cancel button inside the modal.
I tried many ways to clearinterval(), but no success. So expecting someone's help for me to get the wheels rolling.
Thanks in advance.
UPDATE:
my list would look like the below screenshot.
My list.php
if($_POST["action"] == "fetch_data")
{
echo fetch_list($connect);
}
function fetch_list($connect)
{
if(!$_SESSION['id']){
$output = '<ul class="list-unstyled"><h4>Please Select a Programme</h4></ul>';
return $output;
}else{
$query = "
SELECT * FROM list_programme
WHERE pid = '".$_SESSION['id']."'
ORDER BY pid ASC
";
$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
$output = '<ul class="list-unstyled">';
foreach($result as $row)
{
if($row["user"] == $_SESSION["uid"])
{
if($row["pstatus"] == '2')
{
$tickstatus = 'color:white';
$pcontrol = 'bg-success';
$pname = $row["pname"];
$border = 'border-color:#999;';
$pid = $row['pid'];
$notification = 'incomplete';
}
else
{
$pname = $row["pname"];
$pid = $row['pid'];
$notification = 'complete';
}
}
else
{
}
$output .= '
<div class="x_panel">
<button class="btn btn-round button-pcontrol '.$pcontrol.'" id="'.$pid.'" value="'.mb_strimwidth($pname, 0, 21, "...").'" data-notification="'.$notification.'" onClick="markcheck(this.id,this.value,this.dataset.notification)" style="'.$border.'"><i class="material-icons" title="Mark Completed" style="'.$tickstatus.'">check</i></button><span class="pname">'.$pname.'</span>
<span class="pcontrolbuttons">
<button class="btn btn-round button-pcontrol" id="programme" onClick="stopinterval()" data-id="'.$pid.'" data-toggle="modal" data-target="#programme'.$pid.'"><i class="material-icons" title="Assign users">person_add</i></button>
<button class="btn btn-round button-taskcontrol" data-id="'.$pid.'" data-value="'.mb_strimwidth($pname, 0, 21, "...").'" onClick="deleteprgm(this.dataset.id,this.dataset.value)"><i class="material-icons" title="Delete Task">delete</i></button>
</span>
</div>
<!--Modal -->
<div id="programme'.$id.'" class="modal custom-modal fade" role="dialog">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title text-center">Add to this programme</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Some Input elements, Drop downs, etc.,
</div>
<div class="submit-section">
<button type="button" class="btn btn-success submit-btn" id="addnusers"><i class="glyphicon glyphicon-plus"></i> Add Users</button>
<button type="button" class="btn btn-primary submit-btn" id="closeassignee" data-dismiss="modal"><i class="glyphicon glyphicon-remove"></i> Close</button>
</div>
</div>
</div>
</div>
</div>
<!-- /Modal -->';
}
$output .= '</ul>';
return $output;
}
}

So what I'm trying is when I click the button to open the modal, it
should stop the setinterval function.
You always should stops the functions execution, otherwise it will call the AJAX once per second and change the content of the modal.
document.getElementById('#button').addEventListener('click', function(event) {
event.preventDefault();
clearInterval(int);
// open modal
});
The setinterval should come back running once I click the cancel
button inside the modal.
document.getElementById('#cancel').addEventListener('click', function(event) {
event.preventDefault();
startinterval();
});

After searching for many resources, I had no luck to fix my issues with SetInterval.
So instead I modified my code to use setTimeout function. And the main drawback is this will not do live updates but once some button are clicked to modify the contents, the ajax success will call the setTimeout function and my list will be updated. So for time being the purpose is served.
Thanks for all the response.
Below is the single piece of code I Modified instead of a setInterval function
setTimeout(fetch_list, 1000);

Calling a MVC controller using jQuery and ajax

Hello I am trying to call a method with parameters in my controller using ajax and jquery
Controller:
[HttpPost("{Id}")]
public ActionResult PostComment(int Id, ShowViewModel model)
{
}
View:
I have a button called AddComment, when clicked it should open a modal popup which asks for confirmation to save
<form id="addCommentForm" asp-action="postcomment" enctype="multipart/form-data">
<button id="addCommentButton" class="btn btn-primary">
<i class="fa fa-search"></i> Add comment
</button>`
<div class="modal fade" id="saveConfirmationDialog" tabindex="-1" role="dialog" aria-labelledby="saveConfirmationDialogTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="saveConfirmationDialogTitle">Post selective exchange comment</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Do you want to post a comment?
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success">
<i class="fa fa-envelope-open"></i> Post selective exchange comment
</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">
<i class="fa fa-ban"></i> Close
</button>
</div>
</div>
</div>
</div>
</form>
Javascript:
ControllerName.View.Properties.controllerViewUrl = $("#controllerViewUrl").val();
$(document).ready(function () {
ControllerName.View.Validation.initialize();
ControllerName.View.Initialize.addCommentButton();
});
ControllerName.View.Initialize = {}
ControllerName.View.Initialize.addCommentButton = function () {
$('#addCommentButton').click(function (event) {
event.preventDefault();
if ($('#addCommentForm').valid()) {
$("#saveConfirmationDialog").modal('show');
}
});
}
ControllerName.View.Validation = {}
ControllerName.View.Validation.initialize = function () {
$("#addCommentForm").validate();
}
ControllerName.View.Ajax = {}
ControllerName.View.Ajax.postComment = function (successCallback) {
var url = ControllerName.View.Properties.controllerViewUrl + '/PostComment'+<<parameter>>;
}
My Controller method is not getting called, what am I doing wrong?
I also need to pass a Id as parameter
Please help, Thanks in advance

A simple example
HTML CODE
<button id="saveButton" type="button" data-toggle="modal" data-target="#saveConfirmationDialog" class="btn btn-labeled btn-danger" style="display:none;">Save Data</button>
<div id="saveConfirmationDialog" class="modal fade" role="dialog" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 id="modal-title" class="modal-title">Post selective exchange comment</h4>
</div>
<div class="modal-body">
Do you want to post a comment?
</div>
<div class="modal-footer">
<div id="formDiv">
<button id="sender" type="submit" class="btn btn-success"><i class="fa fa-envelope-open"></i> Post selective exchange comment</button>
<button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-ban"></i> Close</button>
</div>
<div id="loadingPanel" style="display:none;">Loading...</div>
</div>
</div>
</div>
</div>
JS CODE
<script type="text/javascript">
$('#sender').click(function () {
PostDataToController();
});
function PostDataToController(action) {
$('#formDiv').hide();
$('#loadingPanel').show();
// create form data
var formData = new FormData();
formData.append("YourParameter", $('#YourValue').val());
// Write here your parameters what you need
// do post
$.ajax({
type: "POST",
url: "/localhost:8080/InsertComment",
enctype: "multipart/form-data",
cache: false,
contentType: false,
processData: false,
data: formData,
success: function (d) {
$('#formDiv').show();
$('#loadingPanel').hide();
if (d.result == "ok") {
/*Your success operations*/
}
else {
//alert(d.msg);
/*Your custom error operations*/
}
},
error: function (xhr, textStatus, errorThrown) {
/*Your error operations*/
//alert(xhr);
$('#formDiv').show();
$('#loadingPanel').hide();
}
});
}
</script>
MVC CODE
[HttpPost]
public ActionResult InsertComment(int Id, ShowViewModel model)
{
if (ModelState.IsValid)
{
// insert
// Yor save method is here
if (!isSuccess()) // your process not succeeded
{
// error
return Json(new { result = "no", msg = /*your error message*/ });
}
//succeeded
return Json(new { result = "ok" });
}
else
{
// error
string error = ModelState.Values.FirstOrDefault(f => f.Errors.Count > 0).Errors.FirstOrDefault().ErrorMessage;
return Json(new { result = "no", msg = error });
}
}

Ajax success function with data-id

I have a feed page that loads an individual feedLikes.php for each post on the feed. Currently, I can like each post and it updates the likes using Ajax. However, every time a like is updated, it returns to the top of the feed. Below is feedLikes.php:
if (isset($_POST['feedID'])) {
$feedID = ($_POST['feedID']);
$findHasUserLiked = $pdo->prepare('SELECT username FROM feedLikes WHERE feedID =? and username=?');
//execute query and variables
$findHasUserLiked->execute([$feedID, $username]);
if ($findHasUserLiked->rowCount() > 0) {
$hasUserLiked = $findHasUserLiked->fetchColumn();
echo <<<_END
<form action="feedLikes.php" id="unlikePostForm$feedID" method="post">
<button type="submit" class="unLikeButton"></button>
<input type="hidden" name="feedIDForUnlike" class="feedIDForUnlike$feedID" value="$feedID">
</form>
_END;
?>
<script type="text/javascript">
$(document).ready(function () {
$('#likePostForm<?php echo $feedID ?>').on('submit', function (e) {
e.preventDefault();
var feedIDLike = $(".feedIDForLike<?php echo $feedID ?>").val();
$.ajax({
url: "feedLikesClicked.php",
cache: false,
type: "POST",
data: {
feedIDLike: feedIDLike
},
dataType: "html",
success: function (html) {
location.reload();
}
});
});
});
</script>
<?php
} else {
echo <<<_END
<form action="feedLikes.php" id="likePostForm$feedID" method="post">
<button type="submit" class="likeButton"></button>
<input type="hidden" name="feedIDForLike" class="feedIDForLike$feedID" value="$feedID">
</form>
_END;
?>
<script type="text/javascript">
$(document).ready(function () {
$('#likePostForm<?php echo $feedID ?>').on('submit', function (e) {
e.preventDefault();
var feedIDLike = $(".feedIDForLike<?php echo $feedID ?>").val();
$.ajax({
url: "feedLikesClicked.php",
cache: false,
type: "POST",
data: {
feedIDLike: feedIDLike
},
dataType: "html",
success: function (html) {
location.reload();
}
});
});
});
</script>
<?php
}
$likesNumber = $pdo->prepare('SELECT count(*) FROM feedLikes WHERE feedID =?');
//execute query and variables
$likesNumber->execute([$feedID]);
$numberOfLikes = $likesNumber->fetchColumn();
print '<div class=numberOfLikes data-id="' . $feedID . '">
<p>' . $numberOfLikes . '</p>
</div>';
}
I'm aware this is because location.reload() is actually reloading all the feedLikes.php pages, not just the one post i have liked. However, i can't seem to figure out what success function i need to use to just update the one post and not take me back to the top of the feed.
I have tried placing everything in feedLikes.php in a div like so:
<div class=allLikesPage data-id="'.$feedID .'">
and then in the ajax success using this line:
$('.allLikesPage[data-id='"+ feedID +"']').load(document.URL + ' .allLikesPage[data-id='"+ feedID +"']');
However that just removes everything and doesn't update. I've also tried the same thing without the data-id amongst other things.

there you go you can see the example here I had to show how the ajax response should be encoded so I added the example on my domain
your PHP file will look like the following, I have omitted the SQL part and added only the logic on how to use json_encode with the arrays hope you find it helpful you can use this code on your local machine to look into how things are working
<?php
$response = array('success'=>false,'likes'=>0);
if(isset($_POST['count'])){
$counter = $_POST['count'];
$response['likes']=$counter+1;
$response['success']=true;
}
echo json_encode($response);
?>
your HTML page is below
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<style>
.feed {
width: 95%;
height: auto;
}
i.fa {
cursor: pointer;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$(".voteup").click(function () {
var curElement = $(this);
console.log(curElement.parent().find('.likes').text());
$.ajax({
url: 'test.php',
dataType: 'json',
data: 'count=' + curElement.parent().find(".likes").text(),
method: 'POST'
}).done(function (data) {
if (data.success) {
curElement.parent().find(".likes").html(data.likes);
} else {
alert('Some Error occoured at the server while liking the feed');
}
});
});
});
</script>
</head>
<body>
<div class="panel panel-default">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">
<div class="feed">
<p>This is my feed can someone like it</p>
<i class="fa fa-thumbs-up voteup" aria-hidden="true" ></i>
<span class="likes">0</span>
<i class="fa fa-thumbs-down votedown" aria-hidden="true" ></i>
<span class="dlikes">0</span>
</div>
<div class="feed">
<p>Another feed item</p>
<i class="fa fa-thumbs-up voteup" aria-hidden="true" ></i>
<span class="likes">0</span>
<i class="fa fa-thumbs-down votedown" aria-hidden="true" ></i>
<span class="dlikes">0</span>
</div>
<div class="feed">
<p>This is my feed can someone like it</p>
<i class="fa fa-thumbs-up voteup" aria-hidden="true" ></i>
<span class="likes">0</span>
<i class="fa fa-thumbs-down votedown" aria-hidden="true" ></i>
<span class="dlikes">0</span>
</div>
<div class="feed">
<p>This is my feed can someone like it</p>
<i class="fa fa-thumbs-up voteup" aria-hidden="true" ></i>
<span class="likes">0</span>
<i class="fa fa-thumbs-down votedown" aria-hidden="true" ></i>
<span class="dlikes">0</span>
</div>
<div class="feed">
<p>This is my feed can someone like it</p>
<i class="fa fa-thumbs-up voteup" aria-hidden="true" ></i>
<span class="likes">0</span>
<i class="fa fa-thumbs-down votedown" aria-hidden="true" ></i>
<span class="dlikes">0</span>
</div>
<div class="feed">
<p>This is my feed can someone like it</p>
<i class="fa fa-thumbs-up voteup" aria-hidden="true" ></i>
<span class="likes">0</span>
<i class="fa fa-thumbs-down votedown" aria-hidden="true" ></i>
<span class="dlikes">0</span>
</div>
</div>
</div>
</body>
</html>
EDIT:
Basically, I am just incrementing the posted variable count you do not have to do that you just need to update likes in the database once you send the ajax call and then count with an SQL query and show the output in the same format I have used.And about the $.parseJSON() you will notice that the ajax call used here has the dataType set to JSON if you have set the dataType you do not need to parse the response otherwise you should use var myData=$.parseJSON(data); and then use like myData.likes myData.success

Remove message from view?

Each time a user clicks un read the div area should remove, below is my HTML and javascript. Whats happening at the moment is that when you click unread it does everything in the back end and not in the front end screen, I think its got to do with my JavaScript line $('#Unreadmessage').closest(".messagearea").remove(); please advise
<div class="alert alert-default alert-dismissible messagearea" role="alert" style="background: rgb(233, 233, 233);">
<button class="close" aria-label="Close" type="button" data-dismiss="alert"><span aria-hidden="true">×</span></button>
<div id="Unreadmessage" class="markmessage" data-messageid="#message.Id">
<p class="small"><i class="fa fa-envelope" aria-hidden="true"></i> Unread</p></div>
<p class="small"><i class="fa fa-calendar" aria-hidden="true"></i> #message.CreatedOn.ToString("dd MMM yyyy")</p>
<p class="small" style="font-weight: bold;"><i class="fa fa-info" aria-hidden="true"></i> Claim ref. #message.CaseNumber</p>
<p>#message.Message More.</p>
</div>
Below is my Javascript
$("#Unreadmessage").click(function () {
var messageId = $(this).data("messageid"); //need to pass this message ID to controller.
var isread = true; //True by default
//I need to pass the messageID to server which is CRM
$.ajax({
url: "#Url.Action("MarkMessage", "Enquiry")", //Need to add my URl here
type: "POST",
data: { messageId: messageId, isread: true }, //Get messageId and isread values
dataType: "json",
success: function (response) {
$('#Unreadmessage').closest(".messagearea").remove();
}
});

If you mean removing the content just like clicking x, then that can also be achieved by just placing data-dismiss="alert" at p(the unread container).
To remove just the unread, it will be best to update the back-end to isread(for example) when More is clicked. You then have to decide whether to display Read or displaying nothing.
<p data-dismiss="alert" class="small"><i class="fa fa-envelope" aria-hidden="true"></i> Unread</p>