Grayson Peddie Grayson Peddie - 2 years ago 76
HTML Question

Dynamically-Generated Anchor HREF That Calls A Function Not Working

I apologize if this kind of question has already been asked but I have looked through "Related Questions" and I don't think anything in here matches with mine, so please bear with me as I try to present my problem and how am I going to go about this, so here I go.

Okay, I will refer you my screenshot. Two of my tables have been generated by using Javascript and one is static and I didn't comment out the tbody tags within a listModulesWithinScene table.

http://img852.imageshack.us/i/haildstabletable.jpg/ (click in the link to view the image)

Here's my cut-down version of my HTML code for those who are interested. I'm pretty much new to this website, even though I do lurk through here from search engine (Google).

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans:100,regular' rel='stylesheet'
type='text/css' />
<link href="cssHomeAutomaionInterface.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="Scripts/SwitchContent.js"></script>
<script type="text/javascript" src="Scripts/ScrollingImagesInHeader.js"></script>
<script type="text/javascript" src="Scripts/XMLReaderWriter.js"></script>
<script type="text/javascript" src="Scripts/Main.js"></script>
<script type="text/javascript" src="Scripts/PageSpecific/Home.js"></script>
</head>
<body>
<!-- ... -->
<div id="home" class="container">
<div id="menuHome" class="submenu">

</div>
<div id="contentHome" class="content">
<h1>Home Page</h1>
<div id="moduleListArea">
<table id="listModules" class="data">
<caption>Lights and Devices</caption>
<thead>
<tr>
<th style="width: 100px;">Module ID#</th>
<th>Module Name</th>
<th style="width: 60px;">Status</th>
<th style="width: 150px">Action</th>
</tr>
</thead>
<!--<tbody>
<tr style="color: Green;" title="Dimmer">
<th>AB.CD.EF</th>
<td>2x Floor Lamp</td>
<td>75%</td>
<td>
<a href="#">Toggle</a>
<div style="float: right;">
<input style="width: 40px;" id="module1" value="75" />
<a href="#">Set</a>
</div>
</td>
</tr>
<tr style="color: Blue;" title="Switch">
<th>AB.CD.EE</th>
<td>Bedside Fan</td>
<td>ON</td>
<td>
<a href="#">Toggle</a>
</td>
</tr>
</tbody>-->
</table>
</div>
<div id="sceneListArea" style="width: 50%; float: left;">
<table id="listScenes" class="data">
<caption style="text-align: left;">Scenes</caption>
<thead>
<tr>
<th>Scene Name</th>
<th style="width: 80px">Action</th>
</tr>
</thead>
<!--<tbody>
<tr>
<td>Welcome Home</td>
<td><a href="#">Toggle</a></td>
</tr>
<tr>
<td>All Lights Off</td>
<td><a href="#">Toggle</a></td>
</tr>
</tbody>-->
</table>
</div>
<div id="modulesWithinSceneListArea"
style="width: 50%; float: right;">
<table id="listModulesWithinScene" class="data">
<caption style="text-align: right;">Lights and Devices Within Scene</caption>
<thead>
<tr>
<th style="width: 100px;">Module ID#</th>
<th>Scene Name</th>
<th style="width: 50px">Level</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>2x Floor Lamp</td>
<td>50%</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- ... -->
</body>
</html>
</code>


Now, let me go ahead and describe my problem.

So anyway, I want to call a function that's in the part of the code:

// Create a new anchor tag and name it "List."
var a_set = document.createElement("a");
a_set.href = "javascript:ListAllModulesWithinScene(listScenes_row" + r +
"_toggle";<br />
a_set.id = "listScenes_row" + r + "_set";
a_set.appendChild(document.createTextNode("List"));


I want javascript:ListAllModulesWithinScene(...) that is inside quotes to call the function (ListAllModulesWithinScene(sceneName)) in PageSpecific/Home.js, but nothing happens if I click the List link; so far, it's not working. This is the function that I'm trying to call.

function ListAllModulesWithinScene(sceneName)
{alert("test");
/* The part of the code that I took out fills up the table with the list of modules
that are part of the scene, each module having different levels/settings. */
}


The expected result is that I want to see the alert message box just to make sure it works before I call out the code to generate the rows of data like say...

function ListAllModulesWithinScene(sceneName)
{
/*listModulesWithinScene = document.getElementById("listModulesWithinScene");

// Delete the tbody tag if it does not exist and create a enw tbody tag.
if(listModulesWithinScene.getElementsByTagName("tbody") != null)
listModulesWithinScene.removeChild("tbody");
var listModulesWithinScene_tBody = document.createElement("tbody");

var xmlRows = xmlObj.childNodes[2].getElementsByTagName("Scene");

for (var r = 0; r < xmlRows.length; r++)
{
if (xmlRows[r].getAttribute("name") == sceneName)
{
var moduleRow = xmlRows[r].getElementsByTagName("Module");
if (moduleRow.length > 0)
{
var row = document.createElement("tr");
for (var msr = 0; msr < moduleRow.length; msr++)
{
var moduleRow2 = xmlObj.childNodes[1].getElementsByTagName("Module");
for (var mr = 0; mr < xmlRow2.length; mr++)
{
if (moduleRow[mr].getAttribute("id") ==
xmlObj.childNodes[1].childNodes[mr].getAttribute("id"))
{
var td_id = document.createElement("th");
td_id.appendChild(
document.createTextNode(moduleRow.getAttribute("id")));
td_id.setAttribute("id", "listModulesFromScene_row" + r +
"_id");
row.appendChild(td_id);

var td_name = document.createElement("td");
td_name.appendChild(
document.createTextNode(moduleRow2.getAttribute("name")));
td_name.setAttribute("id", "listModulesFromScene_row" + r +
"_name");
row.appendChild(td_name);

var td_level = document.createElement("td");
td_level.appendChild(
document.createTextNode(moduleRow.getAttribute("level")));
td_level.setAttribute("id", "listModulesFromScene_row" + r +
"_level");
row.appendChild(td_level);
}
}
}
}
}
}
listModulesWithinScene_tBody.appendChild(row);
listModulesWithinScene.appendChild(listModulesWithinScene_tBody);*/
}


In order to help get a better ideal of how my tables are generated, I want to post my entire code. I could provide more details about my problem but that's all I can provide for now.

This is the XMLReaderWriter.js file that I currently have.

/*
When it comes to loading and saving an XML file, it helps to try to keep the XML file organized
and well-formed, so it's best to not to modify the XML file UNLESS you know what you're doing.

The structure of an XML file is as follows:

<?xml version="1.0" encoding="utf-8" ?>
<HomeAutomationInterface>
<Setup>
<Location longitude="" latitude="" />
</Setup>
<Modules>
<!-- The first row is an example. -->
<Module id="1" name="module name" level="ON" type="dimmer">
<!-- ... -->
</Modules>
<Scenes>
<!-- the first row is an example. It can contain multiple modules. -->
<scene name="Scene Name">
<module id="1" level="50">
<module id="2" level="60">
<!-- ... -->
</scene>
<!-- ... -->
</Scenes>
<Timers>
<!-- The following four rows are an example. For DST, sunrise and sunset
is dependent in longitude and latitude. How this works is this:

1. Go to this website and enter your address information.
http://stevemorse.org/jcal/latlon.php

2. Go here and enter your today's date, followed by longitude and latitude,
and time zone: http://www.weatherimages.org/latlonsun.html

3. You should get your information related to sunrise and sunset. It should
look like this:

Thursday
10 March 2011 Universal Time - 5h

SUN
Begin civil twilight 06:30
Sunrise 06:54
Sun transit 12:48
Sunset 18:42
End civil twilight 19:06

Now that's how you get your times for your sunruse and sunset.
-->
<timer name="Timer Name 1" type="regular">
<regular time="hour:minute:second:millisecond">
<module id="1" level="50">
<!-- ... -->
</regular>
</timer>
<timer name="Timer Name 2" type="regular">
<regular time="hour:minute:second:millisecond">
<scene name="Scene Name">
<!-- ... -->
</regular>
</timer>
<timer name="Timer Name 3" type="DST">
<DST occour="sunrise|sunset" offsetDir="later|sooner"
offset="hour:minute:second:millisecond">
<module id="1" level="75">
<!-- ... -->
</DST>
</timer>
<timer name="Timer Name 4" type="DST">
<DST occour="sunrise|sunset" offsetDir="later|sooner"
offset="hour:minute:second:millisecond">
<scene name="Scene Name">
<!-- ... -->
</DST>
</timer>
<!-- ... -->
</Timers>
</HomeAutomationInterface>

It's a long documentation, but it helps to understand what this XML structure is all about.
*/

// Not for Internet Explorer 6 or below.
var xmlDoc;
var xmlObj;

// For HTML tables (<table>)
var listModules;
var listScenes;
var listModulesWithinScene;

// For HTML text boxes
var inputLongitude;
var inputLatitude;

function LoadXML()
{
// ActiveXObject will have to be checked first to see if it's defined. Otherwise, if you
// try to check XMLHttpRequest first, even if Internet Explorer supports it, you will get
// "Access Denied" in Internet Explorer and perhaps not in Firefox.
if (window.ActiveXObject)
{
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.load("HomeAutomationInterface.xml");
PopulateFromXML();
}
else
{
// If this is the only code in this function, then you will need to put all your
// project in the server, since Internet Explorer has a "Same Origin Policy" which
// I believe that the open method with "GET" causes a problem in Internet Explorer
// but did not cause a problem in Firefox. In order to rectify the problem, the code
// inside if(window.ActiveXObject) makes use of ActiveX.
xmlDoc = new XMLHttpRequest();
xmlDoc.open("GET", "HomeAutomationInterface.xml", null)
xmlDoc.send(null);
if (xmlDoc.status == 200)
{
xmlDoc = xmlDoc.responseXML;
PopulateFromXML();
}
}
}

function PopulateFromXML()
{
listModules = document.getElementById(
"listModules").getElementsByTagName("tbody");

// Gather the text fields for location data.
inputLongitude = document.getElementById("inputLongitude")
inputLatitude = document.getElementById("inputLatitude")

// Firefox's DOM Parser treats whitespaces as text nodes, including
// line breaks.
removeWhitespace(xmlDoc.documentElement);

// Send the document's root element to the XML Object variable.
xmlObj = xmlDoc.documentElement;

// Perform the checks and populate the tables
// and any other elements that are needed.
if (xmlObj.tagName == "HomeAutomationInterface")
{
// Check to be sure the first node is the "Setup" node. It contains the
// location node.
if ((xmlObj.childNodes[0].tagName == "Setup") &&
(xmlObj.childNodes[0].childNodes[0].tagName == "Location"))
{
// Copy the data from one of the attributes to the respective text boxes.
inputLongitude.value = xmlObj.childNodes[0]
.childNodes[0].getAttribute("longitude");
inputLatitude.value = xmlObj.childNodes[0]
.childNodes[0].getAttribute("latitude");
}
// The second node within the root element is Modules node.
// This will be implemented.
if (xmlObj.childNodes[1].tagName == "Modules")
{
//TODO: Implement the XML-to-Table translation that gets info
// about modules.
listModules = document.getElementById("listModules");
var listModules_tBody = document.createElement("tbody");
var xmlRows = xmlObj.childNodes[1].getElementsByTagName("Module");

for (var r = 0; r < xmlRows.length; r++)
{
var xmlRow = xmlRows[r];
var row = document.createElement("tr");

var td_id = document.createElement("th");
td_id.appendChild(document.createTextNode(xmlRow.getAttribute("id")));
td_id.setAttribute("id", "listModules_row" + r + "_id");
row.appendChild(td_id);

var td_name = document.createElement("td");
td_name.appendChild(document.createTextNode(xmlRow.getAttribute("name")));
td_name.setAttribute("id", "listModules_row" + r + "_name");
row.appendChild(td_name);

var td_level = document.createElement("td");
td_level.appendChild(document.createTextNode(xmlRow.getAttribute("level")));
td_level.setAttribute("id", "listModules_row" + r + "_level");
row.appendChild(td_level);

if (xmlRow.getAttribute("type") == "dimmer")
{
row.style.color = "Green";

// Create a new table cell for a dimmer. This will include a toggle,
// a text box, and a set button.
var td_dimmer = document.createElement("td");

// Create a new anchor tag and, set the href to #, and name it "Toggle."
var a_toggle = document.createElement("a");
a_toggle.href = "#";
a_toggle.id = "listMoudles_row" + r + "_dimmer_toggle";
a_toggle.appendChild(document.createTextNode("Toggle"));

td_dimmer.appendChild(a_toggle);

// Create a new div element to hold a text box and a set button.
var div_floatright = document.createElement("div");
div_floatright.style.float = "right";

// Create a new text box and append it to the div element.
var input_level = document.createElement("input");
input_level.type = "text";
input_level.name = "listModules_row" + r + "_inputLevel";
input_level.id = "listModules_row" + r + "_inputLevel";
input_level.style.width = "40px";

div_floatright.appendChild(input_level);

// Create a new anchor tag, set the href to #, and name it "Set."
var a_set = document.createElement("a");
a_set.href = "#";
a_set.id = "listMoudles_row" + r + "_dimmer_set";
a_set.appendChild(document.createTextNode("Set"));

div_floatright.appendChild(a_set);

// Append the div element to the table cell.
td_dimmer.appendChild(div_floatright);

// Finally, append the table cell to the row.
row.appendChild(td_dimmer);
}
else if (xmlRow.getAttribute("type") == "switch")
{
row.style.color = "Blue";

// Create a new table cell for a dimmer. This will include a toggle,
// a text box, and a set button.
var td_switch = document.createElement("td");

// Create a new anchor tag and, set the href to #, and name it "Toggle."
var a_toggle = document.createElement("a");
a_toggle.href = "#";
a_toggle.id = "listMoudles_row" + r + "_dimmer_toggle";
a_toggle.appendChild(document.createTextNode("Toggle"));

td_switch.appendChild(a_toggle);

row.appendChild(td_switch);
}
else
{
row.style.color = "Black";
row.appendChild(document.createTextNode("No actions available."));
}

listModules_tBody.appendChild(row);
}
listModules.appendChild(listModules_tBody);

// Uncomment this code and run the example.
//alert(listModules_row0_name.textContent);
}
// The third node within the root element is Scenes node.
// You need modules in order for scenes to work.
// This will be implemented.
if (xmlObj.childNodes[2].tagName == "Scenes")
{
listScenes = document.getElementById("listScenes");
var listScenes_tBody = document.createElement("tbody");
var xmlRows = xmlObj.childNodes[2].getElementsByTagName("Scene");

for (var r = 0; r < xmlRows.length; r++)
{
var xmlRow = xmlRows[r];
var row = document.createElement("tr");

var td_name = document.createElement("td");
td_name.appendChild(document.createTextNode(xmlRow.getAttribute("name")));
td_name.setAttribute("id", "listScenes_row" + r + "_name");
row.appendChild(td_name);

row.appendChild(td_name);

var td_actions = document.createElement("td");

// Create a new anchor tag and name it "Toggle."
var a_toggle = document.createElement("a");
a_toggle.href = "#";
a_toggle.id = "listScenes_row" + r + "_toggle";
a_toggle.appendChild(document.createTextNode("Toggle"));

// Create a new anchor tag and name it "List."
var a_set = document.createElement("a");
a_set.href = "javascript:ListAllModulesWithinScene(listScenes_row" + r +
"_toggle";
a_set.id = "listScenes_row" + r + "_set";
a_set.appendChild(document.createTextNode("List"));

td_actions.appendChild(a_toggle);
td_actions.appendChild(a_set);

row.appendChild(td_actions);

listScenes_tBody.appendChild(row);
}
listScenes.appendChild(listScenes_tBody);
}
// The last element is the Timers node.
// This will either activate the scene or turn on, off,
// dim, brighten, or set the light level of the module if
// it is the light module or turn on or off the appliance
// module. This will be implemented.
if (xmlObj.childNodes[3].tagName == "Timers")
{
//TODO: Implement a XML-to-Table parser that parses the XML data
// from the timers tag into the timer table.
}
}
}

// I stumbled across http://www.agavegroup.com/?p=32 and I borrowed the code from
// http://stackoverflow.com/questions/2792951/firefox-domparser-problem
// It took me a week to debug all my code until I find out what's going on with Firefox's
// DOM Inspector.
function removeWhitespace(node)
{
for (var i = node.childNodes.length; i-- > 0; )
{
var child = node.childNodes[i];
if (child.nodeType === 3 && child.data.match(/^\s*$/))
node.removeChild(child);
if (child.nodeType === 1)
removeWhitespace(child);
}
}


And now as for my background information, I'm doing this as my project for COP2822 (Scripting for the Web), so it's only Javascript and not server-side, so I have endured a lot of pain, but was able to make it through, so my experience with Javascript is well worth it in the end. I did have some experience with Javascript before I take COP2822, though.

Answer Source

Welcome to SO. Considering you copy pasted your code

a_set.href = "javascript:ListAllModulesWithinScene(listScenes_row"
           + r + "_toggle)";//<br />

You had a weird br tag in the middle of your js code and you had a missing ) in the function call.

If you still have issues, post and I'll try to discuss. I suggest getting a browser or extension to your browser that supplies a javascript console. In my opinion it's invaluable to debugging.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download