so I'm writing an interface for updating and displaying a database table, and each row displayed on the client-side (using DataTables) has an "Edit" and "Delete" button. Every time you click on a single row's Edit, all the Edit and Delete buttons in other rows are disabled. This is the Javascript code I use to do it:
var editButtons = document.getElementsByName("EditRow");
var deleteButtons = document.getElementsByName("DeleteRow");
for (i in editButtons) {
editButtons[i].disabled = true;
}
for (i in deleteButtons) {
deleteButtons[i].disabled = true;
}
This works fine with Chrome and Firefox, but when I try it in IE9, it doesn't disable anything. I've tried many things to solve this, including grabbing the DOM objects using jQuery, but nothing has worked. Any help is appreciated.
document.getElementsByName returns a node list, which is Array-like. You should treat it as such:
var elements = document.getElementsByName('something'),
len = elements.length;
for (var i = 0; i < len; i++) {
elements[i].disabled = true;
}
Your example doesn't work in IE9, but this does:
Array.prototype.forEach.call(document.getElementsByName('EditRow'), function(el){
el.disabled = true;
});
Related
So I have a site that is using a select menu for the mobile navigation. I'm needing to hide a few options from the list, and have been able to so on all browsers and devices except for Safari and iPhone.
Here's the css I used to remove items 7-11 on the list:
select.select-menu option:nth-child(n+7):nth-child(-n+11){
display: none !important;}
This is working as expected in Chrome and on my android phone. However, when you view the site in Safari or on an iPhone the options are not hidden and still show up.
I've tried several options and done a lot of research on the matter and can't find a solution. I tried removing items from the list using jQuery and couldn't get that to work either.
Is there a way I can hide the options on iPhone and Safari as well?
EDIT:
Here's a fiddle:
https://jsfiddle.net/cv6rubua/3/
Only this works for me - wrap in element you need to hide it. "if-check" for not wrapping it twice if hiding connected with some action on page.
Hide for iOS with jQuery:
if( !($(this).parent().is('span')) ) $(this).wrap('<span>');
Unhide for iOS with jQuery:
if( ($(this).parent().is('span')) ) $(this).unwrap();
With Jquery you can use prop("disabled", true) together with hide(). Like this:
$(this).prop("disabled", true); // for safari
$(this).hide();
This way options will be hidden in most browsers. In Safari they will be visible but disabled.
I think this is a nice alternative.
I also had difficulties in Safari while trying to hide option in my select (from an extension) and decided to go this route.
To "hide" the option in my select I replace the option with div, and then back again to option if I want to show it again.
//if any div exists change back to option
function showAll(){
var nodesSnapshot = document.evaluate("//select/div", document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
for (var i = 0; i < nodesSnapshot.snapshotLength; i++) {
var nodeA = nodesSnapshot.snapshotItem(i);
var elemA = document.createElement('option');
elemA.innerHTML = nodeA.innerHTML;
nodeA.parentNode.replaceChild(elemA, nodeA);
}
}
//replace all option that contain text with div
function hideSome(){
var nodesSnapshot = document.evaluate("//select/option[text()[contains(.,'HideMe')]]", document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
for (var i = 0; i < nodesSnapshot.snapshotLength; i++) {
var nodeA = nodesSnapshot.snapshotItem(i);
var elemA = document.createElement('div');
elemA.innerHTML = nodeA.innerHTML;
nodeA.parentNode.replaceChild(elemA, nodeA);
}
}
//replace all option with div
function hideAll(){
var nodesSnapshot = document.evaluate("//select/option", document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
for (var i = 0; i < nodesSnapshot.snapshotLength; i++) {
var nodeA = nodesSnapshot.snapshotItem(i);
var elemA = document.createElement('div');
elemA.innerHTML = nodeA.innerHTML;
nodeA.parentNode.replaceChild(elemA, nodeA);
}
}
<button onclick="showAll();">showAll</button>
<button onclick="hideSome();">hideSome</button>
<button onclick="hideAll();">hideAll</button>
<select>
<option>HideMe</option>
<option>HideMe</option>
<option>ShowMe</option>
<option>HideMe</option>
<option>ShowMe</option>
</select>
I found that removing the items rather than hiding them is easier.
$(this).remove();
You can solve this using JavaScript
var selectOption = document.querySelectorAll('.select-menu option');
for (var i = 0; i < selectOption.length; i++) {
var item = selectOption[i];
if (item.innerHTML.charAt(0) === "–") {
item.remove();
};
}
You have a number of options depending on what you want, from I have found display: none does not work on safari so here is an alternative method:
You can simply make it super small and invisible:
opacity: 0;
height: 0;
width: 0;
overflow: hidden;
This should work well, and should be supported by both chrome and safari!
Good luck!
You can't. Safari uses an overlay for dropdowns... You literally have to remove them.... There is a hack using spans as non-valid syntax... Wouldn't recommend using invalid syntax though
The solution that worked for me was to create another hidden select which all the options, and clone the relevant ones to the visible select. this way you display one the options you want to display but still keep a record of the other options in a hidden list.
I should probably start by mentioning that I am using Internet Explorer 6. I am calling a JavaScript function (tabModifiedHighlight) from an onChange event. The function works perfectly other places however, I have a couple of places on the page where it works when I check the checkbox, but the event doesn't even seem to fire when I uncheck it.
Here is the JavaScript function:
function tabModifiedHighlight(){
alert("alert");
var div, i, input, inputIndex, selects, selectIndex, selectedTab, highlighted;
var tabs = new Array("admissioninformation","diet","vitalsigns","activities","nursing","ivfluids","medications1","medications2","labs","respiratory","diagnostic","consultations");
for(i=0; i<(tabs.length); i++){
selectedTab = tabs[i]+'tab';
if (document.getElementById(selectedTab).className == "selectedtab"){
div = document.getElementById(tabs[i]),
input = div.getElementsByTagName('input'),
selects = div.getElementsByTagName('select');
break;
}
}
highlighted = false;
for (inputIndex = 0; inputIndex < input.length; inputIndex++){
if (input[inputIndex].checked == true){
highlighted = true;
}
}
for (inputIndex = 0; inputIndex < input.length; inputIndex++){
if (input[inputIndex].type == 'text' && input[inputIndex].value != ""){
highlighted = true;
}
}
for (selectIndex = 0; selectIndex < selects.length; selectIndex++){
if (selects[selectIndex].value != ""){
highlighted = true;
}
}
if (highlighted == true){
document.getElementById(selectedTab).style.backgroundColor = "#FF0";
}
else {
document.getElementById(selectedTab).style.backgroundColor = "#F0F0F0";
}
}
And here is the input that is calling it:
<input name="cbMedTylenolPO" id="cbMedTylenolPO" type="checkbox" value="PO" onClick="tylenolPoShowHide(); checkBoxHighlight(this, 'MedicationsRow2'); tabModifiedHighlight();" />
This page has multiple "tabs" which are just divs that are set to visible or hidden based on which one is selected. It seems consistent in that it works everywhere except for 2 of the tabs, and nowhere on those tabs. The only other difference I can see is that the ones that are not working are also showing or hiding divs within the tab, based on whether the checkbox is checked or not. I have added the alert at the very beginning of the function to see if it is firing or not, and it does when checking the checkbox, but not when unchecking.
I hope I made this clear, and any thoughts are appreciated!
As your code is not working only for two tabs, and working for all others its not an browser compatibility issue.
onClick if checkbox you are calling these 3 methods
tylenolPoShowHide(); checkBoxHighlight(this, 'MedicationsRow2');tabModifiedHighlight()
Note tabModifiedHighlight is last one..
if any of first two methods tylenolPoShowHide or checkBoxHighlight fails... then tabModifiedHighlight will not be called.
I will suggest to add alert as first and last line in both tylenolPoShowHide and checkBoxHighlight ...
It will help you find which one is actually failing then you can add that code here and we will be able to help you further
Prior to adding this code to my page, if, when executed, I notice that all of my select boxes take 2 clicks of the user to open the drop down menu, the first click seems like it sets focus on it, then the 2nd click finally opens it. If I remove the code, the behaviour changes, and the user is able to open the drop down with all of its menu options in only 1 single click.
I am not sure what to fix or modify, so that it doesn't take 2 clicks, im also using ie. 7 so this would be a work around of css focus. I do not wish to have any jquery please.
Thanks for all your help.
function v9_form() {
//===========================================================================================>>
var x = document.getElementsByTagName('INPUT');
for (var i = 0; i < x.length; i++) {
if (x[i].type == "text" && x[i].readOnly == false) {
if (x[i].id != "date2" && x[i].id != "date3") {
x[i].onfocus = function() { this.style.backgroundColor = '#FFFFC4';};
x[i].onblur = function() { this.style.backgroundColor = '#FFFFFF';};
}
}//end of if
}//end of for
var y = document.getElementsByTagName('SELECT');
for (var i = 0; i < y.length; i++) {
y[i].onfocus = function() { this.style.backgroundColor = '#FFFFC4'; };
y[i].onblur = function() { this.style.backgroundColor = '#FFFFFF'; };
}
var z = document.getElementsByTagName('TEXTAREA');
for (var i = 0; i < z.length; i++) {
z[i].onfocus = function() { this.style.backgroundColor = '#FFFFC4'; };
z[i].onblur = function() { this.style.backgroundColor = '#FFFFFF'; };
}
}
This is a known issue with IE. If you change any of the style in the onfocus IE doesn't display the dropdown choices.
A solution is to use the onfocusin event for IE:
y[i].onfocusin = function() { this.style.backgroundColor = '#FFFFC4'; }
From MSDN:
Fires for an element just prior to setting focus on that element.
Another option is to use the :focus CSS selector but you're obviously limited to CSS with that, no complex Javascript logic.
You're a victim of this bug.
It looks like this is some special behavior from IE. There's some code in that answer that provides a possible workaround you can try, but it's pretty heavy for what it does (accommodate people with old versions of IE). I think your best option would be to use a CSS pseudo class (as recommended by the answer above), or to just remove the functionality for those using IE<8.
I'm wondering if it's possible for a script to enable/disable all input elements on the page with some sort of toggle button.
I googled it but didn't find anything too useful except for this:
http://www.codetoad.com/javascript/enable_disable_form_element.asp
but I'm not sure how to edit it for the toggle.
Something like this would work:
var inputs=document.getElementsByTagName('input');
for(i=0;i<inputs.length;i++){
inputs[i].disabled=true;
}
A working example:
$().ready(function() {
$('#clicker').click(function() {
$('input').each(function() {
if ($(this).attr('disabled')) {
$(this).removeAttr('disabled');
}
else {
$(this).attr({
'disabled': 'disabled'
});
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<input type='text'></input>
<input type='text'></input>
<input type='text'></input>
<div id='clicker' style='background-color:#FF0000; height:40px; width:100px;'></div>
Here is a function to toggle all inputs on the page:
function toggle_inputs() {
var inputs = document.getElementsByTagName('input');
for (var i = inputs.length, n = 0; n < i; n++) {
inputs[n].disabled = !inputs[n].disabled;
}
}
It works by using the logical NOT operator (the exclamation point), which returns the opposite of the operand. For example, !true will return false. So by using !inputs[n].disabled, it will return the opposite of what it's currently set to, thereby toggling it.
If you need code to bind the click event to the button:
document.getElementById('your_button_id').onclick = toggle_inputs;
You can also use addEventListener, but see the linked page for more information, including compatibility with Internet Explorer. The code I gave above should work across all browsers with no trouble.
for (var i = 0; i < document.getElementyByTagName('input').length; i++) {
document.getElementsByTagName('input')[i].disabled = 'disabled';
}
http://code.google.com/p/getelementsbyclassname/
^^Robert Nyman has a "get elements by class" script. Basically you'd just assign all those input elements to the same class, and then do something like:
//Collapse all the nodes
function collapseNodesByClass(theClass){
var nodes = getElementsByClassName(theClass);
for(i = 0; i < nodes.length; i++){
nodes[i].style.display='none';
}
}
This is a piece of code I'm actually currently using to collapse everything with a given class name (it uses the script I mentioned above). But in any case I think the key to your problem is being able to refer to multiple elements at once, which that script will help you with.
Also the link in your question didn't work for me :(.
I'm a bit of a novice when it comes to Javascript, but I've managed to create this script which 'greys out' text and inputs found in a div. It accepts a boolean (show) to declare whether the elements are being hidden or reshown, as well as the name of the div(s) to hide.
It works exactly as intended in Chrome and Firefox, but IE won't do a thing. Through 'debugging' using alerts, I think the issue lies with this line:
var div = document.getElementsByName(divName);
...of the following code:
function hideAndShow(show, divName) {
var hideColor = "#DFDFDF";
// Find all matching divs and loop through
var div = document.getElementsByName(divName);
for (var count1 = 0; count1 < div.length; count1++) {
// Find and loop through all elements in div
var elements = div[count1].getElementsByTagName("*");
for (var count2 = 0; count2 < elements.length; count2++) {
if (elements[count2].tagName == "TEXTAREA" || elements[count2].tagName == "INPUT") {
elements[count2].disabled = !show; //Disable
elements[count2].style.borderColor = (show) ? "" : hideColor; // Change border colour
elements[count2].value = ""; //Clear existing text
}
}
// Change the colour of anything left, such as text
div[count1].style.color = (show) ? "" : hideColor;
alert(div[count1].id);
}
}
Can anybody please help or point me in the right direction? I'm stumped!
It's possible that IE is getting confused by your page: http://www.romantika.name/v2/javascripts-getelementsbyname-ie-vs-firefox/
afaik the IE implementation of getElementsByName actually searches on id
In IE7 at least:
// works in IE but not Chrome
<div id="test"></div>
alert(document.getElementsByName('test').length);
// doesn't work in IE, works in Chrome
<div name="test"></div>
alert(document.getElementsByName('test').length);
Libraries like jQuery deal with all this nonsense for you and make selecting DOM elements trivial.
If you want to do it in pure JS, you might want to look at providing an implementation of getElementsByClassName (see here for an example) to solve the problem.