I have a problem with my code. I have table with 3 columns: category, subcategories and actions. In third column I keep buttons "Edit" and "Delete". Below part of my code:
<tbody>
#foreach (var category in Model.ToList())
{
<tr>
<td class="hide">#category.Id</td>
<td>#category.Name</td>
<td>
#if (category.Subcategories != null)
{
#foreach (var subcategory in category.Subcategories.ToList())
{
<p>#(subcategory.Id + ". " + #subcategory.Name)</p>
}
}
else
{
<a class="btn btn-primary" style="width:auto"
asp-controller="administrator"
asp-action="CreateSubcategory">
Dodaj podkategorię
</a>
}
</td>
<td>
<a class="btn btn-primary"
asp-controller="administrator"
asp-action="EditCategory"
asp-route-id="#category.Id">
Edytuj
</a>
<button type="button" onclick="getId(this.data-id)" class="btn btn-primary" data-toggle="modal" data-target="#myModal" data-id="#category.Id">
Usuń
</button>
</td>
</tr>
}
</tbody>
When button "Usuń" will be clicked I want show modal window. And this is ok:
<div id="myModal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Usuwanie kategorii</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Czy na pewno chcesz usunąć kategorię ?</p>
</div>
<div class="modal-footer">
<form method="post">
<button id="modalDeleteButton" type="submit" class="btn btn-primary"
asp-controller="administrator"
asp-action="DeleteCategory">
Usuń
</button>
</form>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Anuluj</button>
</div>
</div>
</div>
And finally in modal window user have a two choice - close modal window or "Delete" category. In this place I have to know which row was clicked before modal was showing. How to pass #category.Id to my modal window button "Usuń" and set asp-route-id?
Below my JS/JQuery code:
<script type="text/javascript">
$("#myModal").on('show.bs.modal', function (event) {
$(event.currentTarget).find('asp-route-id').val(getId);
});
function getId(clicked_id) {
return clicked_id;
}
Now I have got return url https://localhost:80888/Administrator/DeleteCategory - without "/7" where 7 is Id.
In <tbody>, the id of this fragment should be sent by #category.Id.
<tbody>
...
<button type="button" onclick="getId(#category.Id)" class="btn btn-primary" data-toggle="modal" data-target="#myModal" data-id="#category.Id">
Usuń
</button>
</td>
</tr>
}
</tbody>
In the js function, the call of the getId function needs to allocate parameters, so it cannot be called directly to get its value. First, set a global variable. Then, since the browser has compiled taghelper into formaction when calling modal, this value needs to be reset here.
<script type="text/javascript">
var clickId;
$("#myModal").on('show.bs.modal', function (event) {
$(event.currentTarget).find('asp-route-id').val(getId);
var btn = $(this).find('#modalDeleteButton');
console.log(clickId)
btn.attr('formaction', '/administrator/DeleteCategory/'+clickId);
});
function getId(clicked_id) {
this.clickId = clicked_id;
}
</script>
Codes of Controller
public class administratorController:Controller
{
public IActionResult DeleteCategory(int id)
{
return Json(id);
}
}
Screenshots of Test
Related
I am trying to delete row when delete button is clicked.
<tbody>
{% for dt in data %}
<tr>
<td>
<i class="fa fa-external-link user-profile-icon"></i>
{{dt.url}}
</td>
<td>{{dt.modified}}</td>
<td>
<button type="button" class="fa fa-trash-o btn btn-danger" data-toggle="modal" data-target="#exampleModal{{forloop.counter}}">Delete</button>
</td>
<div class="modal fade bd-example-modal-lg" id="exampleModal{{forloop.counter}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModal{{forloop.counter}}">DELETE</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>
Are you sure you want to delete this row
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
<button type="submit" class="btn btn-primary">Yes</button>
</div>
</div>
</div>
</div>
</tr>
{% endfor %}
</tbody>
When I click on delete button, modal appear for confirmation and when I click Yes then I have to send the {{dt.url}} for corresponding delete button.
I could use the input tag with hidden type and set the input value with {{dt.url}} . I am not able to check which delete button is clicked. Please help.
Add <input type="hidden" name="deletefile" value="" id="deletefileID"> outside your table.
Now set the value of button as {{dt.url}.
<button type="button" value="{{dt.url}" class="fa fa-trash-o btn btn-danger" data-toggle="modal" data-target="#exampleModal{{forloop.counter}}">Delete</button>
This is to use this value to set value of hidden input tag whenever delete button is clicked.
$('.btn-danger').on('click',function(){
var tmp = this;
tmp = tmp.value;
$('#deletefileID').val(tmp);
});
<a id="wishlisticon" data-toggle="modal" data-target="#wishlist-modal" data-productid="1"></a>
<a id="wishlisticon" data-toggle="modal" data-target="#wishlist-modal" data-productid="2"></a>
<a id="wishlisticon" data-toggle="modal" data-target="#wishlist-modal" data-productid="3"></a>
<a id="wishlisticon" data-toggle="modal" data-target="#wishlist-modal" data-productid="4"></a>
<script>
$('#wishlist-modal').on('shown.bs.modal', function() {
var $el = $("#wishlisticon");
var $username = $el.data('productid');
alert($username);
});
</script>
There are several buttons on a page pointing to the same modal, however different data needs to be passed for each modal.
The data to be passed is saved in data-productid.
When the popup modal opens, I want to use data-productid variable.
The function is working but each time the alert is giving the same productid value (i.e = 1)
The function is not able to understand that it should pickup the corresponding data-productid
As mentioned in the documentation, you can use event.relatedTarget to vary the contents of the modal depending on which button was clicked.
$('#wishlist-modal').on('shown.bs.modal', function(event) {
var $el = $(event.relatedTarget);
var $username = $el.data('productid');
alert($username);
});
DEMO:
$('#exampleModal').on('shown.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever')
alert(recipient)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" >
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="1">Open modal for 1</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="2">Open modal for 2t</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="3">Open modal for 3</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="exampleModalLabel">New message</h4>
</div>
<div class="modal-body">
<h2>Hello World!</h2>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
I have a table with several columns. Each row has an edit button.
If the user clicks on it, a modal view opens. The user can enter some values and send these via AJAX to my controller.
My problem is that I have no idea how to transfer to my JS function which particular edit button the user has actually clicked in the table.
In the past I had an edit button in each row:
<td><a th:href="'/edit/' + *{person.getName()}" class="btn-sm btn-success"
role="button">Edit</a></td>
But this led me to a new HTML view where the user could edit. With my new UI I want really only to go with the modal.
But since JS/AJAX has no idea about the whole table it seems to me like a totally wrong approach to me. Moreover I am pretty new to JS/AJAX
Currently I call the JS function like this:
<button type="button" class="btn btn-primary"
id="subscribe-email-form" onclick="updateModal()">Save
</button>
What can solve my Problem?:
If I could just give a parameter to updateModal it would work but since I call the modal view with id="myModal" by the edit button with data-target="#myModal" I cannot transfer any id.
Here is my JS and what I want is to find the correct parameter for the field oldID
Thank you a lot in advance!
function updateModal() {
var newValues = {};
newValues["newName"] = $("#newName").val();
newValues["newAge"] = $("#newAge").val();
newValues["newID"] = $("#newID").val();
var oldID = "???";
$.ajax({
type: "POST",
contentType: "application/json",
url: "/api/edit/oldID",
data: JSON.stringify(newValues),
dataType: 'json',
timeout: 100000,
success: function (data) {
console.log("SUCCESS: ", data);
display("SUCCESS");
resultObj = data.result;
updateContent(resultObj[0].phone);
},
error: function (e) {
console.log("ERROR: ", e);
display("ERROR");
//display(2);
},
done: function (e) {
console.log("DONE");
display("DONE");
enableSearchButton(true);
}
});
}
and the relevant HTML part
<div class="container">
<br>
<h3>Overview</h3>
<br>
<div class="container" id="modal-submit">
<div class="col-12">
<table class="table table-hover">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Age</th>
<th scope="col">ID</th>
</tr>
</thead>
<tbody>
<!--/*#thymesVar id="productList" type="java.util.List"*/-->
<tr id="person" th:each="person : ${elementList}">
<td th:text="${person.getName()}" id="username"></td>
<!--/*#thymesVar id="getTradableBTC" type="java.lang.Double"*/-->
<td th:text="${person.getAge()}" th:id="${person.getName()+person.getAge()}" id="age"></td>
<!--/*#thymesVar id="getTop" type="java.lang.Double"*/-->
<td th:text="${person.getId()} " th:id="${person.getName()+person.getId()}" id="userID"></td>
<td>
<div class="btn-toolbar" role="toolbar">
<!-- Button trigger modal -->
<div class="btn-group mr-2" role="group" aria-label="First group">
<button type="button" class="btn btn-outline-primary btn-sm" data-toggle="modal"
data-target="#myModal">
Edit
</button>
</div>
<div class="btn-group mr-2" role="group" aria-label="Second group">
<button type="button" class="btn btn-outline-danger btn-sm" id="delete">Delete
</button>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<button class="btn btn-primary" type="button" id="addElement">Add Element</button>
<button class="btn btn-light" type="button" id="DeleteAll">Delete all Elements</button>
</div>
</div>
<br>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
data-keyboard="false" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Change data</h5>
<button type="button" class="close" data-dismiss="modal"
aria-label="Close"><span
aria-hidden="true">×</span></button>
</div>
<div class="row">
<div class="col-sm-6">
<div class="modal-body">
<input name="referencia" id="newName" type="text"
class="form-control"
placeholder="Enter new name">
<br>
<input name="referencia" id="newAge" type="text"
class="form-control"
placeholder="Enter new age">
<br>
<input name="referencia" id="newID" type="text"
class="form-control"
placeholder="Enter new id">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light"
data-dismiss="modal">Discard
</button>
<button type="button" class="btn btn-primary"
id="subscribe-email-form" onclick="updateModal()">Save
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<br>
1st: id= must be unique so don't duplicate ids .. person1 , age1 , userID1 for the next person 1 will be 2 and so on.. you can also use class= instead of id=
2nd: If change it to classes .. on edit button click you can use
alert($(this).closest('tr').find('.userID').text());
You can then pass the userID to the modal and get it again when saveEdit
Note: This code'll work if you change id="person" to class="person" same thing with age and userID
Again and Again Don't use same id for more than one element .. delete button has duplicated id .. so you need to change it as well .. and after change id="delete" to class="delete" you can then use
$('.delete').on('click' , function(){
// do ajax things for remove then
$(this).closest('tr').remove();
});
If you append the rows dynamically you'll need to use
$(document).on( 'click' , '.delete' , function(){ /* code here */ }); // use same way with dynamically created element events
I have problem with my modal boostrap seems like not passing parameter to modal. Here is my code:
My view:
#foreach (var item in Model)
{
<tr>
<td>#Html.DisplayFor(modelItem => item.EmployeeId)</td>
<td>#Html.DisplayFor(modelItem => item.Fname) #Html.DisplayFor(modelItem => item.Lname)</td>
<td>#Html.DisplayFor(modelItem => item.PhoneNumber)</td>
<td>#Html.DisplayFor(modelItem => item.Position)</td>
<td>
<a asp-action="Edit" asp-route-id="#item.EmployeeId">Edit</a> |
<button type="button" class="btn btn-danger btn-xs" data-toggle="modal" data-target="#myModal" data-emp-id="#item.EmployeeId"><span class="glyphicon glyphicon-trash" style="vertical-align:middle;margin-top: -5px"></span> Delete</button>
</td>
</tr>
}
My modal:
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Confirm Delete</h4>
</div>
<div class="modal-body">
<p>Are you sure you want to delete invoice number:</p>
<input type="text" name="empID" value=""/>
</div>
<div class="modal-footer">
<form asp-controller="Employee" asp-action="Delete" method="post" class="form-inline" role="form">
<input type="hidden" id="Id">
<button type="submit" class="btn btn-danger"><span class="glyphicon glyphicon-trash" style="vertical-align:middle;margin-top: -5px"></span> Delete</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</form>
</div>
</div>
</div>
My JavaScript:
I think the problem is somewhere in this code but I don't know why.
<script src="./javascript.js" type="text/javascript">
$("button[type='button']").click(function () {
$("#myModal").find("input[type='text']").val($(this).attr("EmpID"));
});
What makes it wrong with my work? Does anyone knows why is not passing the parameter to model?
I'm just a beginner and I have no idea whats going on in my codes.
Any help would be appreciated.
Your button doesn't have an attribute named EmpId. However it does have an attribute named data-emp-id which I assume contains the value you want.
jQuery has a data method for accessing data attributes easily; in short you can get it using $(this).data("emp-id")
I have a Button that gets populated with ever row in the table. I want to be able to put the value of the row "$row[auditID]" and use it in my modal to be able to make this delete button work. The alert pops up, but the Modal won't hide and my delete action doesn't work (doesn't delete the audit).
<a href=\"#\" id=\"$row[auditID]\" class='btn btn-danger btn-xs' role='button' data-toggle='modal' data-target='#question_alert' Title=\"Remove\" >Remove</span> </a>";
<!-- modal pop up for Deleting a audit -->
<div class="modal fade" style="z-index:10000" id="question_alert" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">Audit Delete Confirmation</h4>
</div>
<div class="modal-body"id="myModal1">
<h3>Are you sure you want to <strong>DELETE</strong> this Audit? You will not be able to get it back.</h3>
</div>
<div class="modal-footer">
<form method = "POST">
<input type="button" id="yes_delete" value="Yes " name="deleteaudit" />
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
</form>
</div>
</div>
</div>
</div>
JQuery Script:
<script>
$("#yes_delete").click(function(){
var auditID = this.id;
//alert("delete test");
$.post("edit_audits.php?action=delete&auditID="+auditID,{
function(data){
alert("Audit Deleted");
$('question_alert').modal('hide');
window.location.reload();
}
});
});
</script>
Something like this?
Put your PHP value into the a tag like this:
<a href="#" data-mylink="<?php echo $yourPHPVar; ?>" class='btn btn-danger btn-xs' role='button' data-toggle='modal' data-target='#question_alert' Title="Remove" ><span>Remove</span> </a>
jsFiddle Demo
$('#question_alert').on('shown.bs.modal', function (e) {
var btn = $(e.relatedTarget);
var linked = btn.data('mylink');
$('#audNo').text(linked);
// Or:
// var modal = $(this);
// modal.find('.modal-body h3 span#audNo').text(linked);
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<a href="#" id="bob" data-mylink="Fred" class='btn btn-danger btn-xs' role='button' data-toggle='modal' data-target='#question_alert' Title="Remove" ><span>Remove</span> </a>
<!-- modal pop up for Deleting a audit -->
<div class="modal fade" style="z-index:10000" id="question_alert" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">Audit Delete Confirmation</h4>
</div>
<div class="modal-body"id="myModal1">
<h3>Are you sure you want to <strong>DELETE</strong> Audit number <span id="audNo"></span>? You will not be able to get it back.</h3>
</div>
<div class="modal-footer">
<form method = "POST">
<input type="button" id="yes_delete" value="Yes " name="deleteaudit" />
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
</form>
</div>
</div>
</div>
</div>
I would do something like this
<a href="javascript:void(0)" class='btn btn-danger btn-xs btn-remove' data-id="<?=$row["auditID"]?>" role='button' data-toggle='modal' data-target='#question_alert' Title="Remove" >Remove</span></a>
<!-- modal pop up for Deleting a audit -->
<div class="modal fade" style="z-index:10000" id="question_alert" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">Audit Delete Confirmation</h4>
</div>
<div class="modal-body"id="myModal1">
<h3>Are you sure you want to <strong>DELETE</strong> this Audit? You will not be able to get it back.</h3>
</div>
<div class="modal-footer">
<form method = "POST">
<input type="button" id="yes_delete" value="Yes " name="deleteaudit" />
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
</form>
</div>
</div>
</div>
</div>
And This in The jQuery function. Make sure you put your jQuery script tag at the top of the page for jQuery to load before this function
<script>
var removeId = null;
$(document).ready(function(){
$(".btn-remove").click(function(){
removeId = $(this).attr("data-id");
});
$("#yes_delete").click(function(){
$.ajax({
url: "edit_audits.php",
type: "POST",
data: "action=delete&auditID="+removeId,
success: function(){
$('#question_alert').modal('hide');
window.location.reload();
}
});
}
});
Keep in mind, I have not ran this as I don't have all the data needed. You may have to debug this a little as it was blind coding.