Angular JS - Problem deleting row from table - javascript

#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.

Related

Variable becoming zero after going to Modal in a web page

I am making a Todo list using HTML, CSS, JS and Bootstrap. Below code adds the task card onto the screen. Each card also contains a delete button to delete that particular task. When delete button is clicked it opens up a Modal for delete confirmation. Problem I am encountering is when I click the delete button it is deleting the first card from the page which has index 0(Here index variable stores the value of index of the task card). But it is working fine if the confirmation modal is not used. So the variable index is becoming zero after it goes into the modal.
itemJsonArray.forEach((element, index) => {
str +=
`<div class="card-group text-sm-start">
<div class="card w-75 mb-3">
<div class="card-header">
<input type="checkbox" class="bigCheckbox" name="checkbox1"> ${element[0]}
<button type="button" class="btn btn-danger delButton" data-bs-toggle="modal" data-bs-target="#delModal" data-bs-whatever="#mdo" ><i class="fa fa-trash"></i> | Delete Task</button>
</div>
<div class="modal" id="delModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Delete Confirmation</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Are you sure to delete?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-danger" onClick="deleted(${index})">Delete</button>
</div>
</div>
</div>
</div>
<div class="card-body">
<p class="card-text">
${element[1]}
</p>
</div>
</div>
</div>`
});
tasklist.innerHTML = str;
I tried to find a way so that the value of index variable does not get set to 0 when it goes to the Modal but couldn't find a way to do so. Can someone provide a solution to do so or some other way to achieve my goal

How to get row value from table when delete button is clicked?

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);
});

JS HTML: Get particular column value after button click

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

JavaScript Passing Parameters to modal ASP.NET Core

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")

What would be the best way to pass a value to a modal?

I'm using Mobile Angular UI and cannot figure out how to pass a value to a modal.
// Button
This button is inside of an ng-repeat="item in vm.items" and needs item to be somehow passed to the modal.
<button class="btn btn-danger pull-right" ui-turn-on="modal">Remove</button>
// Modal
<div class="modal scrollable-content section" ui-if='modal' ui-state='modal'>
<div class="modal-backdrop in"></div>
<div class="modal-dialog">
<div class="modal-content">
<form role="form" name="note" autocomplete="off">
<div class="modal-header">
<button class="close"
ui-turn-off="modal">×</button>
<h4 class="modal-title">Are you sure?</h4>
</div>
<div class="modal-body">
<p>Are you sure you'd like to remove this item?</p>
</div>
<div class="modal-footer">
<button ui-turn-off="modal" class="btn btn-default">Cancel</button>
<button type="submit" ng-click="vm.remove(item); Ui.turnOff('modal')" class="btn btn-primary">Remove</button>
</div>
</form>
</div>
</div>
</div>
</div>
You can write an html tag (item) attribute with a value and read the value
var id = item.attributes['data-id'].value;
on button click, you also call a function like
<button class="btn btn-danger pull-right" ui-turn-on="modal"
ng-click="setItemID(item.itemID)">Remove</button>
And then create the setItemID(itemID) function into the angularjs controller
and put the itemID into a scope variable.
When user will click on the remove button, the setItemID function will be
called and the itemId will be assigned into the scope. Now at the time when
user click "Yes i want to remove this item", then use that defined itemID.
Hope you get your solution. If still have any problem then lets comment.

Categories