Javascript click function not working in IE 8 - javascript

I have a javascript function that works for Chrome, Firefox, and IE 11, but not for IE 8, which is what my client uses.
function ToggleSelectAll(this_id) {
var chk = document.getElementById(this_id).childNodes[0];
var lblID = "lblSelectAll" + chk.id.slice(-1);
var lbl = document.getElementById(lblID);
var items = $(lbl).closest('div.segment_container')[0].childNodes;
if (document.getElementById(chk.id).checked == false) {
lbl.innerHTML = "Select All";
for (i = 0; i < items.length; i++) {
if (items[i].className == "checkbox") {
var bx = $(items[i]).children()[0];
bx.checked = false;
var label = $(items[i]).children()[1];
label.style.background = '#CCC';
}
}
}
else {
lbl.innerHTML = "Clear All";
for (i = 0; i < items.length; i++) {
if (items[i].className == "checkbox") {
var bx = $(items[i]).children()[0];
bx.checked = true;
var label = $(items[i]).children()[1];
label.style.background = '#C1ECFA';
}
}
}
};
The function is run via onclick of a div. chk is a checkbox inside div that, when checked, selects/deselects all checkboxes within the parent container. I've tried replacing the .childnodes with .children and .firstElementChild, but it didn't help. Through the debugger, I can see that the values for chk, lblID, and lbl are the same in IE as they are in Chrome
Edit
Here is the jsfiddle with some relevant html: http://jsfiddle.net/zNEyb/1/

Related

JavaScript - Checkbox onchange function is not executing the whole way through

I have an input of type checkbox with an onchange event as shown below:
<input type="checkbox" runat="server" id="cbWarehouse" onchange="disableAllButtons()"/>
<script>
function disableAllButtons()
{
// gvDetail
var gvDetail = document.getElementById("<%=gvDetail.ClientID %>");
var gvDetailControls = gvDetail.getElementsByTagName("input");
for (i = 0; i < gvDetailControls.length; i++)
{
gvDetailControls[i].disabled = true;
}
// gvSummary
var gvSummary = document.getElementById("<%=gvSummary.ClientID %>");
var gvSummaryControls = gvSummary.getElementsByTagName("input");
for (i = 0; i < gvSummaryControls.length; i++)
{
gvSummaryControls[i].disabled = true;
}
}
</script>
This function's purpose is to disable all buttons in two GridViews - gvSummary and gvDetail. However, it only disables the buttons in whichever GridView I mention first in the JS function. I.e. in the example above, the buttons in gvDetail will be disabled but not in gvSummary.
So it seems that the function stops halfway through..?
Anyone have any ideas where I am going wrong?
****EDIT (RESOLVED)****
Issue was resolved by checking that each GridView was defined and not null:
<script>
function disableAllButtons()
{
// gvSummary
var gvSummary = document.getElementById("<%=gvSummary.ClientID %>");
if (typeof (gvSummary) != 'undefined' && gvSummary != null)
{
var gvSummaryControls = gvSummary.getElementsByTagName("input");
for (var i = 0; i < gvSummaryControls.length; i++) {
gvSummaryControls[i].disabled = true;
gvSummaryControls[i].className = "btn-xs btn-secondary";
}
gvSummary.title = "You have unapplied filters. Pleae update table.";
}
// gvDetail
var gvDetail = document.getElementById("<%=gvDetail.ClientID %>");
if (typeof (gvDetail) != 'undefined' && gvDetail != null)
{
var gvDetailControls = gvDetail.getElementsByTagName("input");
for (var i = 0; i < gvDetailControls.length; i++) {
gvDetailControls[i].disabled = true;
gvDetailControls[i].className = "btn-xs btn-secondary";
}
gvDetail.title = "You have unapplied filters. Pleae update table.";
}
}
</script>

Gridview Rows Items Misalignment to Header

Please see image first
Misaligning of row items to header happens after keypress event in textbox for record searching takes place. It works using javascript using this code
var $KeyPressSearch = jQuery.noConflict();
function filter2(phrase, _id) {
var words = phrase.value.toLowerCase().split(" ");
var table = document.getElementById(_id);
var ele;
for (var r = 1; r < table.rows.length; r++) {
ele = table.rows[r].innerHTML.replace(/<[^>]+>/g, "");
var displayStyle = 'none';
for (var i = 0; i < words.length; i++) {
if (ele.toLowerCase().indexOf(words[i]) >= 0)
displayStyle = '';
else {
displayStyle = 'none';
break;
}
}
table.rows[r].style.display = displayStyle;
}
var lblTotalDSRdata = $KeyPressSearch("#grd tr").length;
}
this only happens to gridviews with jquery injected codes used to fixate the header. to other gridviews that do not use, all works fine.
So to fix the gridview header I apply the tutorial from this link http://gridviewscroll.aspcity.idv.tw/ (Basic)
[![enter image description here][3]][3]

Javascript-created Form sending empty values

I am creating a HTML table and I want it to be editable. so I created javascript like this:
<script>
var buttons = document.getElementsByClassName("clicker");
var buttonclicked = function(e){
if(e.target.textContent == "Edit")
{
e.target.textContent = "Cancel";
var id = e.target.id;
var table = document.getElementById("tr"+id);
var editable_elements = document.querySelectorAll("[contenteditable=false]");
var sub = document.getElementById("sub"+id);
var f = document.createElement("form");
f.setAttribute('method',"post");
f.setAttribute('action',"edit.php");
table.appendChild(f);
var j = document.createElement("input");
j.setAttribute("type", "text");
j.setAttribute("name", "subject");
j.setAttribute("value", sub.textContent);
j.setAttribute("placeholder", sub.textContent);
j.setAttribute("disabled", true);
j.setAttribute("style", "width: 150px");
j.textContent = sub.textContent;
sub.innerHTML = "";
f.appendChild(j);
sub.appendChild(j);
for(var k = (id*6); k < (id*6)+6; k++){
var l = k;
var index = k -(k*id) + 1;
l = document.createElement("input");
l.setAttribute('type',"number");
l.setAttribute("style", "width: 75px");
l.setAttribute("step", "0.01");
if(index <= 4){
l.setAttribute('name',"g"+index);
l.setAttribute('placeholder',"G"+index);
l.setAttribute("value", editable_elements[k].textContent);
}
else if(index == 5){
l.setAttribute('name',"creditos");
l.setAttribute('placeholder',"credits");
l.setAttribute("value", editable_elements[k].textContent);
}
else if(index == 6){
l.setAttribute('name',"criteria");
l.setAttribute('placeholder',"criteria");
l.setAttribute("value", editable_elements[k].textContent);
}
editable_elements[k].innerHTML = "";
f.appendChild(l);
editable_elements[k].appendChild(l);}
var s = document.createElement("button");
s.textContent = "Save";
s.setAttribute('type',"submit");
s.setAttribute('value',"update");
s.setAttribute("id", id);
s.setAttribute("name", "action");
var clickbutton = document.getElementById("save"+id);
f.appendChild(s);
}
else //save button has been clicked
{
//nothing
}
};
for(var j = 0; j < buttons.length; j++)
{
buttons[j].addEventListener('click', buttonclicked);
}
</script>
This creates a lot of input forms in the table cells (check the image: http://imgur.com/z5DRRZz) and a submit button and try to send it to my PHP file (edit.php), all seems to work well, but when it submits to the PHP file, it submits an empty string in the place of "Subject". I dont know why. I know that bracause as soon as I press "save" button it tells me I have accessed this appologize function:
else if ($_SERVER["REQUEST_METHOD"] == "POST")
{
if($_POST['action'] == ["update"])
{
//validate submission
if(empty($_POST["subject"]))
apologize("You must provide what subject to change");
...
}
...
}

Javascript using select value in function

Not sure what the problem is, also not a javascript coder at all. Can someone shed some light on what I am missing.
The main problem I am having is trying to make this a bit more dynamic based on the selection of a select input. if I comment out the first two variable entries and set the stropt variable to something static that would identify one of my div's then it works fine.
aChecked = false;
function checkByParent() {
var sel = document.getElementByID("me");
var stropt = sel.options[sel.selectedIndex].value;
//var stropt = 'test2';
var collection = document.getElementById(stropt).getElementsByTagName('INPUT');
if (aChecked === false) {
aChecked = true;
} else {
aChecked = false;
}
for (var x = 0; x < collection.length; x++) {
if (collection[x].type.toUpperCase() === 'CHECKBOX')
collection[x].checked = aChecked;
}
}
Here is my fiddle
http://jsfiddle.net/sasatek/b654V/2/
The problem is getElementByID, which is a mistake it should be getElementById
Like this
aChecked = false;
function checkByParent() {
// var sel = document.getElementByID("me");
var sel = document.getElementById("me");
var stropt = sel.options[sel.selectedIndex].value;
//var stropt = 'test2';
var collection = document.getElementById(stropt).getElementsByTagName('INPUT');
if (aChecked === false) {
aChecked = true;
} else {
aChecked = false;
}
for (var x = 0; x < collection.length; x++) {
if (collection[x].type.toUpperCase() === 'CHECKBOX')
collection[x].checked = aChecked;
}
}
Javascript & DOM api is written in CamelCase

Javascript in DotNetNuke 6.1.3

I am building a website in DNN, and I want to include Javascript in one of its HTML Modules.
I added the Javascript in footer/header (Settings > Advance Settings) but it didn't work. Then I tried adding the content by switching to basic editor and selecting RAW mode, but it's still not working.
Here is my Javascript. It is for tab browsing, to test whether Javascript is working or not I wrote a simple script in another HTML module, and it worked fine, but this script isn't running:
<script type="text/javascript">
var tabLinks = new Array();
var contentDivs = new Array();
function init() {
var tabListItems = document.getElementById('tabs').childNodes;
for (var i = 0; i < tabListItems.length; i++) {
if (tabListItems[i].nodeName == "LI") {
var tabLink = getFirstChildWithTagName(tabListItems[i], 'A');
var id = getHash(tabLink.getAttribute('href'));
tabLinks[id] = tabLink;
contentDivs[id] = document.getElementById(id);
}
}
var i = 0;
for (var id in tabLinks) {
tabLinks[id].onclick = showTab;
tabLinks[id].onfocus = function() {
this.blur()
};
if (i == 0) tabLinks[id].className = 'selected';
i++;
}
var i = 0;
for (var id in contentDivs) {
if (i != 0) contentDivs[id].className = 'tabContent hide';
i++;
}
}
function showTab() {
var selectedId = getHash(this.getAttribute('href'));
for (var id in contentDivs) {
if (id == selectedId) {
tabLinks[id].className = 'selected';
contentDivs[id].className = 'tabContent';
} else {
tabLinks[id].className = '';
contentDivs[id].className = 'tabContent hide';
}
}
return false;
}
function getFirstChildWithTagName(element, tagName) {
for (var i = 0; i < element.childNodes.length; i++) {
if (element.childNodes[i].nodeName == tagName) return element.childNodes[i];
}
}
function getHash(url) {
var hashPos = url.lastIndexOf('#');
return url.substring(hashPos + 1);
}​
</script>
There shouldn't be any problem with adding JavaScript to the header/footer. When you say it didn't work, did you check the source of the page, or did the behavior just not work? Did you check for JavaScript errors in your browser's console?
So far as adding JavaScript via the Basic/Raw view of the rich text editor, DNN strips JavaScript from the text editor by default. You can turn that off via the HTML Editor Manager (under Host).

Categories