I have a dropdown menu in Bootstrap with a daterangepicker input.
I have this code
$(document).on('click', 'body .dropdown-menu', function (e) {
e.stopPropagation();
});
$('#filter-expired-range').daterangepicker();
and when i click on daterangepicker calendar day input- everything is close (daterangepicker calendar and dropdown menu)
Update 1.
html code :
<div class="btn-group mea-filters-block">
<span style="float: left; padding-top: 12px;" class="mea-info"></span>
<button type="button" class="btn dropdown-toggle btn-filter btn-link" data-toggle="dropdown"
title="Filter">
<i class="fa fa-filter"></i></button>
<ul class="dropdown-menu dropdown-menu-right">
<form id="docExportFilter">
<div class="row">
<div class="col-sm-6" style="border-right: 1px solid #ddd">
<p class="filterslabel"><i
class="fa fa-calendar-check-o"></i>
<span>Validation date</span>
</p>
<div class="form-group">
<input type="checkbox" class="" name="validDocuments" id="filter-valid">
<label for="filter-valid">Valid documents</label>
</div>
<div class="form-group">
<input type="checkbox" class="" name="expired" id="filter-expired">
<label for="filter-valid">Expired documents</label>
</div>
<div class="form-group" id="filter_expired_range_container" style="display: none">
<label for="filter-expired">Expired between dates
<input style="width: 100%" readonly placeholder="Any" type="text"
class="form-control" name="expired_range" id="filter-expired-range">
</label>
</div>
</div>
<div class="col-sm-6">
<p class="filterslabel"><i
class="icon-checkmark-circle2"></i> <span>Compliance</span>
</p>
<div class="form-group">
<input type="checkbox" name="compliant" class="" id="filter-compilant">
<label for="filter-compilant">Compliant documents</label>
</div>
<div class="form-group">
<input type="checkbox" name="remedialActionsRequired" class="" id="filter-remedial">
<label for="filter-remedial">Remedial required</label>
</div>
</div>
</div>
<div class="row pt-15" style="border-top: 1px solid #ddd">
<div class="col-sm-12 text-right">
<a class="mea-submit btn btn-primary"><i class="fa fa-check"></i>Apply</a>
<button class="btn btn-default" type="reset"><i class="fa fa-times"></i> Cancel</button>
</div>
</div>
</form>
</ul>
</div>
UPDATE 2.
Here is minimal example - i see problem is requirejs - if i test it without requirejs - it work ...
example with requirejs (don't work - select date close parent dropdown)
https://jsfiddle.net/5wtLqxk9/2/
example without requirejs (work fine)
https://jsfiddle.net/5wtLqxk9/1/
$("div.daterangepicker").click( function(e) {
e.stopPropagation();
});
Note: place after daterangepicker()
https://jsfiddle.net/5wtLqxk9/4/
Similar to:
event bubbling in Jquery datepicker
This works for me.
$('#your-id-here').daterangepicker({
opens: 'left'
}, function(start, end, label) {
console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
}).click(function(e) {
$("div.daterangepicker").click( function(e) {
e.stopPropagation();
});
});
Related
This question already has answers here:
How to use radio on change event?
(11 answers)
Closed 3 years ago.
I have several groups of radio buttons with the same name.
I want to get the id of the clicked radio button in the change event. There are several answers related to this question but they all return the id of the checked one but what i want is clicked radio id.
Updated
Here is my code:
$('input[type=radio][name=SltOptionPane]').change(function () {
debugger;
//here i want to get the clicked id of the radio
var selectedValue = $("input[name=SltOptionPane]");
alert(selectedValue);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-6 col-sm-4 col-xs-12" data-toggle="buttons" id="26Panel">
<div class="col-md-6">
<label class="btn btn-chackbox checkbox-lable-styles active" style="margin-bottom: 5px;">
<span class="glyphicon glyphicon-ok glyphicon-white"></span><input type="radio" name="SltOptionPane" value="27" id="27" autocomplete="off"><text> طبيعي</text>
</label>
</div>
<div class="col-md-6">
<label class="btn btn-chackbox checkbox-lable-styles" style="margin-bottom: 5px;">
<span class="glyphicon glyphicon-ok glyphicon-white"></span><input type="radio" name="SltOptionPane" value="29" id="29" autocomplete="off"><text> ضعيف</text>
</label>
</div>
</div>
<div class="col-md-6 col-sm-4 col-xs-12" data-toggle="buttons" id="27Panel">
<div class="col-md-6">
<label class="btn btn-chackbox checkbox-lable-styles active" style="margin-bottom: 5px;">
<span class="glyphicon glyphicon-ok glyphicon-white"></span><input type="radio" name="SltOptionPane" value="30" id="30" autocomplete="off"><text> طبيعي</text>
</label>
</div>
<div class="col-md-6">
<label class="btn btn-chackbox checkbox-lable-styles" style="margin-bottom: 5px;">
<span class="glyphicon glyphicon-ok glyphicon-white"></span><input type="radio" name="SltOptionPane" value="31" id="31" autocomplete="off"><text> ضعيف</text>
</label>
</div>
</div>
Please help ,Thanks in advance
You should use this to refer the current element.
Try $(this).attr('id');
$('input[type=radio][name=SltOptionPane]').change(function () {
debugger;
//here i want to get the clicked id of the radio
var selectedValue = $(this).attr('id');
alert(selectedValue);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-6 col-sm-4 col-xs-12" data-toggle="buttons" id="26Panel">
<div class="col-md-6">
<label class="btn btn-chackbox checkbox-lable-styles active" style="margin-bottom: 5px;">
<span class="glyphicon glyphicon-ok glyphicon-white"></span><input type="radio" name="SltOptionPane" value="27" id="27" autocomplete="off"><text> طبيعي</text>
</label>
</div>
<div class="col-md-6">
<label class="btn btn-chackbox checkbox-lable-styles" style="margin-bottom: 5px;">
<span class="glyphicon glyphicon-ok glyphicon-white"></span><input type="radio" name="SltOptionPane" value="29" id="29" autocomplete="off"><text> ضعيف</text>
</label>
</div>
</div>
<div class="col-md-6 col-sm-4 col-xs-12" data-toggle="buttons" id="27Panel">
<div class="col-md-6">
<label class="btn btn-chackbox checkbox-lable-styles active" style="margin-bottom: 5px;">
<span class="glyphicon glyphicon-ok glyphicon-white"></span><input type="radio" name="SltOptionPane" value="30" id="30" autocomplete="off"><text> طبيعي</text>
</label>
</div>
<div class="col-md-6">
<label class="btn btn-chackbox checkbox-lable-styles" style="margin-bottom: 5px;">
<span class="glyphicon glyphicon-ok glyphicon-white"></span><input type="radio" name="SltOptionPane" value="31" id="31" autocomplete="off"><text> ضعيف</text>
</label>
</div>
</div>
You can do it with jquery on click input (on input you can also put class):
$(document).on('click', 'input', function(){
alert(this.id);
});
Here is working fiddle: https://jsfiddle.net/m7r5z9g1/
At first give all radio buttons same class like "MyRadio" then create the following event.
$('.MyRadio').off('click').on('click', function(){
alert(this.attr('id'));
});
You can also use the prop method in order to retrieve the id of the selected item.
Here below is snippet of the Onchange function :
$('input[type=radio][name=SltOptionPane]').change(function () {
debugger;
var currentValue = $(this).prop("id");
alert(currentValue);
});
Here is the link for the demonstration:
More Insights :
The .prop() method gets the property value for only the first element in the matched set. It returns undefined for the value of a property that has not been set, or if the matched set has no elements. To get the value for each element individually, use a looping construct such as jQuery's .each() or .map() method.
Reference :
I have a ejs(html) file, and There is a div class called "card".
What I want to do is that, if I click the button("Click me") then,
card-header(header1) has to be changed(before --> after) with colored back-ground.
However when I clicked the button, only the back-ground color was changed (excluding the header). need your help.
function save() {
var x = document.getElementById("header1");
x.style.backgroundColor="#cfe8f9";
x.setAttribute("value", "After");
}
<div class="col-sm-6">
<div class="card">
<div class="card-header" id="header1" style="font-weight:bold;">before</div>
<div class="card-body">
<form action="" method="POST">
<input type="hidden" id="input_flag" value="">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">noID</span>
</div>
<input type="text" id="notiSeq_1" name="notiSeq_1" class="form-control" value="" style="background-color:#FFFFFF">
<div class="input-group-append">
<span class="input-group-text">
<i class="fa fa-sort-numeric-asc"></i>
</span>
...
...
...
<button type="button" class="btn btn-primary" onclick ="save()">Click me</button>
</div> //end of col-sm-6
Update the innerHTML
function save() {
var x = document.getElementById("header1");
x.style.backgroundColor="#cfe8f9";
x.innerHTML = "After";
}
<div class="col-sm-6">
<div class="card">
<div class="card-header" id="header1" style="font-weight:bold;">before</div>
<div class="card-body">
<form action="" method="POST">
<input type="hidden" id="input_flag" value="">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">noID</span>
</div>
<input type="text" id="notiSeq_1" name="notiSeq_1" class="form-control" value="" style="background-color:#FFFFFF">
<div class="input-group-append">
<span class="input-group-text">
<i class="fa fa-sort-numeric-asc"></i>
</span>
...
...
...
<button type="button" class="btn btn-primary" onclick ="save()">Click me</button>
</div> //end of col-sm-6
When I click duplicate it duplicates the row fine, but when I click it again I get another 2, then 4 etc, how can I stop this from happening and just clone one div on each click...
Jquery:
<script>
$(".clonable-button").bind('click', function(e){
e.preventDefault();
var section = $(this).data('clone');
var parent = $('[data-id="' + section + '"]');
var sequence = 0;
if(!$(this).data('last')) {
sequence = $(parent).find('.cloneable').last().data('id');
} else {
sequence = $(this).data('last');
}
$(this).data('last', ++sequence);
$(parent).append(parent.html());
});
$('.clone-wrapper').on('click', '.clone-remove',function(){
var parent = $(this).parents('.cloneable');
$(parent).remove();
});
</script>
html:
<div class="clone-wrapper" data-id="skill">
<div class="row cloneable" data-id="0">
<div class="col-md-9">
<div class="form-group">
<label for="skill_name_0">Skills and Qualifications Titles </label>
<input id="skill_name_0" placeholder="ex : PHP, WordPress" name="skill[0][name]" type="text" class="form-control" value="">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="skill_percentage_0">Job Position </label>
<input id="skill_percentage_0" placeholder="ex : 90" name="skill[0][percentage]" type="text" class="form-control" value="">
</div>
</div>
<div class="col-md-12 text-right clone-remove" data-last="">
<div class="btn btn-danger btn-sm" data-clone="skill">
<i class="fa fa-times"></i> Remove Skill </div>
</div>
</div>
</div>
<div class="white-space-20"></div>
<div class="row text-right">
<div class="col-md-12">
<div class="btn btn-default btn-sm clonable-button" id="skill">
<i class="fa fa-plus"></i> Add Skill </div>
</div>
</div>
I just want the following code duplicated once on each click
<div class="row cloneable" data-id="0">
<div class="col-md-9">
<div class="form-group">
<label for="skill_name_0">Skills and Qualifications Titles </label>
<input id="skill_name_0" placeholder="ex : PHP, WordPress" name="skill[0][name]" type="text" class="form-control" value="">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="skill_percentage_0">Job Position </label>
<input id="skill_percentage_0" placeholder="ex : 90" name="skill[0][percentage]" type="text" class="form-control" value="">
</div>
</div>
<div class="col-md-12 text-right clone-remove" data-last="">
<div class="btn btn-danger btn-sm" data-clone="skill">
<i class="fa fa-times"></i> Remove Skill </div>
</div>
</div>
The problem is in this line:
var parent = $('[data-id="' + section + '"]');
Each time you append new block with the same data-id number of elements that match this selector increases. So to avoid this you have make the selector more specific. Like:
var parent = $('[data-id="' + section + '"]:last');
Also there is a jQuery method to clone the element. So change your line from:
$(parent).append(parent.html());
to:
parent.append(parent.clone());
That will fix the issue.
You are binding the click event multiple times somehow, You should either use a delegated event handler or use the off method like below.
$(".clonable-button").off('click').on('click', function(e){
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have a datepicker placed inside a popover. Datepicker not working. Has any one did like this
<div class="col-sm-4">
<button tabindex="0" class="btn btn-primary" role="button" data-toggle="popover" data-trigger="click"
data-placement="bottom" data-container="body" data-html="true" id="login"><i class="fa fa-calendar"></i> - <i class="fa fa-calendar"></i>
</button>
<div id="popover-content" class="hide">
<form role="form" method="post">
<div class="form-group">
<label>Start time?</label>
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" placeholder="Start Date time of event"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="form-group">
<label>End time?</label>
<div class='input-group date' id='datetimepicker2'>
<input type='text' class="form-control" placeholder="End Date time"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="form-group">
<button class="btn btn-primary btn-block">Search between dates</button>
</div>
</form>
</div>
</div>
JS
$('#datetimepicker1').datetimepicker();
$('#datetimepicker2').datetimepicker();
$("#datetimepicker1").on("dp.change", function (e) {
$('#datetimepicker2').data("DateTimePicker").minDate(e.date);
});
$("#datetimepicker2").on("dp.change", function (e) {
$('#datetimepicker1').data("DateTimePicker").maxDate(e.date);
});
$("[data-toggle=popover]").popover({
html: true,
content: function() {
return $('#popover-content').html();
}
});
http://jsfiddle.net/J7nDz/43/
Can someone spot the error?
You can achieve with following approach but the way you are trying, I've doubts it may not be possible with bootstrap datetimepicker, reason moment.js throws following error
SyntaxError: unreachable code after return statement
Put HTML content inside popover trigger button data-content='' and remove class="hide" from HTML and also you have to use a popover callback function or bootstrap popover event listener, your choice.
<div class="col-sm-4">
<button tabindex="0" class="btn btn-primary" role="button" data-toggle="popover" data-trigger="click" data-placement="bottom" data-container="body" data-html="true" id="PopS"
data-content='
<div id="popover-content">
<form role="form" method="post">
<div class="form-group">
<label>Start time?</label>
<div class="input-group date" id="datetimepicker1">
<input type="text" class="form-control" placeholder="Start Date time of event" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="form-group">
<label>End time?</label>
<div class="input-group date" id="datetimepicker2">
<input type="text" class="form-control" placeholder="End Date time" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="form-group">
<button class="btn btn-primary btn-block">Search between dates</button>
</div>
</form>
</div>'>Date</button>
</div>
With Callback Function
$(document).ready(function () {
var showPopover = $.fn.popover.Constructor.prototype.show;
$.fn.popover.Constructor.prototype.show = function () {
showPopover.call(this);
if (this.options.showCallback) {
this.options.showCallback.call(this);
}
}
$("#PopS").popover({
html: true,
showCallback: function () {
$('#datetimepicker1').datetimepicker();
$('#datetimepicker2').datetimepicker();
}
});
});
Fiddle with callback function
With popover event listener
$(document).ready(function () {
$("#PopS").popover({
html: true
}).on('shown.bs.popover', function () {
$('#datetimepicker1').datetimepicker();
$('#datetimepicker2').datetimepicker();
});
});
Fiddle with event listener
I have created a character count function which calculates the length of characters use use and displays them at each key up. it works fine out of a loop but when I add it to the fore each loop for adding new rows it doesn't work.
Code below shows everything within the loop, the notes and description section is the classes which include the character count:
<div class="row">
<div class="span18">
<h2 class="PIMS3">Task Details</h2>
<div id="taskList">
<div class="row">
<div class="span1">Dept</div>
<div class="span1">Skill</div>
<div class="span3">Description</div>
<div class="span3">Notes</div>
<div class="span6">Budget</div>
</div>
<div data-bind="foreach: tasks">
<div class="row">
<div class="span1"><select class="span1" data-bind="options: $parent.departmentList, value: department"></select></div>
<div class="span1"><select class="span1" data-bind="options: skillList, value: skill"></select></div>
<div class="span3"><input class="span3" name = "description" id="textAreaDescriptions" data-bind="value: description" placeholder="Max Character Limit 50" maxlength="50" >
<div id="char_namb2" style="padding: 4px; float: left; font-size: 12px; text-align: left;">Character Count:50:0</div>
</div>
<div class="span3"><input class="span3" name = "notes" id="textAreaNote" data-bind="value: notes" placeholder="Max Character Limit 150" maxlength= "150">
<div id="char_namb3" style="padding: 4px; float: left; font-size: 12px; text-align: left;">Character Count:150:0</div>
</div>
<div class="span2" data-bind=" visible: skill() != 'RES' ">Hours: <input class="span1" placeholder="Hours" data-bind="value: budget_hours"</input></div>
<div class="span2" data-bind=" visible: skill() != 'RES' ">Cost Rate: <input class="span1" placeholder="Cost Rate" data-bind="value: budget_cost_rate"</input></div>
<div class="span2" data-bind=" visible: skill() != 'RES' ">Charge Rate: <input class="span1" placeholder="Charge Rate" data-bind="value: budget_charge_rate "</input></div>
<div class="span2" data-bind="visible: skill() == 'RES'">Other Cost: <input class="span1" placeholder="Other Cost" data-bind="value: budget_other_cost"</input></div>
<div class="span2" data-bind="visible: skill() == 'RES'">Other Charge: <input class="span1" placeholder="Other Charge" data-bind="value: budget_other_charge"</input></div>
</div>
</div>
</div>
<div class="row">
<div class="span2 offset1">
<a class="btn btn-success" data-bind="click: addTask"><i class="icon-plus icon-white"></i> Add Task</a>
</div>
</div>
<div class="row"> </div>
<div class="row">
<div class="span2 offset1">
<a class="btn btn-primary" data-bind="click: save,visible: isValid() && !isSubmitting() "><i class="icon-ok icon-white"></i> Create Job</a>
<a class="btn btn-info" data-bind="click: save,visible: isSubmitting"><i class="icon-ok icon-white"></i> Saving ... ...</a>
</div>
</div>
</div>
</div>
</div>
this snippet includes the script for character count function which is placed outside the loop.
<script>
$(function(){
$('#textAreaDescriptions').keyup(function(){
var charsno2 = new $(this).val().length;
$('#char_namb2').html("Character Count:50 : " + charsno2);
});
});
<script>
$(function(){
$('#textAreaNote').keyup(function(){
var charsno3 = $(this).val().length;
$('#char_namb3').html("Character Count:150 : " + charsno3);
});
});
Does anybody know how I could get this to work?
Thanks!
In spite of the fact that you are using Javascript instead of PHP, try puting your functions inside a
$( document ).ready()
I think you are binding the event to the inputs before the DOM's load
****Edit****
I think that there are several issues with your code. Check this link https://jsfiddle.net/ivan0013/fmu9bj35/1/ where you have an example working.