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/
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 have a table with data, and when I click on a cell in a certain column, I want it to change into a select dropdown for the user to choose a category for that row (which will be written to the database by AJAX but that'll come later).
I've done something similar before with text boxes using this, which works great, but I'm not sure if I'm modifying it correctly.
I've created a JSFiddle which shows the problem I'm having. I click on the text and it turns into a select element as expected, but when I click on that to choose an option, the dropdown doesn't stay open and I can't select anything. Debugging has shown me that when I click the dropdown, it runs the $("td.ChooseType").click() routine again so I've tried to suppress that by removing the class then adding it back on on selection, but that hasn't solved it. On the rare occasion that the dropdown stays open, I am unable to select anything by either mouse or keyboard.
All of the users will be on IE8 unfortunately, so I need it to be compatible with that.
Thanks!
You need to use event delegation, as otherwise that click event is always bound to that td - regardless of whether its class changes.
Simply change:
$("td.ChooseType").click(function() {
To:
$("table").on('click', '.ChooseType', function () {
JSFiddle demo.
Purely as an alternative to the accepted answer, you can remove an attached handler with unbind. So instead of adding and removing the class, you could unbind and rebind your handler. Only requirement is that the function can't be in-line, but has to be declared separately.
example: http://jsbin.com/qiqunici/1/edit
var handler = function () {
$(this).unbind('click', handler); //unbind the clicked element only
//create and change the element
//inside the select-change event, instead of addClass, re-attach:
{
//$(this).parent().addClass("ChooseType").text(selected).find('select').remove();
$(this).parent().click(handler).text(selected).find('select').remove();
}
};
$("td.ChooseType").click(handler);
I am trying to add javascript to set Focus on a button, and hope to make the button look just the way it does when a user 'tabs' thru the HTML Form to reach the button.
The page that I am working on has an button element:
<input type="Submit" id="myBtn" class="myBtnClass >
In javascript function, I set focus to it using:
$("#myBtn").focus() When this function is invoked, I can see change of button image. Also, when I click 'Enter', the form does get submitted. However, in this case, when the image changes, I don't see the "Dotted inline" that generally appears on buttons.
but the dotted line Does appear when a user "tabs" to that button.
Am I expected to do anything other than $("#myBtn").focus()" ?
you can use css property:
`outline`
Could be running in IE7 compatibility mode, or using the wrong doctype.
See this similar question for more info and possible solutions: CSS 'outline' property in IE, and jQuery errors
This drives me mad. I just can't understand it.
I wrote a filter-function based on checkboxes and clicking on their labels. I'm checking the 'checked' state of checkboxes and show mathed elements of the list (the rest elements are hidden). I use 3rdparty plugin that stylizes checkboxes (cut from example) and makes checkboxes checked while other onClick event does the filtering.
The problem is that after 'checked' state is successfully set inside a callback-function it "suddenly" becomes reset! I can't understand why that happens.
I implemented the base logic (without stylizing) here: http://jsfiddle.net/3Xtuh/13/
and ask all to help me solve this, please.
The problem is that you are invoking the click event manually, and then when your function is done running, the default click event is invoked.
By passing the event variable to your click handler and calling event.preventDefault(); fixes this behavior.
See example here: http://jsfiddle.net/3Xtuh/14/
The HTML label will check the associated checkbox even if it´s hidden (using CSS) so there´s no need to reinvent the wheel.
You should use the change() event. Try this demo and view your console.
It's default browser behavior that's messing your js script. By default, clicking on a label that is either wrapped around checkbox or have valid for attribute set, is toggling checked state of that checkbox.
You've attached custom onclick handler on labels.
So what's going on is that when clicking on a label? Your click handler gets fired (in in you alter state of target checkbox), and then
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