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")
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);
});
#AngularJS
I have a table. When I click the DELETE button on any row, the following code always deletes the first one. Where am I wrong? I'll post part of the code
<tr id="riga" ng-repeat='x in cars'>
<td class="dimensione">{{x.id}}</td>
<td class="dimensione">{{x.targaauto}}</td>
<td class="dimensione">{{x.datiintestatario}}</td>
<td class="dimensione">{{x.marca}}</td>
<td><button type="button" class='btn btn-danger btn' data-bs-toggle="modal" data-bs-target="#finestra"> elimina</button></td>
</tr>
<div class="modal fade " id="finestra">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Attenzione</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<h5 class="modal-body">Sei sicuro di voler eliminare questo record?</h5>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" ng-click='rimuovi($index)' data-bs- dismiss="modal">OK</button>
<button type="submit" class="btn btn-secondary" data-bs-dismiss="modal">ANNULLA</button>
</div>
</div>
</div>
</div>
</table>
</tbody>
<script src="bootstrap.js"></script>
</body>
</html>
Function RIMUOVI
$scope.rimuovi=function($index){
$scope.cars.splice($index, 1)
}
When you press the
<button type="button" class='btn btn-danger btn' data-bs-toggle="modal" data-bs-target="#finestra"> elimina</button>
button, you need to add
ng-click="verifyDelete($index)"
which you will save in your directive/controller. That way, when you ask "Are you sure" from the modal, you have the correct row.
Update ng-click='rimuovi($index)' to ng-click='rimuovi()' and use the value saved from verifyDelete
The problem is that you are trying to access the $index variable outside the ng-repeat block. To fix this you should store it to a variable in your controller when you click delete and then show the modal.
Or you can pass the object and then make a filter on the array, but the tow options require you to store the value to a variable.
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
I want to show bootstrap badges like accepted, rejected according to a bool value from the model called status . the problem here is I tried doing it using jquery but it's either all shown or all hide. so I guess it can't read the status values. I opened developer tools and there is no error. I need guidance. I appreciate your help.
#for (int i = 0; i < Model._Requests.Count(); i++)
{
<tr>
<td>
#Html.DisplayFor(x => Model._Requests[i].Account_Name)
</td>
<td>
#Html.DisplayFor(x => Model._Requests[i].LOB)
</td>
<td>
#Html.DisplayFor(x => Model._Requests[i].Operation_Date)
</td>
<td>
#Html.DisplayFor(x => Model._Requests[i].Employee_no)
</td>
<td>
#Html.DisplayFor(x => Model._Requests[i].Fulfillment_Rate)
</td>
<td>
<span name="badge" class="badge badge-warning" id="pend">WTF</span>
</td>
<!--for the accept button-->
#using (Html.BeginForm("Add_Fulfillment_Accept", "TBL_Request", FormMethod.Post))
{
#Html.AntiForgeryToken()
<td>
<button id="btnAccept" class="btn btn-success" name="a_button" type="submit" value="true">Accept</button>
#Html.Hidden("Request_ID", Model._Requests[i].Request_ID)
#Html.Hidden("Status", Model._Requests[i].Status, new { id = "myEdit", value = "" })
</td>
}
<!--for the reject button-->
#using (Html.BeginForm("Add_Fulfillment_Reject", "TBL_Request", FormMethod.Post))
{
#Html.AntiForgeryToken()
<td>
<button id="btnReject" class="btn btn-danger" name="button" data-toggle="modal" data-target="#exampleModal" type="button" value="false">Reject</button>
#Html.Hidden("Request_ID", Model._Requests[i].Request_ID)
#Html.Hidden("Status", Model._Requests[i].Status, new { id = "myEdit", value = "" })
</td>
<!--this is the note modal of the reject button -->
<div class="modal fade" id="exampleModal" 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="exampleModalLabel">New message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
#Html.TextArea("Note", Model._Requests[i].Note, htmlAttributes: new { #class = "form-control" })
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<input type="submit" value="submit" class="btn btn-success" id="finalSave" />
</div>
</div>
</div>
</div>
}
</tr>
}
</tbody>
</table>
script
var flag = $('[name = "Status"]').val();
if (flag === false) {
$('#pend').show();
}
else {
$('#pend').hide();
}
the badge i'm trying to show
<span name="badge" class="badge badge-warning" id="pend">WTF</span>
If status doesnt change afterwards, just set some class dynamically to this item in your cshtml
<span name="badge" class="badge badge-warning #{Model.Status ? "visible" : "invisible"}" id="pend">WTF</span>
If it does change you have to trigger events on that value change
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