We Keep Coding

Cannot Update Bootstrap Modal Forms

I have a CRUD reminder app, and when users right click on a reminder, a context menu pops up. Options include edit, delete, etc. Each reminder has an id, and the context menu button updates based on the reminders id, and passes it to a bootstrap modal form:
JS:
//part of the context menu script
//this function is called when the user right clicks inside of any element with class task
function toggleMenuOn(e) {
if ( menuState !== 1 ) {
menuState = 1;
menu.classList.add( contextMenuActive );
}
let reminder_id = e.target.id
$.ajax({
url: '/ajax/get_reminder/',
data: {
'reminder_id': reminder_id
},
dataType: 'json',
success: function (data) {
let context_btn1 = document.getElementById("context_menu_btn1");
let reminder_pk = data.serialized_reminder.toString();
let reminder_url = "{% url 'update-reminder' 0 %}".replace(/0/, reminder_pk)
context_btn1.className = "update-reminder context-menu__link btn btn-light";
context_btn1.setAttribute('data-id', reminder_url);
change_var(reminder_url)
}
});
}
let context_btn_id = "/update_reminder/0/";
function change_var(new_name) {
context_btn_id = new_name;
}
$(document).ready(function() {
$("#context_menu_btn1").click(function () {
$(this).modalForm({formURL: context_btn_id});
});
});
HTML:
<nav id="context-menu" class="context-menu">
<ul class="context-menu__items">
<li class="context-menu__item">
<button type="button" class="context-menu__link btn btn-light" id="context_menu_btn1" data-id=""><i class="fa fa-edit"></i> Edit</button>
</li>
<li class="context-menu__item">
<button type="button" class="context-menu__link btn btn-light" id="context_menu_btn2" data-id=""><i class="fa fa-times"></i> Delete</button>
</li>
<li class="context-menu__item">
<button type="button"class="context-menu__link btn btn-light" id="context_menu_btn3" data-id=""><i class="fa fa-eye"></i> Share</button>
</li>
</ul>
</nav>
Reminder HTML:
<div>
<h3 class="ml-4">Long-Term Assignments:</h3>
<div class="events-content-section ml-4 mr-3">
{% get_reminder_id user.username as id_reminders %}
{% for reminder_id, long_term_reminder in id_reminders.items %}
<div class="task mb-2" style="display: flex;">
<button type="button" class="view-reminder btn btn-light" data-id="{% url 'view-reminder' long_term_reminder.pk %}" id="{{ reminder_id }}" style="width: 100%;">
<h4 style="float: left;">{{ long_term_reminder.title }}</h4>
</button>
</div>
{% endfor %}
</div>
</div>
As you can see, I have one navigation menu and have buttons that change data-id every time it is shown. The code works the first time, but when I go to edit another reminder it just brings up the modal form for the first reminder. For example, if I were to update a reminder named Test1, and then try to edit Test2, it would bring up the edit form form for Test1.
I think it has something to do with the code not creating a new modalForm every time context_btn_id is updated. As a reference, the code below works, but an individual button is created for each reminder.
$(".view-reminder").each(function () {
$(this).modalForm({formURL: $(this).data('id')});
});
How would I solve this issue? Any help would be appreciated!

You can add a data-id attribute for each reminder in reminders list or table and on navigation click you can get the selected reminder id.

Angular Routing Failure - Modal Pop Up

I'm working in Angular 8. I'm using NG-BOOTSTRAP for styling.
In several of my components I offer the ability to click a delete button on an item, this brings up a modal window with a YES or NO and when YES is clicked, the modal closes and the route appears to refresh, no actual browser refresh - this is what I want. The list is updated correctly and all seems fine. Then, when I try and click on any other route in my navbar they all fail and the page stays where it's at until I refresh the browser page - also, the link in the URL bar isn't updating, which I suspect is causing the pages not to be able to be routed to. Not sure why this behavior is happening. Frustrating too. Looking for some assistance if possible. Thanks.
THIS IS THE HTML TABLE
<tbody>
<tr *ngFor="let client of clients">
<td>{{ client.name | titlecase }}</td>
<td>{{ client.website }}</td>
<td>{{ client.phone }}</td>
<td>{{ client.address.street | titlecase }}, {{ client.address.city | titlecase }}
{{ client.address.state | uppercase }}
{{ client.address.zip }}</td>
<td>
<button class="btn btn-primary" (click)="editClient(client._id)">
<fa-icon [icon]="faEdit"></fa-icon>
</button>
<button class="btn btn-danger ml-3" (click)="open(content, client)">
<fa-icon [icon]="faTrashAlt"></fa-icon>
</button>
</td>
</tr>
</tbody>
----- THIS IS THE MODAL TEMPLATE (SAME HTML PAGE)------
<!-- MODAL TEMPLATE -->
<ng-template #content let-modal>
<div class="modal-header">
<h4 class="modal-title" id="modal-basic-title">Delete Client?</h4>
<button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm">
<button class="btn btn-success mr-3" (click)="deleteClient(modalContent._id)">YES</button>
<button class="btn btn-danger" (click)="modal.close('Close click')">NO</button>
</div>
</div>
</div>
</ng-template>
----- THIS IS THE TS FILE -----
deleteClient(id) {
this._clientService.deleteClient(id).subscribe(
response => {
console.log(response['message']);
// Close the modal window and reload the component
this._modalService.dismissAll();
this.reloadComponent();
},
error => console.log(error['message'])
);
}
///// MODAL FUNCTIONS
open(content, client) {
this.modalContent = client;
this._modalService
.open(content, { ariaLabelledBy: 'modal-basic-title' })
.result.then(
result => {
this.closeResult = `Closed with: ${result}`;
},
reason => {
this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
}
);
}
private getDismissReason(reason: any): string {
if (reason === ModalDismissReasons.ESC) {
return 'by pressing ESC';
} else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
return 'by clicking on a backdrop';
} else {
return `with: ${reason}`;
}
}
///// FUNCTION TO RELOAD PAGE AFTER DELETE /////
reloadComponent() {
this._router.routeReuseStrategy.shouldReuseRoute = () => false;
this._router.onSameUrlNavigation = 'reload';
this._router.navigate(['admin/clients']);
}

Instead of reloading the page you could re-execute the call that binds the results from the backend to your clients var. This is at least a nice separation of sources & routing and can avoid further complications.
Something like:
deleteClient(id) {
this._clientService.deleteClient(id).subscribe(
response => {
console.log(response['message']);
// Close the modal window and reload the component
this._modalService.dismissAll();
this.getClients();
}, error => console.log(error['message'])
});
getClients() {
this._clientService.getClients().subscribe(
response => {
this.clients = response.data;
}, error => console.log(error['message'])
});

Modifying a list in AngularJS

Attempting to make list items clickable without a checkbox. I want those items to to get a strike through when clicked and still have the delete option at the end. This functions properly, but I can't seem to maintain that when I try to make the items clickable. How do I need to modify this code to make it work?
<p class="lead" ng-bind="vm.list.content"></p>
<div class="list-group">
<span data-ng-repeat="item in vm.list.items|orderBy:'name'"
class="list-group-item" ng-class="{strike: item.check}">
<input type="checkbox" ng-model="item.check" ng-click="vm.cross(item)">
<a class="btn btn-default pull-right" ng-click="vm.remove(item)">
<i class="glyphicon glyphicon-trash"></i></a>
<h4 class="list-group-item-heading" ng-bind="item.name + ' - ' + item.priority"></h4>
</span>
</div>
Controllers:
function remove(item){
var removedItem = $scope.vm.list.items.indexOf(item);
$scope.vm.list.items.splice(removedItem, 1);
if (vm.list._id) {
vm.list.$update(successCallback, errorCallback);
} else {
vm.list.$save(successCallback, errorCallback);
}
function successCallback(res) {
$state.go('lists.view', {
listId: res._id
});
}
function errorCallback(res) {
vm.error = res.data.message;}
}
function cross(item){
if (vm.list._id) {
vm.list.$update(successCallback, errorCallback);
} else {
vm.list.$save(successCallback, errorCallback);
}
function successCallback(res) {
$state.go('lists.view', {
listId: res._id
});
}
function errorCallback(res) {
vm.error = res.data.message;}
}

Why not to move the checkbox behavior to the item wrapper? In this case, if click on the trash, the outer click handler will not be triggered because we stop event from further propagation.
<div class="list-group">
<span data-ng-repeat="item in vm.list.items|orderBy:'name'" class="list-group-item" ng-class="{strike: item.check}" ng-click="item.check = true; vm.cross(item)">
<a class="btn btn-default pull-right" ng-click="vm.remove(item);$event.stopPropagation();">
<i class="glyphicon glyphicon-trash"></i>
</a>
<h4 class="list-group-item-heading" ng-bind="item.name + ' - ' + item.priority"></h4>
</span>
</div>
If you want to cross/uncross item by click, you can implement a method like toggleCross and use it instead of "item.check = true" statement:
item.toggleCheck = function() {
this.check = !this.check;
}

JAVA: Deleting a div generated by a for loop

How do you delete a div that is generated by a for loop? I have this code that generates divs:
EDIT: I have tried the changes of #Andrew Liberio but what happened is that my applicant divs have scattered all over the place. This is the new code and the script as well. Notice how I had put the ending semicolon of the for loop in order to get put the the index in the ajax. (Not seen in the code block for some reason but it goes like this >/script> <%}%>
<% ApplicantDAO applicantDAO = new ApplicantDAO();%>
<% for (int i = 0; i < applicantDAO.viewApplicant().size(); i++) {%>
<div class="column">
<div class="col-sm-3 col-xs-4">
<div class="list-group">
<a class="list-group-item active">
<img src = "th_1x1.jpg" class = "img-responsive" alt = "Responsive Image" width = "100%" height ="100">
<h4 class="list-group-item-heading" id="guardName<%=+i%>" id="guardName<%=+i%>"><%=applicantDAO.viewApplicant().get(i).getApplicantFirstName() + " "%>
<%=applicantDAO.viewApplicant().get(i).getApplicantLastName()%></h4>
</a>
<a class="list-group-item">
<p class="list-group-item-text" id="applyingFor<%=+i%>" id="applyingFor<%=+i%>"><%=applicantDAO.viewApplicant().get(i).getApplyingFor()%></p>
</a>
<a class="list-group-item" data-toggle="modal" href="#moreDetails<%=+i%>">
<button class="btn btn-primary btn-lg btn-block" id="moreDetails">More Details</button>
</a>
<a class="list-group-item">
<button type="button" class="btn btn-default" aria-label="Left Align">
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-default" aria-label="Left Align">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
</a>
<script>
$(".delete").on("click", function () {
var id = $(this).attr("delete<%=applicantDAO.viewApplicant().get(i).getApplicantID()%>"); //get the id of the row
$.post("url_to_servlet_responsible_to_exclude_item", {
tId: id,
someOtherData: "anyData"
}).done(function () {
//if everything went ok,
//delete the div
$("div#" + id).remove();
});
})
</script>
But I dont know how to delete it at the same time delete it at the database. I use a jsp and servlet. This is my code for delete:
public boolean rejectApplicant(Applicant RejectedApplicant) {
try {
DBConnectionFactory myFactory = DBConnectionFactory.getInstance();
Connection conn = myFactory.getConnection();
String query = "delete from applicant where applicantID = ?";
PreparedStatement pstmt = conn.prepareStatement(query);
int rows = pstmt.executeUpdate();
conn.close();
pstmt.close();
return true;
} catch (SQLException ex) {
Logger.getLogger(ApplicantDAO.class.getName()).log(Level.SEVERE, null, ex);
}
return false;
}
I think that the same logic applies when transferring the values of the div to the database. The page is an applicant page where applicants are screened then if they do not pass, they will be removed and when they are accepted, the values will be passed to the database. Please suggest on what should I do. I already searched javascript and jquery but I just dont understand the terms like nodes etc. Any help or leads would be appreciated. Thank you!

You could pass an id to each div or/and to each button as #LAROmega suggested.
<div class="column" id="<%=applicantDAO.viewApplicant().get(i).getApplicantId()">
<div class="col-sm-3 col-xs-4">
...
<button type="button" class="btn btn-default delete" aria-label="Left Align" id="<%=applicantDAO.viewApplicant().get(i).getApplicantId()">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
Then, you could use this script to delete the row using AJAX.
$(".delete").on("click", function(){
var id = $(this).attr("id"); //get the id of the row
$.post("url_to_servlet_responsible_to_exclude_item", {
tId: id,
someOthetData: "anyData"
}).done(function(){
//if everything went ok,
//delete the div
$("div#" + id).remove();
});
})

First, I think you should not use the function on("click" in a loop.
You should use class delete for each button that you want to delete.
<button type="button" class="btn btn-default delete" data-id="<%=applicantDAO.viewApplicant().get(i).getApplicantID()%>" aria-label="Left Align">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
Outside of the loop, you call function on click
$(".delete").on("click", function () {
var id = $(this).attr("data-id"); //get the id of the row
$.post("url_to_servlet_responsible_to_exclude_item", {
tId: id,
someOtherData: "anyData"
}).done(function () {
//if everything went ok,
//delete the div
$("div#" + id).remove();
});
})

How to add many functions in ONE ng-click?

I've be looking for how to execute this but I can't find anything related so far, :(
I could nest both functions yes but I'm just wondering if this is possible?
I'd like to do this literally:
<td><button class="btn" ng-click="edit($index) open()">Open me!</button></td>
My JS code at the moment:
$scope.open = function () {
$scope.shouldBeOpen = true;
};
$scope.edit = function(index){
var content_1, content_2;
content_1 = $scope.people[index].name;
content_2 = $scope.people[index].age;
console.log(content_1);
};
I'd like to call two functions with just one click, how can I do this in angularJS?
I thought it'd be straight forward like in CSS when you add multiple classes...but it's not :(

You have 2 options :
Create a third method that wrap both methods. Advantage here is that you put less logic in your template.
Otherwise if you want to add 2 calls in ng-click you can add ';' after edit($index) like this
ng-click="edit($index); open()"
See here : http://jsfiddle.net/laguiz/ehTy6/

You can call multiple functions with ';'
ng-click="edit($index); open()"

A lot of people use (click) option so I will share this too.
<button (click)="function1()" (click)="function2()">Button</button>

The standard way to add Multiple functions
<button (click)="removeAt(element.bookId); openDeleteDialog()"> Click Here</button>
or
<button (click)="removeAt(element.bookId)" (click)="openDeleteDialog()"> Click Here</button>

Try this:
Make a collection of functions
Make a function that loops through and executes all the functions in the collection.
Add the function to the html
array = [
function() {},
function() {},
function() {}
]
function loop() {
array.forEach(item) {
item()
}
}
ng - click = "loop()"

Follow the below
ng-click="anyFunction()"
anyFunction() {
// call another function here
anotherFunction();
}

<!-- Button trigger modal -->
<button type="button" (click)="open(content)" style="position: fixed; bottom: 0; right: 130px;"
class="btn col-sm-1 btn-Danger" >
Reject
</button>
<ng-template #content let-modal>
<div class="modal-header">
<h4 class="modal-title" id="modal-basic-title">Profile update</h4>
<button type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss('Cross click')"></button>
</div>
<div class="modal-body">
<div class="mb-3">
<label class="bg-danger text-light" for="Reject">Reason For reject</label>
<textarea matInput placeholder=" Reject" [(ngModel)]="asset_note">{{note}}</textarea>
</div>
</div>
<div class="modal-footer">
<!-- -->
<button type="button" class="btn btn-outline-dark" (click)="reject();modal.close('Save click') ">Save</button>
</div>
</ng-template>
**.ts file**
open(content: any) {
this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title'}).result.then((result) => {
this.closeResult = `Closed with: ${result}`;
}, (reason) => {
this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
});
}
private getDismissReason(reason: any): string {
if (reason === ModalDismissReasons.ESC) {
return 'by pressing ESC';
} else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
return 'by clicking on a backdrop';
} else {
return `with: ${reason}`;
}
}
close()
{
this.getDismissReason(ModalDismissReasons.ESC);
}

Which of the following is best practice (option1 or option2)
<button (click)="removeAt(element.bookId); openDeleteDialog()"> Click Here
<button (click)="removeAt(element.bookId)" (click)="openDeleteDialog()"> Click Here

ng-click "$watch(edit($index), open())"