We Keep Coding

Problems updating bootstrap 4 model

I'm developing an app in Spring Boot with JSP in frontend. I have the following problem:
I have a table with different rows. I can click a button to update every row if I want. When I click in one row and change some data all works fine. The problem is when I click in one row, close or save this modal and following I open another row and edit again. The modal is good but when I save, I receive 2 POST to update the row behind and the actually row.
I don't use nothing strange... Probably I need to "clean" the modal when I close or save?
One of my modals (this happends in all table with modal to update the row)
Html/JSP:
<!-- UPDATE DISP MODAL -->
<div id="updateDispModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<form id="updateDispForm" class="needs-validation">
<div class="modal-header">
<div class="modal-title">
<h5 id="modalTitle">
<spring:message code="shares.displacement.update.btn" />
</h5>
</div>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-12 col-md-6">
<div class="form-group">
<label for="activityCenter" class="col-form-label"><spring:message code="shares.displacement.table.activity.center" /></label>
<select id="activityCenter" name="activityCenter" class="form-control" required>
<option disabled selected="selected">
<spring:message code="shares.displacement.table.activity.center" />
</option>
<c:forEach items="${teamLeaders}" var="teamLeader">
<option value="${teamLeader.userId}">
<spring:message code="${teamLeader.name} ${teamLeader.surnames}" />
</option>
</c:forEach>
</select>
</div>
</div>
<div class="col-sm-12 col-md-6">
<div class="form-group">
<label for="displacementDate" class="col-form-label"><spring:message code="shares.displacement.table.total.time" /></label>
<input id="displacementDate" name="displacementDate" type="datetime-local" class="form-control" required>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-6">
<label for="manualHours" class="col-form-label"><spring:message code="shares.displacement.total.time" /></label>
<input type="time" class="form-control" id="manualHours" name="manualHours">
</div>
<div class="col-sm-12 col-md-6">
<label for="roundTrip" class="col-form-label"><spring:message code="shares.displacement.round.trip" /></label>
<input type="checkbox" class="form-control" id="roundTrip" name="roundTrip" style="width: 20px">
</div>
</div>
<div class="row">
<div class="col">
<div class="form-group">
<label for="observations" class="col-form-label"><spring:message code="shares.displacement.observations" /></label>
<textarea id="observations" name="observations" class="form-control" rows="6"></textarea>
</div>
</div>
</div>
<input type="hidden" class="form-control" id="projectId" name="projectId">
</div>
<div class="modal-footer clearfix">
<div class="w-100">
<div class="float-left">
<button type="button" class="btn btn-sm" data-dismiss="modal"><spring:message code="cerrar" /></button>
</div>
<div class="float-right">
<button id="updateDispBtn" type="button" class="btn btn-sm btn-success"><spring:message code="save" /></button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- /CREATE MODAL -->
JavaScript:
$('#updateDispBtn').click(function () {
$.ajax({
type: "PUT",
url: "/shares/displacement/" + id,
data: $('#updateDispForm').serialize(),
success: function(msg) {
$('#dTableSignings').DataTable().ajax.reload();
showNotify(msg, 'success');
},
error: function(e) {
showNotify(e.responseText, 'danger');
}
});
$('#updateDispModal').modal('hide');
});

Finally, the user Swati help me to solve this problem. I need to unbind the button before clicking event: button onclick function firing twice
Thanks!

Passing content from <textarea> to api controller

I'm trying to pass content from a form (in a modal) to an api_controller. But I can't get the text out of my <textarea>... even with a simple alert
//Simple HTML-BOOTSTRAP form
<div class="modal-dialog modal65resp">
<div class="modal-content">
<!-- modal-header -->
<div class="modal-header">
<h4>New File</h4>
</div>
<!-- modal-body -->
<div class="modal-body">
<form id="newfileform" class="form-horizontal">
<!-- filename -->
<div class="form-group">
<label for="filename" class="col-sm-2 control-label">FileName:</label>
<div class="col-sm-10">
<input name="filename" type="text" class="form-control" id="filename" placeholder="FileName">
</div>
</div>
<!-- TxtArea -->
<div class="form-group">
<label for="txtarea1" class="col-sm-2 control-label">Text:</label>
<div class="col-sm-10">
<textarea type="text" name="txtarea1" id="txtarea1"></textarea>
</div>
</div>
<!-- apath -->
<div class="form-group">
<label for="apath" class="col-sm-2 control-label">Absolute Path:</label>
<div class="col-sm-10">
<input name="savepath" type="text" class="form-control" id="savepath" placeholder="Absolute Path" readonly>
</div>
</div>
</form>
</div>
<!-- modal-footer -->
<div class="modal-footer">
<div class="pull-left">
<div id="info"></div>
</div>
<div class="pull-right">
<a class="btn btn-default " data-dismiss="modal">Cancel</a>
<a class="btn btn-success " onclick="SaveFile()">Save File</a>
</div>
</div>
</div>
</div>
And this is the script I'm trying to get working an a textarea, with CKEditor in use.
//script
<script>
CKEDITOR.replace('txtarea1');
</script>
<script>
function SaveFile()
{
var path = $('#savepath').val()
var filename = $('#filename').val()
var content = $('#txtarea1').val()
alert(content);
}
</script>

You can access your CKEDITOR instance using CKEDITOR.instances.txtarea1 and get the HTML using getData:
CKEDITOR.instances.txtarea1.getData();

JavaScript Pop-Up Dialog Not Being Read by Web Accessibility Screen Reader

I have a project requirement in which the web page I am building in question needs to be read by the JAWS screen reading software, but the client only has access to JAWS 11 as their latest version.
We currently have JavaScript-based pop-up dialogs for many of the forms on the web and right now a big problem is that the JAWS 11 software cannot read the below pop-up text. What is wrong with the pop-up dialog below (in HTML)?
<div class="modal fade" id="EditContentModal" tabindex="-1" role="dialog" aria-labelledby="editContentDialogTitle"
aria-hidden="true" title="Edit Content Pop-up Dialog Window" aria-describedby="editContentDialogTitle">
<div class="modal-dialog" >
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" value="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="editContentDialogTitle">Edit: Content ID <span id="lblContentid"></span></h4>
</div>
<div class="modal-body">
<div class='row'>
<div class='col-md-8'>
<div class='form-group'>
<label for="edit_Contentnumber">Content Number</label>
<input type="text" class="form-control" max-length="20" id="edit_Contentnumber" />
</div>
</div>
</div>
<div class='row'>
<div class='col-md-8'>
<div class='form-group'>
<label for="edit_Educationalinsitution">Educational Insitution</label>
<input type="text" class="form-control" max-length="100" id="edit_Educationalinsitution" />
</div>
</div>
</div>
<div class='row'>
<div class='col-md-8'>
<div class='form-group'>
<label for="edit_TotalAmountforRecovery">Total Amount Available for Recovery</label>
<input type="text" class="money form-control" max-length="10" id="edit_TotalAmountforRecovery" />
</div>
</div>
</div>
<div class='row'>
<div class='col-md-8'>
<div class='form-group'>
<label for="edit_source">Source</label>
<select id="edit_source" class="form-control"></select>
</div>
</div>
</div>
<div class='row'>
<div class='col-md-8'>
<div class='form-group'>
<label for="edit_indemletterdate">Indemnification Letter Date</label>
<input type="text" class="form-control datepicker" id="edit_indemletterdate" />
</div>
</div>
</div>
<div class='row'>
<div class='col-md-8'>
<div class='form-group'>
<label for="edit_Contentreceiveddate">Content Received Date</label>
<input type="text" class="form-control datepicker" id="edit_Contentreceiveddate" />
</div>
</div>
</div>
<div class='row'>
<div class='col-md-8'>
<div class='form-group'>
<label for="edit_site">Site</label>
<select id="edit_site" class="form-control">
</select>
#*<input type="text" class="form-control" max-length="10" id="edit_site" />*#
</div>
</div>
</div>
<div class='row'>
<div class='col-md-8'>
<div class='form-group'>
<label for="edit_status">Status</label>
<select id="edit_status" class="form-control">
</select>
</div>
</div>
</div>
<input type="hidden" id="edit_Contentid" />
<img id="displayBlockUI" alt="Spinner" src="~/Images/loader2.gif" width="32" height="32" style="display:none" />
</div>
<div class="modal-footer">
<button type="button" id="cancel_edit" class="btn btn-default" data-dismiss="modal" value="Close">Close</button>
<button type="button" id="save_edit" class="btn btn-primary" value="Save">Save</button>
</div>
</div>
</div>
</div>

Setting the main content to aria-hidden='true' tells the screen reader to stop reading the content there.
Try using aria-hidden='false'

How are you opening the modal? Because with a tabindex of -1 on the wrapper div, you will only be able to send the screenreader and keyboard focus to the modal via JavaScript. In that case it's best to make moving the focus part of the script which opens the modal.
On the other hand, if it's opened via a link, you can just remove that tabindex attribute altogether and put the id of the wrapper div in the link href, e.g. <a href=#EditContentModal>
Either way, remember to send focus back to where it started when the modal is closed.
Edited to clarify: the tabindex="-1" attribute on your wrapper div is preventing keyboard access. Remove it. See MDN's tabindex reference: a negative value means that the element should be focusable, but should not be reachable via sequential keyboard navigation.

Javascript : how to know which tab is active

In my code i am using six tabs now i want to know which tab is active .one more thing is that each tab call the same function on clicking and i want to check activation tab(either tab1,tab2 ..) on button click which call other function and in that function i want to check active tab below i explain my problem with code
If i say my problem in one line that want to know active tab on clicking button which call javascript function ,function not on tab clicking*
here i m not putting all code of pages but only require code ,Hope you understand my problems and i provide needed code
Thanks in advance
Add.jsp
This is the page on which i am using tabs
<form action="AddInspServlet" method="Post" enctype="multipart/form-data"> <div>
<div id="slider">
<div class="form-step" >
<div class="row">
<div class="form-left">container Number *</div>
<div class="form-right"><input type="text" id="fname" name="contno" class="form-input" onblur="sending(this.value)"/></div>
<div class="form-error"></div>
</div>
<div class="row">
<div class="form-left">Container type *</div>
<div class="form-right"><input type="text" id="lname" name="conttype" disabled="disabled" class="form-input" /></div>
<div class="form-error"></div>
</div>
<div class="row">
<div class="form-left">Inspection type *</div>
<div class="form-right">
<select id="gender" name="insptype">
<option value="0">Select</option>
<option value="Gate In">Gate In</option>
<option value="Gate Out">Gte Out</option>
</select>
</div>
<div class="form-error"></div>
</div>
<div class="row">
<div class="form-left">Place</div>
<div class="form-right"><input type="text" id="places" name="places" class="form-input" /></div>
<div class="form-error"></div>
</div>
</div>
<div class="form-step" >
<div class="form-left1">
<div class="container1">
<ul class="tabs">
<li>Left</li>
<li>Right</li>
<li>Top</li>
<li>Bottom</li>
<li>Front</li>
<li>Rear</li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<div id="hidendiv"></div>
<h2>Left Side</h2>
<div id="leftside">
</div>
<input type="file" name="img1" id="img1" onchange="return ValidateFileUpload('img1')" />
</div>
<div id="tab2" class="tab_content">
<h2>Right Side</h2>
<div id="rightside">
</div>
<input type="file" name="img2" id="img2" onchange="return ValidateFileUpload('img2')" />
</div>
<div id="tab3" class="tab_content">
<h2>Top Side</h2>
<div id="topside">
</div>
<input type="file" name="img3" id="img3" onchange="return ValidateFileUpload('img3')" />
</div>
<div id="tab4" class="tab_content">
<h2>Bottom Side</h2>
<div id="bottomside">
</div>
<input type="file" name="img4" id="img4" onchange="return ValidateFileUpload('img4')" />
</div>
<div id="tab5" class="tab_content">
<h2>Front Side</h2>
<div id="frontside">
</div>
<input type="file" name="img5" id="img5" onchange="return ValidateFileUpload('img5')" />
</div>
<div id="tab6" class="tab_content">
<h2>Rear Side</h2>
<div id="rearside">
</div>
<input type="file" name="img6" id="img6" onchange="return ValidateFileUpload('img6')" />
</div>
</div>
</div>
</div>
<div class="form-right1">
<img src="images/noimg.jpg" height="288px" width="400px" id="blah">
</div>
<div style=" width: 200px; margin-top:225px; margin-left:300px">Remarks: <input type="text" width="100px" name="remark"/></div>
</div>
</div>
</div>
<div class= "ash" style="width:auto; margin-left:35%; float: left;">
<input type="submit" name="btn" id="submit" value="AddInspection" onclick="im()" />
<input type="submit" name="btn" value="Cancel"/>
</div>
</form>
JAVA Script function:
This is the function on which i want to know which tab is active that is defined in above jsp
<script type="text/javascript">
function im()
{
/*alert("calling im function");
var tabname = document.getElementById("tab1");
if(tabname){
alert("tab1 is active");
}else{
alert("tab 1 is not active");
}*/
if($('#img1').val()=="" || $('#img2').val()=="" || $('#img3').val()=="" || $('#img4').val()=="" || $('#img5').val()=="" || $('#img6').val()=="")
{
alert("Please select image");
$('#submit').prop('disabled',true);
}
else
{
$('#submit').prop('disabled',false);
}
}

Try like
$('.tab').click(function(){
var a=$(this).attr('id');
$('#sample').html('Active Tab is'+a);
});
Fiddle

you can assign same class to all tab and bind the click function in document ready, you will get the current object by 'this'.
$('.tab').click(function(){
$(this).val();
});

$('.tab').click(function(){
var x=$(this).prop('id');
$('#lbl').html('Active Tab'+ x);
});

I'm new here but you could add a worthless class to the active tab on click, then on the button click retrieve the id or whatever you want.
jQuery
//edit: added function to add and remove class, replaced text to illustrate
$(function () {
$('.tab_content').click(function () {
$('.tab_content').removeClass('active').text('');
$(this).addClass('active').text('am active');
})
$('#button').click(function () {
$('.tab_content').each(function () {
if ($(this).hasClass('active')) {
alert($(this).attr('id')+" is the active tab");
alert($(this).text()+" is the text");
}
});
});
});
html
<div id='1' class='tab_content'>not</div>
<div id='2' class='tab_content active'>am active</div>
<div id='3' class='tab_content'>not</div>
<div id='4' class='tab_content'>not</div>
<button id='button' style='width:50px; height:50px;'>Click</button>
Here is a working fiddle: http://jsfiddle.net/Lv5VJ/2/
I'm sure there are better ways but hey, I'm trying haha.

Twitter bootstrap input tags not working with Jquery before()

I am using Jquery to clone() a div and change its children's id, one of the children is a Bootstrap-tagsinput.
You can find a Demo here.
After clicking add new run a new div is added but the tags input is uneditable!!
here is my code (and you can view the full code here
):
$('#addrun').click(function () {
var s = $('#run1')
.clone()
.attr('id', '#run' + (++runNum))
.wrap('<div>');
s.find('#tag1').attr('id', 'tag2');
$('#tag2').tagsinput();
$('#addrun').before(s.parent().html());
$(".well").on('click', '.expandbtn', function () {
var $this = $(this).parent();
var $collapse = $this.closest('.RunWell').find('.SystemFiles');
$collapse.collapse('toggle');
});
$('.SystemFiles').collapse('collapse');
});

Try calling .tagsinput() on #tag2 after adding it to the page.
$('#addrun').before(s.parent().html());
$('#tag2').tagsinput();
Edit:
This is probably due to how the TagsInput plugin initializes itself. What I would do is create a template of your empty run container and hide it on the page or load it via JavaScript.
<div class="control-group hide" id="ControlGroupTemplate">
<label class="control-label" for="textarea">Tools :</label>
<input type="text" class="tags" id="tag1" value="Amsterdam,Washington,Sydney,Beijing"
data-role="tagsinput" />
<br />
<div class="SystemFiles" data-role="collapsible">
<!-- File Button -->
<div class="control-group">
<label class="control-label" for="filebutton">OP Customer DLIS files (PUC)</label>
<div class="controls">
<input id="filebutton" name="filebutton" class="input-file" type="file">
</div>
</div>
<!-- File Button -->
<div class="control-group">
<label class="control-label" for="filebutton">OP logup DLIS files (LUP)</label>
<div class="controls">
<input id="file1" name="filebutton" class="input-file" type="file">
</div>
</div>
<!-- File Button -->
<div class="control-group">
<label class="control-label" for="filebutton">OP Producer DLIS files (PUP)</label>
<div class="controls">
<input id="file2" name="filebutton" class="input-file" type="file">
</div>
</div>
<!-- File Button -->
<div class="control-group">
<label class="control-label" for="filebutton">OP well folder</label>
<div class="controls">
<input id="file3" name="filebutton" class="input-file" type="file">
</div>
</div>
<div class="control-group">
<label class="control-label" for="filebutton">Prints</label>
<div class="controls">
<input id="file4" name="filebutton" class="input-file" type="file">
</div>
</div>
</div>
<button class="btn btn-mini link-btn expandbtn" id="exp" type="button">expand toggle</button>
<button class="btn btn-mini btn-primary"><span class="glyphicon glyphicon-arrow-down">
</span>Duplicate</button>
</div>
Then you clone the ControlGroupTemplate and apply the TagsInput method to it.
var s = $('#ControlGroupTemplate')
.clone()
.attr('id', '#run' + (++runNum))
.wrap('<div>');
s.find('#tag1').attr('id', 'tag2');
$('#addrun').before(s.parent().html());
$('#tag2').tagsinput();
I would even use this method to add your initial run to the page in your document.ready() handler.