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).
Related
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
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/
I have this line
<td><xsl:value-of select="product_name"/></td>
When i try to get the return value of the function getTableRow() and display it to href link i take key=undefined.Why happen that?
This is my script on the head of html
<script type="text/javascript">
function getTableRow() {
var rowIdx;
var rowData= [];
var selectedRow;
var rowCellValue;
if (!document.getElementsByTagName || !document.createTextNode) return;
var rows = document.getElementById('products_table').getElementsByTagName('tbody')[0].getElementsByTagName('tr');
for (i = 0; i < rows.length; i++) {
rows[i].onclick = function() {
rowIdx = this.rowIndex;
selectedRow= this.cells;
for(j= 0;j<selectedRow.length;j++){
rowCellValue= selectedRow[j].textContent ||
selectedRow[j].innerText;
rowData.push('cell '+j+': '+rowCellValue);
}
}
}
return "Row #" +rowIdx+'. '+ rowData[i];
}
</script>
I try many solution but nothing work..Please help..
In the beginning the only thing i want is to return the rowIndex.Even in that i get undefined.Why happend that?My first code before i try to get the content from row that user select.
<script type="text/javascript">
var userSelect;
function getTableRow() {
if (!document.getElementsByTagName || !document.createTextNode) return;
var rows = document.getElementById('products_table').getElementsByTagName('tbody')[0].getElementsByTagName('tr');
for (i = 0; i < rows.length; i++) {
rows[i].onclick = function() {
userSelect = this.rowIndex;
}
}
return userSelect;
}
</script>
It's probably being caused
if (!document.getElementsByTagName || !document.createTextNode) return;
If you are getting undefined.
Best thing I can suggest is throw a load of debugging in e.g. :
<script type="text/javascript">
function getTableRow() {
console.log( "getTableRow function called" );
var rowIdx;
var rowData= [];
var selectedRow;
var rowCellValue;
if (!document.getElementsByTagName || !document.createTextNode) {
console.log( document.getElementsByTagName, document.createTextNode, "Returning early" );
return;
}
var rows = document.getElementById('products_table').getElementsByTagName('tbody')[0].getElementsByTagName('tr');
for (i = 0; i < rows.length; i++) {
rows[i].onclick = function() {
rowIdx = this.rowIndex;
selectedRow= this.cells;
for(j= 0;j<selectedRow.length;j++){
rowCellValue= selectedRow[j].textContent ||
selectedRow[j].innerText;
rowData.push('cell '+j+': '+rowCellValue);
}
}
}
console.log( "Returning correctly" );
return "Row #" +rowIdx+'. '+ rowData[i];
}
</script>
If you're using firefox get yourself http://getfirebug.com/ and see what the console outputs
If you're using chrome press F12 and click on console and see what that says
If you're unsure about what's available in the document element try :
https://developer.mozilla.org/en/docs/Web/API/Element
http://msdn.microsoft.com/en-us/library/ie/ms535862(v=vs.85).aspx
http://www.w3schools.com/jsref/dom_obj_document.asp
I need to get more than one element to toggle open and closed. Right now the function is just selecting the ID, but I'd like to know how to get it to select a class. I thought I could change the document.getElementById to document.getElementByClass but that didn't work.
I picked this bit of code during my search:
#ToggleTarget {display:hidden;}
<script type="text/javascript">
function Toggle() {
var el = document.getElementById("ToggleTarget");
if (el.style.display == "block") {
el.style.display = "none";
}
else {
el.style.display = "block";
}
}
</script>
var getElementsByClassName = function(node, classname) {
if (document.getElementsByClassName) {
return document.getElementsByClassName(classname);
}
var a = [];
var re = new RegExp('(^| )'+classname+'( |$)');
var els = node.getElementsByTagName("*");
for(var i=0,j=els.length; i<j; i++)
if(re.test(els[i].className))a.push(els[i]);
return a;
}
var Toggle = function(){
var tp = getElementsByClassName(document.documentElement,'toggle');
for(var i = 0; i < tp.length; i++){
if(tp[i].style.display=='none')
tp[i].style.display='block'
else
tp[i].style.display='none'
}
}
Use getElementsByClassName and then loop through them.
EDIT
Just make sure they have the class toggle as used in my code above.
UPDATE
Added function for IE support (adopted from https://stackoverflow.com/a/7410966/600101).
I have text on a page, its in a <h3> tag, which has a class ms-standardheader, but there are other texts on the page with the same class in its own <h3> tag. I also know the text I want to hide is 'Session'.
With this how can I write a javascript function to hide only this text?
Here is an image of the developtools from IE.
I'd suggest, if you're restricted (as your tags suggest) to non-library plain JavaScript, the following:
var h3s = document.getElementsByTagName('h3'),
classedH3 = [];
for (var i = 0, len = h3s.length; i < len; i++) {
if (h3s[i].className.indexOf('ms-standardheader') > -1) {
classedH3.push(h3s[i]);
}
}
for (var i = 0, len = classedH3.length; i < len; i++) {
if (classedH3[i].firstChild.nodeValue == 'the text to hide'){
classedH3[i].style.display = 'none';
}
}
JS Fiddle demo.
References:
push().
document.getElementsByTagName().
element.className.
node.nodeValue.
indexOf().
Can't you give the target element an ID? That would make things much more simple. Otherwise, you have to go through all <h3> elements until you find the one you want to hide:
var headings = document.getElementsByTagName("h3");
for(var i=0; i<headings.length; i++) {
var contentElement = headings[i].getElementsByTagName('nobr');
var content = "";
if(contentElement.length) {
content = contentElement[0].textContent ? contentElement[0].textContent : contentElement[0].innerText;
}
var content = contentElement.length ? contentElement[0].childNodes[0].nodeValue : '';
if(headings[i].className == 'ms-standardheader' && content == 'Session') {
headings[i].style.display = 'none';
}
}
you should try this :
window.onload = function()
{
getElementByClass('ms-standardheader');
}
window.getElementByClass = function(theClass){
var allHTMLTags=document.getElementsByTagName('*');
for (i=0; i<allHTMLTags.length; i++) {
if (allHTMLTags[i].className==theClass) {
var content = allHTMLTags[i].innerHTML;
var search = /session/;
if (search.test(content))
{
alert(search);
allHTMLTags[i].style.display='none';
}
}
}
}
See Demo : http://jsfiddle.net/3ETpf/18/
Always favour a unique Id where possible. If not possible then you have to manually traverse the DOM to find the elements you are looking for. Here's an example using getElementsByTagName().
var i, header, headers = document.getElementsByTagName('h3');
for (i = 0; i < headers.length; i += 1) {
header = headers[i];
if (header.className === 'ms-standardheader' &&
(header.textContent || header.innerText) === 'Session') {
header.style.display = 'none';
}
}
see: http://jsfiddle.net/whP5z/
If you have jquery you may type this :
$("h3.ms-standardheader:contains('Session')").hide();