How to apply focused state to same element again when clicked? - javascript

For my Form input, I would like to re-do the animation of my focused state for an input like:
<input type="text" class="form-control">
You can see it in action here: https://jsfiddle.net/esg1dzy0/
With that said, I can't get it to do so with this:
$(document.activeElement).click(function(){
this.focus();
});
Is this possible? What am I doing wrong?

You need to blur the element first.
Before you do that, you need to make sure this is not the first click on the element.
Also, your original selector will only select the element that is active at the time that your snippet runs.
Finally, use mousedown to avoid flickering.
$('.form-control').mousedown(function(){
if(!$(this).is(':focus')) return;
$(this).blur().focus();
});

I hope this can help you:
$('.form-control').on('click', function(){
var $this = $(this);
var duration = 300;
var enableAgain = function(){
$this.blur().focus();
};
setTimeout(enableAgain, duration);
});
This trigger the the blur() and focus() event again after 300 milliseconds (in the best of the case), which is the same as transition-duration you maybe want a greater value like 350.
BTW I have editt your https://jsfiddle.net/esg1dzy0/ file.

Related

Jquery - Sum of cloned elements won't work with input from function

Here's my code:
$(document).ready(function() {
$('#clone').click(function() {
var target = $(this).closest('.groupcontainer');
target.clone(true, true).insertAfter(target);
});
$('.input').on('input',function(){
$(this).parent().children('.grouptotal').val($(this).val() * $(this).parent().children('.input2').val());
});
$('.input2').on('input', function(){
$(this).parent().children('.grouptotal').val($(this).val() * $(this).parent().children('.input').val());
});
});
$(document).on('change', '.grouptotal', function(){
var sum = 0;
$('.grouptotal').each(function(){
sum += +$(this).val();
});
$('#subtotal').val(sum);
});
My issue is that I need #subtotal to add every instance of .grouptotal, but #subtotal is not updating when it gets it's input from
$('.input').on('input',function(){
$(this).parent().children('.grouptotal').val($(this).val() *
$(this).parent().children('.input2').val());
});
$('.input2').on('input', function(){
$(this).parent().children('.grouptotal').val($(this).val() *
$(this).parent().children('.input').val());
});
#subtotal will update if I manually put numbers in .grouptotal however. Can someone explain to me what I'm missing?
Here's the Fiddle. It looks kind of sloppy but it gives the idea.
Quantity * System will automatically update my .grouptotal
How do I make it so #subtotal will take the .grouptotals and add them up automatically? I've tried changing $(document).on('change', '.grouptotal', function(){ "change" to 'input' and a couple others, but no luck.
Also, it must work if the #clone button is clicked to duplicate the group.
When setting the value programatically with val('value') the change event isn't fired, you have to actually trigger it
$(this).parent().children('.grouptotal').val( $(this).val() ).trigger('change')
Let's try this again. Evidently, changing the grouptotal values programmatically does not trigger the change event. I would have thought it would, so your code looked right to me. To fix, however, I added an explicit trigger of '.grouptotal'. You can see the fiddle here.
just add the code:
('.grouptotal').change();
to both of your handlers that sum from inputs. that might not be the solution you are looking for, but it seems to work

jquery change value of input created after page load

I simply need to change the value of the input field which is created on button click. I have tried the below but it gives me undefined error since the element was not there when the page loaded. any ideas?
$('#test').val("test");
I use the below code for click event but I have no idea how to do the same thing for the above one too
$('body').on("click", ".btnx", function() {
//do something
});
$('#test').click(function(){
//code here
});
$('#test').empty();
$('#test').append('test');
There isn't anything like delegated events when you want to set the value of an input that is added out of your control, because there is no event to wait for.
You can wait for the element to come into existance, and set the value when it's there:
var handle = window.setInterval(function(){
var i = $('#test');
if (i.length) {
i.val('test');
window.clearInterval(handle);
}
}, 100);
The interval 100 means that it checks ten times per second, so it may be as long as 1/10th of a second after the element is created that the value is changed. You can adjust the value depending on how fast you need the value to be set, and how much overhead you can allow.

jQuery - remove element on blur BUT catch click on his children

I have following code:
$('#myEl').blur(function(){
$(this).remove('.children');
});
But the children element have links inside, with another jQuery actions which doesn't trigger because the .children is removed on blur, which I guess is triggered before the click action. Simple example:
Children is visible and #myEl have focus
I click on the children link
#myEl loses his focus
Children element is removed
Children link action is not triggered, because I guess link is not present anymore
How to solve this? I was trying to delay remove:
$(this).delay(100).remove('.children');
With no luck.
If you are working with the delay way, you can't use jQuery .delay() since it only work on queued element (with animation).
You can use setTimeout :
$('#myEl').blur(function(){
var $this = $(this);
setTimeout(function(){
$this.remove('.children');
}, 100)
});
I've tried it with mousedown event and it worked fine. I don't thing adding a delay is always a good option.
<input type="text" id="myEl"></input>
<div class="children" >div child</div>
<script>
$('#myEl').blur(function(e){
$('.children').remove();
});
$(".children").mousedown(function() {
window.open('http://www.google.com')
});
</script>
And if you really want to add the click event for a specific reason then you can try this:-
$('#myEl').blur(function(e){
if(mousedown){
window.open('http://www.google.com');
mousedown = false;
}
$('.children').remove();
});
$('.children').click(function(e){
window.open('http://www.google.com')
});
$(".children").mousedown(function() {
mousedown = true
});
what about simply making the child elements hidden after a click? Or maybe even having the child itself remove all children from its parent container after it has processed the click?
$('#myEl').blur(function(){
$(this).children('.children').hide();
});
$('.children').on("click",function(){
// perform your click-code actions here
alert("I did it!");
// now remove your child elements from the parent
$(this).parent().children('.children').remove();
});

JQuery - What can I do to make this work?

http://jsfiddle.net/piezack/X8D4M/5/
I need the change created by clicking the button to be detected. At the moment you have to click inside the field and then outside for it to detect any change.
Thanks guys.
The code for the button CANNOT be altered. Good tries so far though.
Was overcomplicating things. Answer http://jsfiddle.net/piezack/X8D4M/56/
Example using trigger:
//waits till the document is ready
$(document).ready(function() {
$('button.butter').click(function() {
var $form6 = $('#FormCustomObject6Name');
$form6.val('Text has changed');
$form6.trigger('change')
});
$('#FormCustomObject6Name').change(function() {
var x = $('#FormCustomObject6Id').val();
$("a").filter(function() {
return this.href = 'http://www.msn.com'
}).attr('href', 'http://www.google.com/search?q=' + x);
alert(x);
});
});
i think that jmar has the right idea...if i understand correctly you want to be able to type whatever in the box and without clicking out of it to have the button change it to the text has changed.
i dont know if that alert is really necessary, but you can do this if the alert is not needed:
http://jsfiddle.net/X8D4M/24/
To trigger the change event simply add a .trigger after setting the value.
Also, you're selector for the link wasn't working so I just changed it to #link.
http://jsfiddle.net/X8D4M/22/

Disable doubleclick event for an element in Opera

Is there a way to disable (with CSS, JS or jQuery) double-click for a given element?
The problem with Opera is that it displays a menu when I click on an element too fast. Note that I know how to disable this for me. I'd like to be able to disable this for all user that use the script.
The buttons in question are "next"/"previous" buttons and I use input type image for them, but the same happens with "a".
It turended out I need this:
/**
Disable text selection by Chris Barr, of chris-barr.com
*/
$.fn.disableTextSelect = function() {
return this.each(function(){
if($.browser.mozilla){//Firefox
$(this).css('MozUserSelect','none');
}else if($.browser.msie){//IE
$(this).bind('selectstart',function(){return false;});
}else{//Opera, etc.
$(this).mousedown(function(){return false;});
}
});
}
And then I could disable text selection on my button elements like this:
$(function(){ $('input[type=image]').disableTextSelect(); });
And now I can click buttons fast as hell and all works fine :-).
You cannot have a click and dblclick event handler attached on the same element because when you dblclick both the events are going to be triggered. In order to make it work there are few work arounds.
This might help you
Need to cancel click/mouseup events when double-click event detected
Looking at your problem there is a simple solution. In the click event handler once it is clicked set a disabled attribute or some class name(disabled). In the handler before exectuing your code checck for this attribute or class name. If it exists then dont do anything. After sometime remove this attribtue or class name. Try this
$("selector").click(function(){
var $this = $(this);
if(!$this.hasClass("disabled")){
//Do you stuff here
$this.addClass("disabled");
setTimeout(function(){
$this.removeClass("disabled");
}, 200);
}
});
JavaScript would do that for you.
DOMElement.ondblclick = (function () {return false;})();

Categories