Develop Reference

Modal not opening when I click on button

I am trying to display data in the Modal when I click the button. This is the HTML code I wrote everything is looking fine but it won't open the Modal when I click the button. If I put an alert inside the script it popup when I click the button but anything else like the modal is not working. What I am doing wrong?
<tr th:each="course : ${courses}">
<td th:text="${course.courseid}"></td>
<td th:text="${course.name}"></td>
<td th:text="${course.year}"></td>
<td th:text="${course.syllabus}"></td>
<td th:text="${course.semester}"></td>
<td th:text="${course.attendance}"></td>
<td>
<a th:href="#{/courses/getOne/(courseid=${course.courseid})}" class="btn btn-sm btn-success" onclick="openModal()" ><img src="https://i.ibb.co/YcxKhdh/pencil-removebg-preview.png" width="20" /></a>
<script>
function openModal() {
$(document).ready(function(){
event.preventDefault();
var href = $(this).attr("href");
$.get(href, function(course, status){
$(".editForm .courseid").val(course.courseid);
$(".editForm .name").val(course.name);
$(".editForm .year").val(course.year);
$(".editForm .syllabus").val(course.syllabus);
$(".editForm .semester").val(course.semester);
$(".editForm .attendance").val(course.attendance);
});
$("#editModal").modal('show');
});
}
</script>
<div class="editFrom" id="editModal">
<form th:action="#{/courses/editCourse}" method="POST">
<div class="modal" role="dialog">
<div class="modal-dialog">
<div class="modal-content" style="background-color:#383434">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title" id="editModal">Update Course</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<!-- Modal body -->
<div class="modal-body" style="background-color:#383434">
<label for="courseidEdit" class="col-form-label">ID</label>
<input style="background-color:#CDCDCD" type="text" class="form-control" id="courseidEdit" name="courseidEdit" value="" />
<label for="nameEdit" class="col-form-label">Name</label>
<input style="background-color:#CDCDCD" type="text" class="form-control" id="nameEdit" name="nameEdit" value="" />
<label for="yearEdit" class="col-form-label">Year</label>
<input style="background-color:#CDCDCD" type="text" class="form-control" id="yearEdit" name="yearEdit" value="" />
<label for="syllabusEdit" class="col-form-label">Syllabus</label>
<input style="background-color:#CDCDCD" type="text" class="form-control" id="syllabusEdit" name="syllabusEdit" value="" />
<label for="semesterEdit" class="col-form-label">Semester</label>
<input style="background-color:#CDCDCD" type="text" class="form-control" id="semesterEdit" name="semesterEdit" value="" />
<label for="attendanceEdit" class="col-form-label">Attendance</label>
<input style="background-color:#CDCDCD" type="text" class="form-control" id="attendanceEdit" name="attendanceEdit" value="" />
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="submit" class="btn btn-success">Update</button>
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</form>

Hopefully this work.
<tr th:each="course : ${courses}">
<td th:text="${course.courseid}"></td>
<td th:text="${course.name}"></td>
<td th:text="${course.year}"></td>
<td th:text="${course.syllabus}"></td>
<td th:text="${course.semester}"></td>
<td th:text="${course.attendance}"></td>
<td>
<a th:href="#{/courses/getOne/(courseid=${course.courseid})}" class="btn btn-sm btn-success" onclick="openModal()" ><img src="https://i.ibb.co/YcxKhdh/pencil-removebg-preview.png" width="20" /></a>
<script>
function openModal() {
event.preventDefault();
var href = $(this).attr("href");
$.get(href, function(course, status){
$(".editForm #courseidEdit").val(course.courseid);
$(".editForm #nameEdit").val(course.name);
$(".editForm #yearEdit").val(course.year);
$(".editForm #syllabusEdit").val(course.syllabus);
$(".editForm #semesterEdit").val(course.semester);
$(".editForm #attendanceEdit").val(course.attendance);
});
$("#editModal").modal('show');
}
</script>
<div class="modal" id="editModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content" style="background-color:#383434">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title" id="editModal">Update Course</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<!-- Modal body -->
<div class="modal-body" style="background-color:#383434">
<form class="editForm" th:action="#{/courses/editCourse}" method="POST">
<label for="courseidEdit" class="col-form-label">ID</label>
<input style="background-color:#CDCDCD" type="text" class="form-control" id="courseidEdit" name="courseidEdit" value="" />
<label for="nameEdit" class="col-form-label">Name</label>
<input style="background-color:#CDCDCD" type="text" class="form-control" id="nameEdit" name="nameEdit" value="" />
<label for="yearEdit" class="col-form-label">Year</label>
<input style="background-color:#CDCDCD" type="text" class="form-control" id="yearEdit" name="yearEdit" value="" />
<label for="syllabusEdit" class="col-form-label">Syllabus</label>
<input style="background-color:#CDCDCD" type="text" class="form-control" id="syllabusEdit" name="syllabusEdit" value="" />
<label for="semesterEdit" class="col-form-label">Semester</label>
<input style="background-color:#CDCDCD" type="text" class="form-control" id="semesterEdit" name="semesterEdit" value="" />
<label for="attendanceEdit" class="col-form-label">Attendance</label>
<input style="background-color:#CDCDCD" type="text" class="form-control" id="attendanceEdit" name="attendanceEdit" value="" />
</form>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="submit" class="btn btn-success">Update</button>
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
Update:
Adding here, the comments I added on the question.
you don't need document.ready event, because you are opening modal by clicking on the button that means your dom is already ready.
Modal and Form are not in correct hierarchy, Form should be inside Modal, and you should call method .modal('show') on modal instance not on form.
As in comment your data is not reflected in controls, the reason could be $(".editForm .courseid"), $(".editForm .name") etc. are not present in the html. (Updating the answer with correct selectors).

Add data-bs-toggle & data-bs-target, works for bootstrap
<a data-bs-toggle="modal" data-bs-target="#editModal" th:href="#{/courses/getOne/(courseid=${course.courseid})}" class="btn btn-sm btn-success" onclick="openModal()">
<img src="https://i.ibb.co/YcxKhdh/pencil-removebg-preview.png" width="20" />
</a>

Angular 2 upload Image button is refreshing page

I have a html form with two buttons on it:-
[1] One button is used to upload an image file (.jpg)
[2] and the second one is to submit the form.
The problem is that the upload image button seems to be refreshing the page after the method for uploading the image has completed. Below is my html:-
<div class="m-b-18px">
<div class="col-m-12">
<a (click)="readRecipes()" class="btn btn-primary pull-right">
<span class="glyphicon glyphicon-plus"></span>Read Recipes
</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<form [formGroup]="create_recipe_form" (ngSubmit)="createRecipe()">
<table class="table table-hover table-responsive table-bordered">
<tr>
<td>
Name
</td>
<td>
<input name="name" formControlName="name" type="text" class="form-control" required />
<div *ngIf="create_recipe_form.get('name').touched && create_recipe_form.get('name').hasError('required')"
class="alert alert-danger">Name is required
</div>
</td>
</tr>
<tr>
<td>
Description
</td>
<td>
<textarea name="description" formControlName="description" class="form-control" required>
</textarea>
<div *ngIf="create_recipe_form.get('description').touched && create_recipe_form.get('description').hasError('required')"
class="alert alert-danger">
Description is required
</div>
</td>
</tr>
<tr>
<td>
Image
</td>
<td>
<input name="selectFile" id="selectFile" type="file" class="form-control btn btn-success" />
<button type="button" class="btn btn-primary" (click)="uploadImage($event)" value="Upload Image">Upload Image</button>
<input type='hidden' id='image_id' name='img_id' value="6" formControlName="image_id" />
</td>
</tr>
<tr>
<td></td>
<td>
<button class="btn btn-primary" type="submit" [disabled]="!create_recipe_form.valid">
<span class="glyphicon glyphicon-plus"></span> Create
</button>
</td>
</tr>
</table>
</form>
</div>
</div>
My code for the uploadImage method is below:-
uploadImage(e) {
let files = this.elem.nativeElement.querySelector('#selectFile').files;
let formData = new FormData();
let file = files[0];
formData.append('selectFile', file, file.name);
this._imageService.uploadImage(formData)
.subscribe(
image => {
console.log(image);
this.addImageIdToHtml(image)
e.preventDefault();
e.stopPropagation();
},
error => console.log(error)
);
}
As soon as the above method has finished running the page appears to refreshing causing my app to go back to the land page. This is not the behaviour I want. What I actually want is the form page to be retained until the Submit form button is pressed. Can anyone help me please?

Use div tags instead of form tag.
Change the button type as button.
<button type="button">Upload Image</button>
Modify the code as follows.
<div class="m-b-18px">
<div class="col-m-12">
<a (click)="readRecipes()" class="btn btn-primary pull-right">
<span class="glyphicon glyphicon-plus"></span>Read Recipes
</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div [formGroup]="create_recipe_form" (ngSubmit)="createRecipe()">
<table class="table table-hover table-responsive table-bordered">
<tr>
<td>
Name
</td>
<td>
<input name="name" formControlName="name" type="text" class="form-control" required />
<div *ngIf="create_recipe_form.get('name').touched && create_recipe_form.get('name').hasError('required')"
class="alert alert-danger">Name is required
</div>
</td>
</tr>
<tr>
<td>
Description
</td>
<td>
<textarea name="description" formControlName="description" class="form-control" required>
</textarea>
<div *ngIf="create_recipe_form.get('description').touched && create_recipe_form.get('description').hasError('required')"
class="alert alert-danger">
Description is required
</div>
</td>
</tr>
<tr>
<td>
Image
</td>
<td>
<input name="selectFile" id="selectFile" type="file" class="form-control btn btn-success" />
<button type="button" class="btn btn-primary" (click)="uploadImage($event)" value="Upload Image">Upload Image</button>
<input type='hidden' id='image_id' name='img_id' value="6" formControlName="image_id" />
</td>
</tr>
<tr>
<td></td>
<td>
<button class="btn btn-primary" type="button" [disabled]="!create_recipe_form.valid">
<span class="glyphicon glyphicon-plus"></span> Create
</button>
</td>
</tr>
</table>
</div>
</div>
</div>

You should not upload files on Angular folders like (Assets) , cuz it will recompile every time new file added to Angular environment and that will cause you the page refreshment you didn't want.

If you are using button tag inside the form tag, add type="button" inside the button tag.
<button type="button"></button>
This will work perfectly

jQuery's .children() method returns 'undefined'?

In my jQuery code, I want to be able to get the child element within a <tr> element. I have created a jQuery object and named the variable $trElement. However, for some reason calling $trElement.children(".sequence-edit") returns undefined so any further action done on that statement throws an error (since you are invoking a method on an undefined object). I have checked the HTML code of the parent element and it clearly contains a child element with the indicated class name. So why does it not work?
Here is the code I used to debug the issue.
console.log($trElement.html());
console.log($trElement.children(".sequence-edit"));
The first line console.log($trElement.html()); logs:
<td class="sequence-number">#1</td>
<td class="sequence-data">
<form action="editSequence.do" method="POST">
<textarea cols="50" rows="10" name="sequence" class="sequence-data-textarea"></textarea>
<input type="hidden" name="index" value="0">
</form>
</td>
<td class="button-first">
<!-- Element targeting through ".sequence-class" -->
<button type="button" class="btn btn-info sequence-edit center-block display-true">EDIT</button>
<button class="btn btn-info center-block edit-submit display-false" style="display: none;">SUBMIT</button>
</td>
<td class="button-second">
<button type="button" class="btn btn-danger delete-modal-appearance center-block display-true" data-toggle="modal" data-target="#modal-delete-confirmation">DELETE</button>
<button class="btn btn-warning center-block edit-cancel display-false" style="display: none;">CANCEL</button>
</td>
<td>
<input type="checkbox" class="checkbox-delete-selection center-block">
</td>
The second line console.log($trElement.children(".sequence-edit")); logs: undefined

.children() only travels one step into your selector's (trElement) DOM tree, (and those are your <TD>'s, not your <button>).
instead, use .find(".sequence-edit")
https://api.jquery.com/children/
https://api.jquery.com/find/
var $trElement = $("tr");
console.log( $trElement.find(".sequence-edit").html() ); // "EDIT"
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="sequence-number">#1</td>
<td class="sequence-data">
<form action="editSequence.do" method="POST">
<textarea cols="50" rows="10" name="sequence" class="sequence-data-textarea"></textarea>
<input type="hidden" name="index" value="0">
</form>
</td>
<td class="button-first">
<!-- Element targeting through ".sequence-class" -->
<button type="button" class="btn btn-info sequence-edit center-block display-true">EDIT</button>
<button class="btn btn-info center-block edit-submit display-false" style="display: none;">SUBMIT</button>
</td>
<td class="button-second">
<button type="button" class="btn btn-danger delete-modal-appearance center-block display-true" data-toggle="modal" data-target="#modal-delete-confirmation">DELETE</button>
<button class="btn btn-warning center-block edit-cancel display-false" style="display: none;">CANCEL</button>
</td>
<td>
<input type="checkbox" class="checkbox-delete-selection center-block">
</td>
</tr>
</table>

form submit don't recognize dynamically added input (using JavaScript)

I have html code with form:
<tr>
<form action="/some_action/" method="POST" id="send_form" class="test-form">
{% csrf_token %}
</div>
<button type="button" class="btn-add btn btn-info" aria-label="Left Align">
add <span class="glyphicon glyphicon-plus-sign"/>
</button>
</td>
<td>
<div class="courier-date-from-data">
</div>
</td>
<td>
<div class="courier-date-to-data">
</div>
</td>
<td>
<div class="start-km-data">
</div>
</td>
<td>
<div class="end-km-data">
</div>
</td>
<td>
<div class="btn-group">
<button type="button" class="btn btn-options btn-default dropdown-toggle" data-toggle="dropdown"></button>
<ul class="dropdown-menu" role="menu">
<li type="submit" class="btn-options-save"><a onclick="">save</a></li>
<li class="btn-options-cancel"><a onclick="">cancel</a></li>
</ul>
</div>
</td>
</form>
and input templates on the bottom:
<input type="number" class="form-control start-km-template" style="display: none;" name="" id="">
<input type="number" class="form-control end-km-template" style="display: none;" name="" id="">
JavaScript:
var selector2 = "start-km-0";
$( ".start-km-template" )
.clone()
.removeClass("start-km-template")
.css("display","block")
.addClass(selector2)
.attr("id", selector2)
.attr("name", selector2)
.appendTo(".start-km-data");
When I want to submit request (using just input with type="submit"), form don't recognize new input field in form tag.
How to fix this ?

Jquery - Selecting the correct class from a list

I have the following HTML:
<tr id="item-1">
<td class="shopping-cart-quantity">
<div class="product-quantity">
<input id="product-quantity" data-area="item-1" data-product="1" type="text" value="3">
</div>
</td>
</tr>
<tr id="item-2">
<td class="shopping-cart-quantity">
<div class="product-quantity">
<input id="product-quantity" data-area="item-2" data-product="2" type="text" value="3">
</div>
</td>
</tr>
<tr id="item-3">
<td class="shopping-cart-quantity">
<div class="product-quantity">
<input id="product-quantity" data-area="item-3" data-product="3" type="text" value="3">
</div>
</td>
</tr>
The input field uses Twitter Bootstrap Spin and the input id="product-quantity" renders as follows:
<div class="input-group bootstrap-touchspin input-group-sm">
<span class="input-group-btn">
<button class="btn quantity-down bootstrap-touchspin-down" type="button">
<i class="fa fa-angle-down"></i>
</button>
</span>
<span class="input-group-addon bootstrap-touchspin-prefix"></span>
<input id="product-quantity" data-area="item-3" data-product="3" type="text" value="3" readonly="" class="form-control input-sm">
<span class="input-group-addon bootstrap-touchspin-postfix"></span>
<span class="input-group-btn">
<button class="btn quantity-up bootstrap-touchspin-up" type="button">
<i class="fa fa-angle-up"></i>
</button>
</span>
</div>
My goal is to grab the data-area value so that I can apply the correct quantities to the correct product however no matter what I do, it always returns the first item in the table.
Here is my JQuery:
$('.product-quantity').on('click','.input-group',function(){
alert($('.input-group').find('#product-quantity').data("area"));
});

Inside a click handler this is the actual element clicked:
$('.product-quantity').on('click','.input-group',function(){
alert($(this).find('#product-quantity').data("area"));
});
but the actual problem is having duplicate IDs. That is invalid HTML and jQuery can only see the first.
Replace id="product-quantity" with a class and use .product-quantity