How to prevent triggering the calendar, not only by clicking on the icon but on the whole tag? In this case if I'm trying to do this directly without children selector it's doesn't working.
My implementation
HTML:
<div id="datetimepicker1" class="input-append date">
<input type="text" disabled="true"></input>
<span class="add-on disabled">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</div>
JS:
$(function () {
$('#datetimepicker1').datetimepicker();
$(".disabled").children().bind('click', function () {
return false;
});
});
EDIT : http://jsfiddle.net/vg4xa/1/
You have to set your event handler before datepicker init, and stop event propagation :
$(function () {
$('.disabled').bind('click', function(e){
e.stopImmediatePropagation();
});
$('#datetimepicker1').datetimepicker();
});
I know that this answer will not work for the subject, but in the issue description, there is a datepicker and next code works for me to prevent datepicker opening on span or calendar icon click
if (disable) {
$('#datetimepicker1').datepicker('_detachEvents');
$('#datetimepicker1').datepicker('_detachSecondaryEvents');
} else {
$('#datetimepicker1').datepicker('_attachEvents');
$('#datetimepicker1').datepicker('_attachSecondaryEvents');
}
Related
I have text field like below which is bydefault disabled.
<input disabled="" type="text" name="name" class="inputUsrProfile" placeholder="Add a description about your self..">
And the anchor tag is below
<i class="fa fa-pencil" id="clickPencil" aria-hidden="true"></i>
On the click of the anchor tag I want the textfield to get enabled.
Below is the jquery I am trying which doesn't seem to work.
$("#clickPencil").prop('disabled', false);
Here's the fiddle.
You need to get the input field not the i tag so change the selector to get the input field. Although bind click event using click() method change the property when click event fired.
$("#clickPencil").click(function() {
$(".inputUsrProfile").prop('disabled', false)
});
$("#clickPencil").click(function() {
$(".inputUsrProfile").prop('disabled', false)
});
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input disabled="" type="text" name="name" class="inputUsrProfile" placeholder="Add a description about your self..">
<a id="clickPencil" href="#"><i class="fa fa-pencil" aria-hidden="true"></i></a>
Updated fiddle try with click function .and change with $('input')
$('#clickPencil').click(function(){
$("input").prop('disabled', false);
})
Or try with className
$(".inputUsrProfile").prop('disabled', false);
You need click event of i
$("#clickPencil").click(function(){
$("input.inputUsrProfile").prop('disabled', false);
});
Fiddle
$("#clickPencil").click(function() {
$('.inputUsrProfile').prop('disabled', function(i, v) { return !v; });
});
This will work like a toggle, check it.
I created a search form, which opens a search field when clicked on search-icon.
So I've turned off the search function so the icon is clickable.
var $searchBtn = $search.find('button');
$searchBtn.on('click', function(e) {
e.preventDefault();
});
But now if I return the search function when I've clicked on the search icon
$('.icon-search'.on('click', function(e)
{
$searchBtn.unbind('click');
});
I can't click on the cross anymore to close the searchfield because it has got the search function again.
So my question is:
is it possible to put on my .icon-cross a e.preventDefault(); on click without it completing the searchfunction first?
HTML Code:
<form method="GET" action="search" class="form-inline">
<div class="input-group">
<input type="search" name="query" id="query" class="form-control" placeholder="'Uw zoekopdracht...">
{/if}">
<span class="input-group-btn">
<button class="btn btn-default icon-search" type="submit"></button>
</span>
</div>
</form>
You use the same button to do two things. You options are to use two different buttons and toggle their display. No worrying about what code is attached since they are separate.
You can add one click event that can handle both tasks
$searchBtn.on('click', function(e) {
e.preventDefault();
if ($(this).hasClass("icon-search")) {
//search logic
} else {
//cross logic
}
});
or you can use event delegation to handle the clicks (which is doing the above check under the covers);
$searchBtn.parent()
.on('click', ".icon-search", function(e) {
//search logic
})
.on('click', ".icon-cross", function(e) {
//cross logic
});
I have a form, and I'm trying to use a dropdown as a message displayer. When I focus out the input, the dropdown displays. The problem is that it closes right after showing.
<form method="post">
<input id="name" type="text" name="name">
<li class="dropdown list-unstyled">
<a class="dropdown-toggle" role="button"data-toggle="dropdown"></a>
<ul class="dropdown-menu">
My message.
</ul>
</li>
</form>
Jquery
$(document).ready(function (){
$('#name').focusout(function () {
$('.dropdown-toggle').dropdown('toggle');
});
});
I couldn't figure out why it closes yet. Strange thing is that if I click outside and drag the mouse just a little before releasing it, the dropdown doesn't close.
Thanks!
fiddle https://jsfiddle.net/syp7ynqm/
edit: the problem seems to be that the dropdown detects the outside click right after it shows, so it closes (as it should) but I would like to disable this function, only for this first click, so that on the focus out the message would be displayed correctly.
You can just go with the show method. Fiddle.
$(document).ready(function (){
$('#name').focusout(function () {
$('.dropdown-menu').show();
});
});
And your html should look like the following because li should be a child of ul so you would want to go with the folling html.
<form method="post">
<input id="name" type="text" name="name">
<div class="dropdown">
<div class="dropdown-menu">
My message.
</div>
</div>
</form>
$(document).ready(function (){
$('#name').focusout(function () {
$('.dropdown-menu').toggle();
});
$(document).mousedown(function(){
$('.dropdown-menu').hide();
})
});
Instead of the dropdown method use toggle to show or hide the dropdown.
$(document).ready(function (){
$('#name').focusin(function(){
$('.dropdown-menu').toggle();
});
$('#name').focusout(function(){
$('.dropdown-menu').toggle();
});
});
This results in the dropdown showing up when the input is focused and disappearing when you click away.
Check this fiddle : https://jsfiddle.net/e59xb38p/40/
$(document).ready(function (){
var $dropDownMenu = $('.dropdown-menu');
// displays as default
$dropDownMenu.css("display", "block");
$('#name')
.focusin(function () {
$dropDownMenu.css("display", "none");
})
.focusout(function () {
$dropDownMenu.css("display", "block");
});
});
I have a text field which should hide when it loses focus. I also have a button. The problem is, when you click the button, the text field first loses focus, which moves the button, preventing it from receiving the click event.
HTML:
<div>
<p> Focus on the text field, and then click the button </p>
<div id="hideMeOnFocusOut">
<input type="text" id="focusMeOut" autofocus>
<br><br><br>
</div>
<button id="clickMe">click me</button>
</div>
JS:
$(function() {
$('#focusMeOut').on('focusout', function(e) {
$('#hideMeOnFocusOut').hide();
});
$('#clickMe').on('click', function(e) {
alert('clicked!');
});
});
http://jsfiddle.net/u86ycf5e/
The button should still move. But it should also receive the click event.
Add a container with a height around the element you are hiding: Fiddle
.container {
height: 50px;
}
HTML
<div class="container">
<div id="hideMeOnFocusOut">
<input type="text" id="focusMeOut" autofocus>
<br>
<br>
<br>
</div>
</div>
Alternatively, you could make the element hide after a short delay via setTimeout like so:
$('#focusMeOut').on('focusout', function (e) {
setTimeout(function() {
$('#hideMeOnFocusOut').hide();
}, 250);
});
Other fiddle
Try ...
$('#focusMeOut').on('focusout', function(e) {
$('#hideMeOnFocusOut').hide();
if (e.relatedTarget.id==="clickMe") {
$("#clickMe").trigger('click');
}
});
This will check to see if the button was clicked and fire it ...
Hide the text box instead with:
$('#focusMeOut').on('focusout', function(e) {
$(this).hide(); //this line changed
});
and optionally set the height of the <div> to prevent button moving with this CSS:
#hideMeOnFocusOut {
height:80px;
}
You might want to rename your IDs more appropriately now.
http://jsfiddle.net/u86ycf5e/4/
I have an instance where my datepickers won't work by button click, so I figure find the closest input and .click() or .focus() (for it's datepicker, since the same field is to be affected). For the sake of this demo, from the button/icon click - find the closest input and focus/click on it. If correct, the border will glow blue. http://jsfiddle.net/81tvr0op/
HTML
<table>
<tr>
<th>
<div class="input-group date">
<input type="text" />
<span class="input-group-btn">
<button class="btn default" type="button">
<i class="fa fa-calendar"></i>
Icon
</button>
</span>
</div>
</th>
</tr>
</table>
jQuery
...something like
$(".date > span > button").on('click', function (e) {
e.preventDefault();
$(this).closest("th").find("input:text").click();
});
...right?
If I understand correctly, you are trying to place the cursor into the input box when the user clicks the button.
To do that, you should use .focus() instead of .click().
Working example:
http://jsfiddle.net/81tvr0op/1/
From your jsfiddle, something like this should work.
$("button").on('click', function (e) {
e.preventDefault();
$(this).parent().siblings(0).focus();
});
Or, give your input an id and do something like:
$("button").on('click', function (e) {
e.preventDefault();
$("#dateInput").focus();
});