IE not rendering change in element display after changing it with javascript - javascript

Situation:
I have a check box and a div container inside another div container. When the check box or the label for the check box is clicked, the inner div's display style should change. If the display is set to block, then it should change to none and vice versa.
Code:
HTML:
<input id="oper_sale" type="checkbox" name="oper_sale" onchange="show_hide_operation(this, 'sale_block');">
<label for="oper_sale" class="public">Venta:</label>
<div id="sale_block" name="sale_block" style="display: none;">
AAAAAAA
</div>
Javascript:
// Show or hide parts of a form
function show_hide_operation (oper_choice, oper_block_id) {
var oper_block = document.getElementById(oper_block_id);
if (oper_choice.checked == true)
oper_block.style.display = "block";
else
oper_block.style.display = "none";
}
Problem:
This works fine in Firefox, but in IE it does not. When I click on the check box or its label, nothing happens. But, if I click anywhere else on the screen after clicking on the check box or its label, the change happens without a problem. I tried blurring the check box after it is click but it did not help.
In short:
IE does not render the change in display style until the user has click on a different part of the screen than what called the java script to change the style
Any help is greatly welcomed

IE doesn't fire .onchange for checkboxes until it loses focus, you may want to use the .onclick event here.

Use the onclick event, the change event in IE executes after the element loses focus.
Check this example.

In IE the onchange event obviously happens when the focus leaves the control, just as with an input with type="text".
Use the onclick event instead.

Related

Jquery on click not working when focus is in a text box

I am creating a suggestion box below a search box. I want it so that when the user has focus in the search box, and then clicks on one of the suggestions, it triggers an action. I have tried using jquery's on:
$(".searchbox + div").on("click", "a", function() {
$(".searchbox").val($(this).html());
});
My HTML structure is like this:
<input type="search" placeholder="Search" class="searchbox">
<div></div>
The links are dynamically inserted inside the div that follows the input.
The links do not have an href value, so they are not really links, I just want them to act like links.
When I click on one of the links, the searchbox loses focus, and, because of the css I have, the links get visibility:hidden. I think the searchbox loses focus before the link action is triggered, so it never is triggered. How could I get around this?
You can see it here.
Clarification: What I think is happening:
User clicks on link
Computer thinks, The user just clicked outside of the search box
Search box becomes blurred
CSS sees that search box is blurred, styles say to now make the suggestions visibility:hidden
Now the links are no longer clickable, so the event is never triggered.
Somewhere in your code you have a click handler that brings the search bar to the top and the rest of the UI into view. It executes when the user clicks anywhere that's not the search bar. You should add a statement that checks if the clicked element was an <a> element in the suggestion box.
So if this is the click handler. Also i think it's time to add an id to your suggestion div.
$(document).click(function(e){
var $clicked = $(e.target);
if($clicked.tagName == 'A' && $clicked.closest('#suggestionDivId').length>0)
$(".searchbox").val($(this).html());
else if(click was outside searchbar)
//move searchbar up and show UI
else
//click happened inside searchbar, do nothing.
})
I'm not sure why nobody understands your question, or why this question is being downvoted. It's a perfectly valid question.
EDIT:
I suggest wrapping the input and suggestion div with another div. Give this wrapper an attribute of tabindex="-1" so it can receive blur/focus events.
<div id="wrapper">
<input type="search" placeholder="Search" class="searchbox">
<div></div>
</div>
Then change your $(".searchbox").on("blur") to $("#wrapper").on("blur")
This way you can click anywhere in the suggestion box without the blur firing.
Alternatively, the mousedown event fires before the blur event. So try this maybe
$(".searchbox + div").on("mousedown", "a", function() {
$(".searchbox").val($(this).html());
});
You can use some plugins for that. Its too easy. For example if you work with any front framework like bootstrap, you can use typeahead.js plugin

Unable to disable click event from element with plain JavaScript

I'm trying to detach click event from several p elements via plain JavaScript. I'm able to access these p elements, but for some reason I'm not able to remove the click listener. It works fine with jQuery, but not with pure JS. getP_element function is called upon page load.
Here's my code:
function getP_element(){
console.log("page loaded");
var p_array = document.getElementById("checkboxesContainer").getElementsByTagName("p");
for(var i=0;i<p_array.length;i++){
p_array[i].onmousedown = new function(){
return false; //this doesnt work
}
}
$("#checkboxesContainer p").click(false); //this works
}
EDIT:
More info about what's happening here. I created several custom checkboxes with custom style. Fore some reason the checkboxes get selected even when the user clicks on the p tags, so I figured I need to detach the click events. This is how they are defined inside my HTML:
<div id="checkBoxDiv2" class="checkBoxDiv">
<input type='checkbox' value='someValue' id="checkBox2"/>
<label for="checkBox2"><p class="checkBoxText">some text goes here</p>
<span></span>
</label>
</div>
You don't need to disable the click event.
The checkboxes are getting selected when you click on the p because you have the p tag inside a label which has for="checkBox2"
That's what it's meant to be doing.
Remove the for and it will prevent clicking the label from activating the correspinding input element
Try
p_array[i].onmousedown = null;
See How to Clear/Remove JavaScript Event Handler?
Edit
The reason that the checkboxes are checked when clicking on p tags has nothing to do with click handlers.
Rather the reason is the for attribute in the parent label tag. This will check the checkboxes when a click occurs on the label.
Change your HTML to
<label><p class="checkBoxText">some text goes here</p>
<span></span>
</label>

Closing keyboard on iPad in div contenteditable

Is there a way force the keyboard on iPad to close on blur of div 'contenteditable'??
Here is a basic jsfiddle: http://jsfiddle.net/j_tufte/7HDmN/
I'd like to have the keyboard close when a user clicks on the button.
Any thoughts super appreciated.
Thanks.
As you have mentioned in your comment, element.blur() unfortunately doesn't work on an editable div. But you could instead move the focus to an actual input field and remove it again right away:
$('#otherBox').on('click', function(){
$('#orInput').focus().blur();
});
(This uses your jsFiddle HTML code).
There are downsides to this approach: you need another input field (which you can't set to display: hidden or visibility: hidden, but you can set it's size to 0 and opacity: 0). Also, the view may scroll to the location of this input field when the above handler is invoked. So you will need to place the second input field right next or behind to the editable div.
You will also need to take care of the input field not being targeted by the previous/next buttons: set it disabled.
<input id="orInput" disabled="disabled" style="width:0; height:0; opacity:0" type="text" />
For focussing/blurring you will then need to enable the field:
$('#otherBox').on('click', function(){
$('#orInput').removeAttr("disabled")
.focus().blur().attr("disabled", "disabled");
});
However, this is definitely a workaround. I haven't found any other solution yet (e.g. removing the contenteditable attribute doesn't work) but I'd very much like to hear other ideas.
You should be able to do exactly that -- attach an event listener to the button and use it to blur() the input field that caused the keyboard popup (use JavaScript to get a handle on that element and then call it's blur method). That supposedly closes the iPad keyboard.

HTML Button with functional nested input

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

onDblClick event on a non-editable text box in HTML

I need to perform an action on double click of a text box, but the onDblClick event does not seem to register when the text box is not editable (i.e. greyed out). Is there something I can do to solve this?
How about applying the onDblClick event to the parent div your text box is in?
e.g.
<div ondblclick="someAction()"><input type="text" readonly="true" /></div>
Apparently ,
The legacy code was using the 'disabled' property of the element to toggle editability of
the text box. So that also disables events on the text box.
textElement.disabled = true;
To fix this,
I used the 'readOnly' property of the element for the editability toggling needs and now it registers events.
textElement.readOnly = true;
Thanks for reading!
Rohan.

Categories

Resources