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>

How to close only current popup in Javascript and Jquery?

I have a form as a popup and I want to add a cancel button to close current popup. I tried many ways to do it but it is not closing
<form id="overlay_form_uploadGenFile" action="/crm/saveGeneralFile" method="POST" class="overlay_form" style="display:none" enctype="multipart/form-data">
<h1 style="font-size: 2em">Edit uploaded file</h1>
<input type="hidden" name="fileId" value="0"/>
<input type="hidden" name="userId" value="{{userId}}"/>
<span>Category:</span><span id="file-filter-by">Filter by:</span> <select name="fileCategoryTagId" onchange="populatePopupCategories(this);"></select>
<div id="file-category-select"><select name="fileCategoryId" onchange="getShareWithIntegrationServicesForPopup(this.options[this.selectedIndex].value);"></select></div><br/>
Current File: <input type="text" name="filename" class="currentFile"/> (change it to rename the file)<br/><br/>
To replace <input type="file" name="fileData" class="replaceFile" /><br/><br/>
<input type="checkbox" name="editableByHR" class="editableHR"/> Editable by HR
<input type="checkbox" name="sharedWithEmployee" /> Shared With Employee <br/>
Notes <textarea name="notes" class="fileUpdateNotes"></textarea><br/><br/>
<br/>
<div class="integrationServicesContainerHolder">
</div>
<br/>
<div style="display: inline-block;width: 100%">
<div align="left" style="float: left">
<input type="submit" value="Save" align="left" class="submitFileUpdateButton"/>
<input type="button" value="Cancel" onclick="closeFunction" align="left" class="submitFileUpdateButton"/>
</div>
<div align="right" style="float: right">
<input type="submit" value="Delete" align="right" class="submitFileUpdateButton"/>
</div>
</div>
</form>
and the function side is
function closeFunction() {
$('#overlay_form_uploadGenFile').hide();
}
I have tried .dialog('hide') and .modal('hide') as well but still not working. If I try self.closeAll then it is closing all tab. How can I close only this form dialog popup ?
edit: ok I put $('#overlay_form_uploadGenFile').fadeOut(100); and problem is solved almost... I need immediate close because fadeOut is blocking me for calling other functions due to asynchronous calls.

My suggestion would be to use the break function. That will exit the current loop.

Find Value of textarea from closest row of table

I have a button Update in One td I want to fetch value of both textarea of td from same tr.
There are lots of tr so I have to use closest() method to find element. I have tried to find element but it's not working.
HTML :-
<tr>
<td>
<div class="agenda-date">
<div class="dayofmonth color_font_date">2017-05-31</div>
<div class="dayofweek">
Wednesday
</div>
</div>
</td>
<td>
<div class="row margin_two_planner">
<button type="button" class="btn btn-sm btn-primary">AM </button>
<a data-toggle="modal" href="#add_apt_status" class=""><input type="number" value="3" name="" class="number_planner"></a>
<label class="control-label"> 6 </label>
</div>
<div class="row margin_two_planner">
<button type="button" class="btn btn-sm btn-primary">PM </button>
<a data-toggle="modal" href="#add_apt_status" class=""><input type="number" value="4" name="" class="number_planner"></a>
<label class="control-label"> 2 </label>
</div>
</td>
<td style="width: 20%;">
<textarea id="" class="form-control initial_cap appointment_note" required="required" rows="3" name="appointment_note" cols="50" aria-required="true" disabled=""> APT -1 </textarea>
</td>
<td style="width: 20%;">
<textarea id="" class="form-control initial_cap holiday_note" required="required" rows="3" name="holiday_note" cols="50" aria-required="true" disabled=""> Holiday - 1 </textarea>
</td>
<td>
<div class="text-right">
<button type="button" id="" class="btn btn-primary appointment_edit_button">Edit </button>
<button type="button" id="" onclick="planner_note_edit(1)" class="btn btn-md btn-primary appointment_update_button" style="display:none"> Update </button>
<button type="button" id="" class="btn btn-md btn-cancel appointment_cancel_button" style="display:none">Cancel </button>
</div>
</td>
</tr>
Jquery :-
function planner_note_edit(planner_note_id)
{
appointment_note = $(this).closest('td').find(".holiday_note").val();
alert(appointment_note);
}
But I'm not able to fetch value of textarea from closest td.

You should get the textarea from current row.
So, please use .closest('tr')
appointment_note = $(this).closest('tr').find(".holiday_note").val();
Also, you have to pass the clicked button object. this in your function is a reference to the window object.
function planner_note_edit(planner_note_id,event)
{
appointment_note = $(event.target).closest('td').find(".holiday_note").val();
alert(appointment_note);
}
HTML
<button type="button" id="" onclick="planner_note_edit(1,event)" class="btn btn-md btn-primary appointment_update_button" style="display:none"> Update </button>

changing uploaded file in JSP through JavaScript

Can any one give me proper example for changing uploaded file in JSP?
This is my JSP Page code.
<div class="action">
<input type="file" name="files[0]" id="file0" style="float: left" required>
<input type="button" id="btnZoomIn" value="+" style="float: left">
<input type="button" id="btnZoomOut" value="-" style="float: left">
<input type="button" id="btnCrop" value="Crop" style="float: left">
<input type="submit" value="Upload File" style="float: right" />
</div>
<div class="cropped">
</div>
Using JS and CSS i am cropping uploaded image ...
JS
document.querySelector('#btnCrop').addEventListener('click',
function() {
var img = cropper.getDataURL();
document.querySelector('.cropped').innerHTML = '<img name="img123" src="'+img+'">';
})
this cropper.getDataURL() will provide me cropped image but now i am unable to set this image to uploaded file like as a file0 or files[0] to pass it to my servlet. How can i do so?

enable <b></b> <i></i> <u></u> and <br> in textbox

I have created a small text redactor, but, the problem is that when i'm clicking post button to post in mysql, all my text redactions( etc.) disappear, i mean html code! Here is my code:
<script type="text/javascript">
function formatText(el,tag){
var selectedText=document.selection?document.selection.createRange().text:el.value.substring(el.selectionStart,el.selectionEnd);// IE:Moz
var newText='<'+tag+'>'+selectedText+'</'+tag+'>';
if(document.selection){//IE
document.selection.createRange().text=newText;
}
else{//Moz
el.value=el.value.substring(0,el.selectionStart)+newText+el.value.substring(el.selectionEnd,el.value.length);
}
}
</script>
<?php
//$maxlength = '9';
echo (
'<div class="enterNews">
<img style="float:left; width:1px; vertical-align:middle" src="icons/whiteHack.png">
<img style="float: left; padding:12px; width:20px; vertical-align:middle" src="icons/pencil.png">
<form enctype="multipart/form-data" name="changer" method="post" action="index.php">
<input class="enterNewsText" name="subject" id="subject" placeholder="'.$entersmallnews_lang.'"
type="text" size="65" maxlength="149" onFocus="this.value='.$blank.'" />
<img style="float: right; padding:10px; width:20px; vertical-align:middle" src="icons/pic.png">
<div class="biggerNew">'); ?>
<textarea onkeyup="textAreaAdjust(this)" style="overflow:hidden" class="enterNewsTextBig" name="news" value="Enter big news" id="markItUp" >Enter Big news here...</textarea><br>
<input type="button" value="Bold" onclick="formatText (news,'b');" />
<input type="button" value="Italic" onclick="formatText (news,'i');" />
<input type="button" value="Underline" onclick="formatText (news,'u');" />
<?php
echo('
<input class="video" name="video" id="video" placeholder="Youtube video link"
type="text" size="65" maxlength="149" />');
<div class="postcontainer"><input class="postFontan" type="Submit" name="submit" id="submit" value="'.$post_lang.'" /></div>
</div></div></form>

Your problem seems to be that tag is undefined this means that it will throw an error. If you are in chrome click inspect element console log then you will probably see a ton of errors