The Author Online Book Forums are Moving

The Author Online Book Forums will soon redirect to Manning's liveBook and liveVideo. All book forum content will migrate to liveBook's discussion forum and all video forum content will migrate to liveVideo. Log in to liveBook or liveVideo with your Manning credentials to join the discussion!

Thank you for your engagement in the AoF over the years! We look forward to offering you a more enhanced forum experience.

jolietman (3) [Avatar] Offline
#1
I feel like I am missing something pretty basic here. I copied some example code to illustrate my problem below (the function structure is just based off the actual application I am writing). If I call "createNav", the callback handler, on its own line of code, the alert test message shows the created element's id just fine. If I leave the code as is below, I get a JS error saying "Test has no properties". net.ContentLoader is pulling data from the server correctly, but for this example I didn't actually use the results. Any ideas?

<html>
<head>
<script type="text/javascript" src="net.js"></script>
<script type="text/javascript">
window.onload = function() {
loadNavigation();
var Test = document.getElementById("foo");
alert(Test.id);
}

function loadNavigation() {
var loader=new net.ContentLoader("serveNavigation2.cfm", createNav, null, "POST");
//createNav();
}

function createNav() {
var linktest = document.getElementById("testDiv");

makeUserNav(linktest);
}

function makeUserNav(el) {
var tempelement = document.createElement("a");
tempelement.setAttribute("id", "foo");

el.appendChild(tempelement);
}

</script>
</head>

<body>
<div id="testDiv"></div>
</body>
</html>
Pascarello (208) [Avatar] Offline
#2
Re: net.ContentLoader callback problem
You have no element with an id of foo so you will get an error when you try referenceing an element that does not exist.

Eric
jolietman (3) [Avatar] Offline
#3
Re: net.ContentLoader callback problem
Don't understand why the forum won't let me include the body part of the code without throwing out all of the formatting, but here is the code below cleaned up.

In the makeUserNav function, I set the id for the a element I create to "foo". And it works when I uncomment createNav function and comment out the call to the net.ContentLoader. Like I said -- I feel like I am missing something basic here.

<script type="text/javascript" src="net.js"></script>
<script type="text/javascript">

window.onload = function() {
loadNavigation();
var Test = document.getElementById("foo");
alert(Test.id);
}

function loadNavigation() {
var loader=new net.ContentLoader("serveNavigation2.cfm", createNav, null, "POST");
//createNav();
}

function createNav() {
var linktest = document.getElementById("testDiv");
makeUserNav(linktest);
}

function makeUserNav(el) {
var tempelement = document.createElement("a");
tempelement.setAttribute("id", "foo");
el.appendChild(tempelement);
}
</script>
Pascarello (208) [Avatar] Offline
#4
Re: net.ContentLoader callback problem
Remember you are doing the XHR request asychronously, so it is going to the server.

The lines
var Test = document.getElementById("foo");
alert(Test.id);

are being called BEFORE it is created. You need to wait to do these steps after the request comes back.

Eric
jolietman (3) [Avatar] Offline
#5
Re: net.ContentLoader callback problem
Sigh, yes, I get it now, and it was obvious. I guess I'm just not used to working in this environment. Thanks for the help.