I'm using x-editable to inline edit some text. As long as I click on the label directly everything works fine. But, if I implement a button and want label to be edited on button click, then it won't work.
The reason being, clicking the label edits it and clicking anywhere outside label resets it. Here, when I click the button, its considered as a click outside and editable-label doesn't edit.
What to do? I don't want to go with setTimeout().
The following lines did the trick
I gave the Button a ID ("inline_editable_button")
jQuery("inline_editable_button").click(function(e){
e.stopPropagation();
jQuery('#editable_id').editable('toggle');
});
Related
I am using angular-ng-autocomplete library at many places in my project.
But i faced 1 issue recently.
I have 1 button besides the autocomplete textbox. Whenever i select any option i am using it to add in the object.
But, Whenever i type something which is not in the dropdown list. At that time i can't click on the button until i click it twice.
So the 1st click is loosing focus from the autocomplete textbox and 2nd click is actually clicking on that button.
Demo
Try to type anything which is not in the loaded list. Ex: Test
Than try to click on 'Add' button, You will observe that you need to click twice.
For quick fix, I tried to read the mouseleave event on this ng-autocomplete, But it's also not being triggered whenever we are typing something. We need to loose the focus to make mouseleave works. And it's also not a good solution eitherway!
Any help?
Try this,
onFocused(e) {
// do something
this.auto.close();
}
Refer this for more https://github.com/gmerabishvili/angular-ng-autocomplete/issues/50
I am trying to toggle one button using jQuery. So far, all of the information I have found is to toggle a paragraph, for instance, using another button, but I want to make this button appear and reappear when it is clicked. I also want to increase the "score" when the shown button is clicked, and decrease the "score" when the button reappears (after the user clicks it). Does anyone know how to accomplish this?
I have a series of buttons, but I will link the code for one of them for now.
HTML:
<li><button id="active1" onclick="disappear1()"></button></li>
JavaScript:
function disappear1() {
$("#active1").toggle();
currentStreak++;
document.getElementById("streak").innerHTML="current streak: " + currentStreak;
}
I know that the problem is that when I click on the button, the button disappears so there's no way for me to find it again. I want there to be a way to still reference it.
The .toggle() function changes the targeted element's CSS display property to hide/show the element. When the element is hidden it is still in the DOM and can still be targeted with same method as when it's visible.
The example below toggles an element with an ID of 'active1' when a button is clicked. Even when the 'active1' element is hidden it is still referenced and made visible again.
$('#button1').click( function (){
$('#active1').toggle();
});
I am using jQuery Token Input plugin with one of my custom written plugins in one of my projects.
My plugin basically adds an anchor tag to an element that it was initialized on and upon clicking the anchor link a text input element is shown which is bound to jquery token input plugin.
On FocusOut event i want to hide the text input (in this case which would be a ul initialized by jquery token input in place of the text input).
All works fine till now.
But if I press the alt key, the main ul is hidden as expected but the dropdown ul is still visible.
To see the problem that i am facing you can also view this JSFiddle. Sorry, about the CSS part, i did include the CSS file but for some reason it does not work as expected.
Now, in the fiddle if you click the + Add button the input and the dropdown (with instructions) appears, then if you click anywhere else in the preview window, it disappears, which is what is expected behaviour.
But if you click on the add button and once the input and dropdown appears and then if you press the alt key (which initiates the focusout event) the input disappears but the dropdown still shows. Why is that ?
What could be the reason causing this ?
Update:
I apologize if I made it a little complicated. Following is comparison between the expected behavior and the problem.
Case 1: (focusout event triggered by clicking somewhere in the body).
In this case, A user clicks on the +Add button > An input box appears with an open dropdown > A user focuses out by clicking somewhere else in the body > The Input and dropdown disappears.
This is the expected behaviour.
Case 2: (focusout event triggered on alt keypress).
In this case, A user clicks on the +Add button > An input box appears with an open dropdown > A user presses the alt key which triggers the focusout event > The Input disappears but dropdown does not.
I need to make sure the dropdown disappears in this case too.
Note: The Dropdown CSS is messed up in the fiddle for some reason. The text that says type somethig is the dropdown element.
Add shortcut library and add the following code . It works
shortcut.add("Alt", function() {
$('.token-input-dropdown').hide()
});
Demo :http://jsfiddle.net/abdennour/dHSWu/5/
Likewise,be kept away the tags using margin to avoid overlapping of events
a.addInput{
margin:2px;
}
div.token-input-dropdown{
margin:2px;
}
Here is a JSfiddle link to the script I am working with:
http://jsfiddle.net/TSM_mac/bnjWQ/
To use it, you first click the button and then on the element you want to modify.
As you notice, when you click the button to apply it to the div, the property is disabled and you can't just click on other objects. I want to be able to click the button, and apply it to any object without having to reclick the button.
The original code I wrote was not as tidy as this code, but a very helpful person wrote this for me to fix a problem I was having... I can't seem to enable this feature.
Just delete or comment out the line setting currentInput to null in the div.editable click handler and the if statement in the css property input click handlers. http://jsfiddle.net/bnjWQ/2/
I have a <button> element which adds an element to my page when clicked.
What I'd like to do is to have an <input> inside this button, in which I could input a number, and then on button click, it would add x times the element instead of clicking x times on the <button>
See demo here : http://jsfiddle.net/MWxgb/5
The problem is that I can't click inside the <input> element inside the button, it clicks the button instead.
Is there a way to avoid this behavior ?
Just prevent the clicks on the <input> from bubbling:
$("#count")
.click(function(e) {
e.stopPropagation();
});
http://jsfiddle.net/qT7gC/
http://jsfiddle.net/3vtTv/2/
I changed the button to a div, but still use $("#btn").button() to style it.
Then I call stopPropagation on the click event for the #count click handler.
This seems to work (in IE9, Chrome 10, FF4), but unfortunately the button still flashes when you click the textbox. Not sure how to work around that.
Odd idea, I doubt that would work. I would recommend just using a text input, and setting up some javascript to read a click/enter key pressed.
Refer to this question
Here is an example