I'm trying to create an indicator that pops over whenever the input text is focused. The content of the popover is html.
JS
$('.validate').popover({
html : true,
trigger : 'focus',
content : function() {
return $('#popover-content').html();
}
});
On Change
$('.validate').change(function() {
var eval_me = $('.validate').val();
$('#sample').html(eval_me);
});
The HTML
<div class="input-prepend">
<span class="add-on"><i class="icon-lock"></i></span><input type="text" class="validate" data-placement='right' title="Hello World">
</div>
<div id="popover-content" style="display: none">
<div class="row"><label id="sample">This is your div content</label></div>
</div>
The content inside the label gets updated, but the popover isn't. Dismissing the popover and focusing the input text again (to open it) shows the updated label.
Any help is appreciated :)
Two things: the change event doesn't fire until the input loses focus, you probably want to bind the update code to the keyup event. Second, though that code is updating your sample div, the popover is just getting that data when the popover is triggered; if you want to update the popover's sample div, you need to handle that as part of the keyup event handler. Try changing that event handler like so:
$('.validate').keyup(function() {
var eval_me = $('.validate').val();
$('#sample').html(eval_me);
$('.popover #sample').html(eval_me);
});
and you should be good. Check the fiddle.
Edit: actually playing with it a little, it seems like keyup is a better trigger than keypress, otherwise the update trails the input by one char, but I'm probably just missing something there. Changed the code above accordingly.
Related
If you focus the input then try to click anywhere else the link is gone, good.
But if you focus the input then try to click on the link is gone, but the link didn't work. That's not what I want, I want to be redirected. I have no idea how to achieve this.
document.querySelector('input').addEventListener('blur', () => document.querySelector('a').style.display = 'none')
<input type="text"/>
link
The issue here has nothing to do with the blur event. It's simply a matter of handling click events and based on the source of the click, handling it the right way.
(I've removed the target=_blank code and changed the links to example.com just so the example will work here in the Stack Overflow snippet environment.)
// Get a reference to the search items container
const items = document.querySelector(".searchItems");
// All clicks within the document will bubble here
document.addEventListener('click', function(event){
// Depending on what the source of the click was,
// do the appropriate thing
if(event.target.classList.contains("search")){
// The input was the source of the click
items.classList.remove("hidden"); // Unhide the search items
} else if(!event.target.classList.contains("item")){
// Something other than the input or a link was clicked
items.classList.add("hidden"); // Hide the search items
}
});
.hidden { display:none; }
<input type="text" class="search">
<div class="searchItems hidden">
link<br>
link<br>
link<br>
link<br>
</div>
I have a Side Filter, where a User can fill out some information and filter a Webpage.
I want this menu to appear when clicking a button and disappear when I click outside of it. This is what I currently have to make the Filter disappear once the user clicks outside of it:
$(window).click(function(e) {
if ((!$(e.target).hasClass("filterOverlay")) && (!$(e.target).hasClass("toggleFilterButton"))) {
$('.filterOverlay').hide();
$('.darkBackground').hide();
}
});
This works. However only if the Filter is empty. Because the fun thing is, when I add an Input-Field and click it. Of course Jquery doesn't recognize it as being the Filter and closes it.
What's the best way to go with such a thing? All I find is the solution above, but as pointed out, this doesn't really fit.
Use jQuery blur() Method for when clicking outside of an input.
The blur event occurs when an element loses focus.
CSS
.filter-div {
display: none;
}
HTML
<button type="button" class="btn btn-primary" id="toggleFilter">Filter</button>
<div class="filter-div">
<input type="text" class="form-control" id="filter" placeholder="Filter">
</div>
JS
$('#toggleFilter').on('click', function() {
$('.filter-div').slideToggle();
if ($('.filter-div').css('display') != 'none') {
$('#filter').focus();
}
});
$('#filter').on('blur', function() {
$('.filter-div').slideToggle();
});
Check it out:
JsFiddle
I am attempting to bind a click event after previously unbinding it and I cannot get it to work.
Here is my HTML:
<div class="input-group date">
<input type="text" class="form-control" id="dp1" style="width: 100px; vertical-align: middle" />
<span class="input-group-addon" id="dp1Icon" style="outline-style:none"><img src="<%=context%>/images/calendar-glyph.png"></span>
</div>
The input is actually a bootstrap datepicker component. The span contains a bootstrap glyph that triggers the datepicker to open. I have a radio button group that toggles disabling these like this:
$(".date-wrap input[type='radio']").on("click", function(e){
if ($(e.target).val() == "permanent"){
$("#dp1, #dp1Icon").prop("disabled", true);
$("#dp1Icon").unbind("click"); // Disabled attribute only works on form controls, not spans. So we have to unbind the event
$("#dp1").removeAttr("readonly", "readonly");
}else{
$("#dp1, #dp1Icon, #e3").prop("disabled", false);
$("#dp1Icon").bind("click");
$("#dp1").removeAttr("readonly");
}
});
So, if the value of the radio button they click is "permanent", everything becomes disabled; that works great. Otherwise, I attempt to turn them back on.
The only thing I can think of is that when I try to bind the click event to the glyphicon again, I must define the actual handler that opens the datepicker; like this:
$("#dp1Icon").bind("click", $("#dp1").datepicker('show'));
But all that does is open the datepicker as soon as I click the other radio button. I want it to open only when they click it.
What important piece am I missing here? Does anyone have an idea?
Thanks for any tips.
bind("click") does not magically re-add the event. You need to add it back the event.
$("#dp1Icon").on("click", function(){ $("#dp1").datepicker('show'); } );
You might be better off just setting a flag inside that function and not removing the event.
I'm trying to show a textarea element when I click on an input element. The goal is to show the textarea, but when I click anywhere else, the textarea disappears.If I click anywhere on the textarea, it stays visible.
I saw a similar example of one on stackoverflow --> Link to similar question
The method was to add an addEventListener to the html tag by using document.documentElement, so basically the whole page, but I was wondering if there was an alternative? And is it safe to add an addEventListener to an entire page?
The code to addEventListener to entire page:
document.documentElement.addEventListener('click',clickhandler,false);
I'm not trying to be picky either, but I would like to avoid using a timeout on the element
Besides the code above, I first tried using the click event, and everything works fine, but when I click anywhere else the textarea doesn't disappear.
I then tried the focus/blur events, but when the input loses focus, the textarea disappears.
I was thinking of an if conditional for the click function... but I'm not sure how that would work without adding a click event to the entire page...
JSFiddle : http://jsfiddle.net/LghXS/
HTML\
<input type="text" id="email">
<textarea id="suggestion"></textarea>
CSS
textarea{
display:none;
}
JS
var textarea = document.getElementById('suggestion');
var input = document.getElementById('email');
// Using the Click Event
input.addEventListener('click',function(){
var display = textarea.style.display;
if(display === '' || display === 'none'){
textarea.style.display='inline-block';
}else{
textarea.style.display='none';
}
});
// Using the Focus and Blur
/*
input.addEventListener('focus',function(){
textarea.style.display='inline-block';
input.addEventListener('blur',function(){
textarea.style.display='none';
});
});
*/
Sooo, any ideas?
I want to disable my div with image and click event that event does not call. I try do it with KO:
<div title="Delete Series" class="deleteSeriesButton" data-bind="css: { disabled: true}" ></div>
but this does not work with div.
Can I do it without unbind click event?
If you are using KnockoutJS, then you have a view model.
And if you have a view model, you should be able to add an observable property that tells you whether the "delete series" button is enabled or disabled.
self.isDeleteEnabled = ko.computed(function() {
// your code that tells whether the button is enabled or not
});
And let's say you in your view model the click action, like this:
self.clickAction = function() {
// do what you want to do
}
Thne, you can make your "click" binding dependent on this observable, like this:
<div class="button" data-bind="click: isDeleteEnabled() ? clickAction : null">
If the isDeleteEnabled observable returns true, then the button is clickable, otherwise it's not.
I made a fiddle so you can see how it's done in a real example.
you can block the div using the jQuery blockUI plugin.
link to blockUI