On my bootstrap modal. I am able to select days on each month when select a month.
Problem: When I first load up the bootstrap modal the days do not show straight away for that month. I have to select another month the re-select month I am after to get days.
Question: How am I able to get the days of month to display for the selected month that comes up when modal is open rather than me having to go and select another month first then go back.
Example Code Preview: Click Here Link now updated with working script.
Code HTML
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="page-header">
<h3 class="page-title">Bootstrap Pop Up Modal Date Select</h3>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div class="form-group">
<select name="year" class="form-control">
<option>2015</option>
<option>2016</option>
<option>2017</option>
<option>2018</option>
</select>
</div>
<div class="form-group">
<select name="month" class="form-control">
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
<option value="9">Sept</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
</div>
<div class="form-group">
<select name="day" class="form-control">
</select>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Code JavaScript
$('select[name="month"]').on("change", function() {
var year = $('select[name="year"]').val();
if (year > 0) {
$('select[name="day"]').find("option").remove();
var daysInMonth = new Date(year, $(this).val(), 0).getDate();
for (var i = 1; i <= daysInMonth; i++) {
console.log(i);
$('select[name="day"]').append($("<option></option>").attr("value", i).text(i));
}
}
});
Force the event change after the event init:
$('select[name="month"]').on("change", function() {
var year = $('select[name="year"]').val();
if (year > 0) {
$('select[name="day"]').find("option").remove();
var daysInMonth = new Date(year, $(this).val(), 0).getDate();
for (var i = 1; i <= daysInMonth; i++) {
console.log(i);
$('select[name="day"]').append($("<option></option>").attr("value", i).text(i));
}
}
});
$('select[name="month"]').trigger('change');
The example:
https://jsfiddle.net/xhqj9trd/
Related
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>
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>
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>
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');
});
Is there a known reason why dropdown would not work inside a modal? I am using rails 4 and the dropdown works perfectly fine all over the app except for the modal. Here is how it is rendered
I suspect this might be an issue with javascript, I have tried changing the order of including javascripts in my application.js but nothing would work. Here is my application.js:
//= require bootstrap
//= require jquery/jquery-2.1.1.js
//= require jquery_ujs
//= require turbolinks
//= require cloudinary
//= require jquery.turbolinks
//= require slimscroll/jquery.slimscroll.min.js
//= require bootstrap-sprockets
Has anyone ran into this before? is there a fix for this? I tried searching all over but couldn't find any relevant solution
EDIT: The modal code
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
`enter code here`<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Add Group</h4>
</div>
<div class="modal-body">
<div class="form-group"><label>Class name</label> <input type="name" placeholder="Choose a name for your group" class="form-control"></div>
<div class="form-group"><label>Class name</label> <input type="desc" placeholder="Add a description for your group" class="form-control"></div>
<div class="form-group">
<label class="font-noraml">Select</label>
<div class="input-group">
<select data-placeholder="Select a grade..." class="chosen-select" style="width:350px;" tabindex="2">
<option value="">Select</option>
<option value="Prekindergarten">Prekindergarten</option>
<option value="Kindergarten">Kindergarten</option>
<option value="1st">1st</option>
<option value="2nd">2nd</option>
<option value="3rd">3rd</option>
<option value="4th">4th</option>
<option value="5th">5th</option>
<option value="6th">6th</option>
<option value="7th">7th</option>
<option value="8th">8th</option>
<option value="9th">9th</option>
<option value="10th">10th</option>
<option value="11th">11th</option>
<option value="12th">12th</option>
<option value="Higher Education">Higher Education</option>
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Thanks
I assume you use the jQuery.Chosen plugin. Here's the code:
$(document).ready(function() {
$('#myModal').on('show.bs.modal', function(e) {
console.debug('modal shown!');
$('.chosen-select', this).chosen({width: "350px"});
});
$("#myModal").modal('show');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js">
</script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js">
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css">
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">
×
</span>
</button>
<h4 class="modal-title" id="myModalLabel">
Add Group
</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label>
Class name
</label>
<input type="name" placeholder="Choose a name for your group" class="form-control">
</div>
<div class="form-group">
<label>
Description
</label>
<input type="desc" placeholder="Add a description for your group" class="form-control">
</div>
<div class="form-group">
<label class="font-noraml">
Select
</label>
<div class="input-group">
<select data-placeholder="Select a grade..." class="form-control chosen-select" style="width:350px;" tabindex="2">
<option value="">
</option>
<option value="Prekindergarten">
Prekindergarten
</option>
<option value="Kindergarten">
Kindergarten
</option>
<option value="1st">
1st
</option>
<option value="2nd">
2nd
</option>
<option value="3rd">
3rd
</option>
<option value="4th">
4th
</option>
<option value="5th">
5th
</option>
<option value="6th">
6th
</option>
<option value="7th">
7th
</option>
<option value="8th">
8th
</option>
<option value="9th">
9th
</option>
<option value="10th">
10th
</option>
<option value="11th">
11th
</option>
<option value="12th">
12th
</option>
<option value="Higher Education">
Higher Education
</option>
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-primary">
Save changes
</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">
×
</span>
</button>
<h4 class="modal-title" id="myModalLabel">
Add Group
</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label>
Class name
</label>
<input type="name" placeholder="Choose a name for your group" class="form-control">
</div>
<div class="form-group">
<label>
Description
</label>
<input type="desc" placeholder="Add a description for your group" class="form-control">
</div>
<div class="form-group">
<label class="font-noraml">
Select
</label>
<div class="input-group">
<select data-placeholder="Select a grade..." class="form-control chosen-select" style="width:350px;" tabindex="2">
<option value="">
</option>
<option value="Prekindergarten">
Prekindergarten
</option>
<option value="Kindergarten">
Kindergarten
</option>
<option value="1st">
1st
</option>
<option value="2nd">
2nd
</option>
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-primary">
Save changes
</button>
</div>
</div>
</div>
</div>
Reference: chosen with bootstrap 3 not working properly
your code works in my modal
I assume there is something wrong with styles, not with JS
check styles