show data-id to <select> boostrap modal - javascript

i have problem to show data-id to with bootstrap. it won't show the value dynamically when i click the button, and needs to refresh page between 2-3 times to change the value (refresh).
here is my code
<a class="btn btn-warning btn-xs" href="#modal-form-edit" rel="button" data-toggle="modal" data-id="1" > Edit</a>
<a class="btn btn-warning btn-xs" href="#modal-form-edit" rel="button" data-toggle="modal" data-id="1" > Edit</a>
modal
<div id="modal-form-edit" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
.....
</div>
<div class="modal-body">
<div class="item form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Book list <span class="required">*</span></label>
<div class="col-md-6 col-sm-6 col-xs-12">
<select class="select2_single form-control" tabindex="-1" data-width="100%" name="book" id="book" required="required">
<option id="book" value="" selected="selected"></option>
<option id="book" value="1" >book 1</option>
<option id="book" value="2" >book 2</option>
</select>
</div>
</div>
</div>
</div>
</div>
js
<script>
$('#modal-form-edit').on('show.bs.modal', function(e) {
var books-id = $(e.relatedTarget).data('id');
$("#book").val(books-id);
});
</script>
any wrong code at there?
thanks before for any help (sorry for my English)

Try like this once,
$('.atag').on('click', function(e) {
var books = $(this).attr('data-id');
$("#book").val(books);
});
I have given saperate class, and variable declaration is wrong ,- is considered as minus use _ instead.
DEMO

Try:
$('#modal-form-edit').on('show.bs.modal', function(e) {
var books_id = $(this).data('id');
$('.select2_single option[value="'+books_id+'"]').attr('selected','selected');
});

Related

Select box change event not appear inside modal bootstrap when reopen

i created select box change event when option in select box is "reschedule" inside bootstrap modal.
first time pop up modal change event is working. but when modal is closed and reopened change event is not running when select "reschedule" in select box.
how to solve this problem
this is script for change event select box
const date = document.getElementById('date');
$('#selector').on('change', function() {
var divClass = $(this).val();
$(".op").hide();
$("." + divClass).slideDown('medium');
const value = document.getElementById('selector').value;
date.required = (value == "Reschedule");
});
.op {
display: none;
}
<div class="row" style="margin-left:4px;">
<div class="col-md-12">
<div class="form-group row">
<label class="col-sm-2 col-form-label" for="user_uid">Action</label>
<div class="col-sm-10">
<select name="agree" class="form-control" id="selector" required>
<option value="" disabled selected>Select Action..</option>
<option value="Accepted">Accept</option>
<option value="Reschedule">Reschedule</option>
<option value="Rejected">Reject</option>
</select>
</div>
</div>
</div>
</div>
<div class="row op Reschedule" style="margin-left:4px;">
<div class="col-md-12">
<div class="form-group row">
<label class="col-sm-2 col-form-label " for="user_uid">Reschedule Datetime</label>
<div class="col-sm-10">
<input class="form-control" id="date" name="date" type="datetime-local" min="<?php echo date(" Y-m-d "); ?>T00:00">
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
i use another file to save the contents of the modal and open using javascript to send variabel using GET.
this is script for modal javascript
<a data-toggle="modal" data-target="#viewdata" data-id="' . $row['id_cdd'] . '" class="viewda dropdown-item" aria-label="Left Align" style="cursor:pointer" data-backdrop="static" data-keyboard="false" title="View"> View </a>
<div id="viewdata" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Candidate Detail</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<input type="hidden" class="form-control" id="idview" name="idview"></input>
<div class="modal-body body-view">
</div>
</div>
</div>
</div>
<script>
$(document).on("click", ".viewda", function() {
var myBookId = $(this).data('id');
var myBook2 = $(this).data('session');
$(".body-view #idview").val(myBookId);
$.ajax({
url: "cdd_inc_modal.php?view=" + myBookId+"&session="+myBook2,
cache: false,
success: function(result) {
$(".body-view").html("");
$(".body-view").html(result);
}
});
});
</script>

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!

Dynamically setting the 'selected' attribute of Select list in Bootstrap Modal

I have a Bootstrap modal that is triggered by a link that passes in a number of parameters which displays a select list for users to choose a rating between 1 and 5. This part is working well, but I now need to have the select menu display the value for the current rating instead of defaulting to 1 which is the first value in the list.
Here's my code:
$(document).ready(function() {
$('#editRatingModal').on('show.bs.modal', function(e) {
recID = $(e.relatedTarget).data('rec-id');
clickedlink = e.relatedTarget;
currentRating = clickedlink.getAttribute('currentRating');
contactName = clickedlink.getAttribute('contactName');
modalTitle = 'Edit Rating for ' + contactName;
$('#editRatingModalTitle').html(modalTitle);
$("#projectContactRecID").val(recID);
//hide error/success alerts if previously showing
$("#ajaxError1").hide();
$("#ajaxSuccess1").hide();
$("#callContact1").prop("disabled", false);
console.log(recID);
console.log(currentRating);
console.log(contactName)
});
}); //]]>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<table class="table table-striped table-hover table-bordered">
<tbody>
<tr>
<td>Click Starts to Edit Rating</td>
<td>
<a href="#" contactName="Fred Simpson" currentRating="4" data-toggle="modal" data-rec-id="175091" data-target="#editRatingModal">
<div><span class="stars-container stars-80">★★★★★</span></div>
</a>
</td>
</tr>
</tbody>
</table>
<!-- Modal -->
<div class="modal fade" id="editRatingModal" tabindex="-1" role="dialog" aria-labelledby="editRatingModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="editRatingModalTitle">Edit Rating</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="editRatingFrom" action="projectDetails.php" method="post" role="form">
<input type="hidden" name="recid" value="16103">
<input type="hidden" name="projectContactRecID" value="" id="projectContactRecID">
<input type="hidden" name="action" value="editRating">
<div class="form-group">
<label for="newRating">Select Rating</label>
<div class="input-group col-xs-8">
<select class="form-control" name="newRating" id="newRating">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save Rating</button>
</div>
</form>
</div>
</div>
</div>
The currentRating variable contains the value that I want to add the selected attribute to in the select list, but not sure how to achieve this?
You can simply set the value to #newRating.
$(document).ready(function() {
$('#editRatingModal').on('show.bs.modal', function(e) {
recID = $(e.relatedTarget).data('rec-id');
clickedlink = e.relatedTarget;
currentRating = clickedlink.getAttribute('currentRating');
contactName = clickedlink.getAttribute('contactName');
modalTitle = 'Edit Rating for ' + contactName;
$('#editRatingModalTitle').html(modalTitle);
$("#projectContactRecID").val(recID);
//hide error/success alerts if previously showing
$("#ajaxError1").hide();
$("#ajaxSuccess1").hide();
$("#callContact1").prop("disabled", false);
$('#newRating').val(currentRating) // set the current rating
console.log(recID);
console.log(currentRating);
console.log(contactName)
});
}); //]]>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<table class="table table-striped table-hover table-bordered">
<tbody>
<tr>
<td>Click Starts to Edit Rating</td>
<td>
<a href="#" contactName="Fred Simpson" currentRating="4" data-toggle="modal" data-rec-id="175091" data-target="#editRatingModal">
<div><span class="stars-container stars-80">★★★★★</span></div>
</a>
</td>
</tr>
</tbody>
</table>
<!-- Modal -->
<div class="modal fade" id="editRatingModal" tabindex="-1" role="dialog" aria-labelledby="editRatingModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="editRatingModalTitle">Edit Rating</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="editRatingFrom" action="projectDetails.php" method="post" role="form">
<input type="hidden" name="recid" value="16103">
<input type="hidden" name="projectContactRecID" value="" id="projectContactRecID">
<input type="hidden" name="action" value="editRating">
<div class="form-group">
<label for="newRating">Select Rating</label>
<div class="input-group col-xs-8">
<select class="form-control" name="newRating" id="newRating">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save Rating</button>
</div>
</form>
</div>
</div>
</div>

get the href value from selected option and change the href of the button

I want to get the href value of the selected option so that i can now go to the link that i selected using the button.
Here's my code
<div class="modal fade" id="soa">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Choose the name of student</h4>
</div>
<div class="modal-body">
<div class="col-md-12">
<div class="form-group">
<label class="control-label"><span
class="text-danger"></span> Name of Student</label>
<select name="childNames" class="form-control input-lg" id="childNames" data-size="5">
<option value="" selected disabled></option>
<option value="${pageContext.request.contextPath}/app/billsandpayments/invoice">John Dela Cruz</option>
<option value="${pageContext.request.contextPath}/app/billsandpayments/invoice1">Josh Dela Cruz </option>
<option value="${pageContext.request.contextPath}/app/billsandpayments/invoice2">Jane Dela Cruz</option>
</select>
</div>
</div>
</div>
<div class="modal-footer">
View</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Add a id to =>
<a id="link" href=''><button type="button" class="btn btn-info">View</button></a>
This should work :
$(document).ready(function() {
$("#childNames").on('change', function () {
var ref = document.getElementById("childNames").value;
alert(ref);
$('#link').attr('href', ref);
});
});
jsfiddle example
Here's also the alternative answer. Just add it to your script
<script type="text/javascript" >
jQuery(document).ready(function($) {
$("#childNames").change(function () {
var ref =$(this).find('option:selected').attr('value');
$('#link').attr('href', ref);
});
});
</script>

Bootstrap Modal to appear as error message

So, I have this modal that contains a form and as soon as it hits submit button, another modal should appear as a success message or an error message.
<div class="modal fade" id="events" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" style="background-color:#0A0A1E">
<font color="white">x</font>
<h4><font color="white">ADD EVENT</font></h4>
</div>
<div class="modal-body">
<form id ="massform" method="POST" role="form" action="SAeventUpdate.php">
<div class="form-group">
<label>MASS TYPE</label>
<div class="input-group">
<input class='form-control' list = 'title' required name='title' placeholder= 'Please specify if mass type is unavailable'>
<datalist id='title'>
<option class= 'titl' value="Baptism">Baptism</option>
<option class= 'titl' value="Confirmation">Confirmation</option>
<option class= 'titl' value="Requiem">Requiem</option>
<option class= 'titl' value="Marriage">Marriage</option>
</datalist>
<span class="input-group-addon"><span class="fa fa-bullhorn"></span></span>
</div>
</div>
<div class="form-group">
<label>LANGUAGE</label>
<div class="input-group">
<select class='form-control' required name='language' placeholder= 'Please select language'>
<option value="Cebuano">Cebuano</option>
<option value="English">English</option>
</select>
<span class="input-group-addon"><span class="fa fa-comment-o"></span></span>
</div>
</div>
<button class="btn btn-danger" type="submit">Add Event</button>
</form>
</div>
</div>
</div>
</div>
The form then sends the information to a php file and undergo a condition and and an error message should appear through a modal without closing the previous modal if the action is not possible.
Is this even possible? :)

Categories