/    Sign up×
Community /Pin to ProfileBookmark

using a variable inside functions

I’ve trying to declare a variable outside of any functions, so that functions are able to assign a value to it, and other functions retreive the value, however I’m not able to get it to work.

I get an error around about

[CODE]
function getPage(dataSource, request) {
getData(dataSource, request);
if (xmlDocument.getElementsByTagName(“keywords”)[0].hasChildNodes()) {
var keywords = xmlDocument.getElementsByTagName(“keywords”)[0].firstChild.data;
} else {
var keywords = ”;
}
[/CODE]

which tells me that xmlDocument is either null or not an object.

I’ve tried assigning value and retreiving them using window.xmlDocument but I get the same error message.

Heres the whole code of the page.

[CODE]
<html>
<head>
<title>Ajax and PHP at work</title>
<script language=”javascript”>
var xmlDocument;
var XMLHttpRequestObject = false;

if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
XMLHttpRequestObject = new ActiveXObject(“Microsoft.XMLHTTP”);
}

function getData(dataSource, request) {
if(XMLHttpRequestObject) {
XMLHttpRequestObject.open(“POST”, dataSource);
XMLHttpRequestObject.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);
XMLHttpRequestObject.onreadystatechange = function() {
if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) {
xmlDocument = XMLHttpRequestObject.responseXML;
}
}
XMLHttpRequestObject.send(request);
}
}

function getPage(dataSource, request) {
getData(dataSource, request);
if (xmlDocument.getElementsByTagName(“keywords”)[0].hasChildNodes()) {
var keywords = xmlDocument.getElementsByTagName(“keywords”)[0].firstChild.data;
} else {
var keywords = ”;
}
if (xmlDocument.getElementsByTagName(“title”)[0].hasChildNodes()) {
var title = xmlDocument.getElementsByTagName(“title”)[0].firstChild.data;
} else {
var title = ”;
}
if (xmlDocument.getElementsByTagName(“description”)[0].hasChildNodes()) {
var description = xmlDocument.getElementsByTagName(“description”)[0].firstChild.data;
} else {
var description = ”;
}
if (xmlDocument.getElementsByTagName(“content”)[0].hasChildNodes()) {
var content = xmlDocument.getElementsByTagName(“content”)[0].firstChild.data;
} else {
var content = ”;
}
document.write(title);
document.write(description);
document.write(keywords);
document.write(content);
}

</script>
</head>
<body>
<H1>Fetching data with Ajax and PHP</H1>
<form>
<input type=”button” value=”Display Message” onclick=”getPage(‘php_content_get.php’,’id=25′);”>
</form>
<div id=”targetDiv”>
<p>The fetched data will go here.</p>
</div>
</body>
</html>
[/CODE]

to post a comment
JavaScript

4 Comments(s)

Copy linkTweet thisAlerts:
@Angry_Black_ManAug 09.2007 — ultimater may know. that guy's my hero
Copy linkTweet thisAlerts:
@KorAug 09.2007 — Not a wise idea to set a request response as a global variable. Why not pass the XML object through functions?
Copy linkTweet thisAlerts:
@UltimaterSep 12.2007 — Hey thread, sort of searched for my name and came across this thread...

A quick fix would be to switch to a Synchronous request:
<i>
</i>XMLHttpRequestObject.open("POST", dataSource[color=blue], false[/color]);

However Synchronous requests are unprofessional since it causes the rest of JavaScript to hold its breath -- thus user triggered events with event handlers will be temporarily off-guard. If you do plan on using Sjax and using the above quick unprofessional fix, you should also rid of the onreadystatechange event handler callback for better compatibility since some browsers don't fire the onreadystatechange event handler with Synchronous requests like they do with Asynchronous requests,


Enough with quick fixes, why is your code firing an error?

The problem is here:
<i>
</i>...
getData(dataSource, request);
if (xmlDocument.getElementsByTagName("keywords")[0].hasChildNodes()){
...

xmlDocument.getElementsByTagName is being referenced in the if-statement before xmlDocument is defined. Let's look at getData:
<i>
</i>function getData(dataSource, request) {
if(XMLHttpRequestObject) {
XMLHttpRequestObject.open("POST", dataSource);
XMLHttpRequestObject.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
XMLHttpRequestObject.onreadystatechange = function() {
if (XMLHttpRequestObject.readyState == 4 &amp;&amp; XMLHttpRequestObject.status == 200) {
xmlDocument = XMLHttpRequestObject.responseXML;
}
}
XMLHttpRequestObject.send(request);
}
}

Since an Asynchronous request is being used, the JavaScript interpreter doesn't wait for the onreadystatechange to fire before it continues to interpret statements and thus the function returns the default value of [i]undefined[/i] (since no return value is specified for the getData function) then it sees the next statement:
<i>
</i>if(xmlDocument.getElementsByTagName("keywords")[0].hasChildNodes())

and that is where JavaScript fires an error regarding xmlDocument since it is undefined and contains no properties as of the time the statement is executed. Understand how the error came about now?

A fix for an Asynchronous request would be:
<i>
</i>function getPage(dataSource, request) {
var callback=function(xmlDocument){
if (xmlDocument.getElementsByTagName("keywords")[0].hasChildNodes()) {
var keywords = xmlDocument.getElementsByTagName("keywords")[0].firstChild.data;
} else {
var keywords = '';
}
if (xmlDocument.getElementsByTagName("title")[0].hasChildNodes()) {
var title = xmlDocument.getElementsByTagName("title")[0].firstChild.data;
} else {
var title = '';
}
if (xmlDocument.getElementsByTagName("description")[0].hasChildNodes()) {
var description = xmlDocument.getElementsByTagName("description")[0].firstChild.data;
} else {
var description = '';
}
if (xmlDocument.getElementsByTagName("content")[0].hasChildNodes()) {
var content = xmlDocument.getElementsByTagName("content")[0].firstChild.data;
} else {
var content = '';
}
document.write(title);
document.write(description);
document.write(keywords);
document.write(content);
};//callback
getData(dataSource, request,callback);
}//function

function getData(dataSource, request,callback) {
if(XMLHttpRequestObject) {
XMLHttpRequestObject.open("POST", dataSource);
XMLHttpRequestObject.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
(function(XMLHttpRequestObject,callback){
XMLHttpRequestObject.onreadystatechange = function() {
if (XMLHttpRequestObject.readyState == 4 &amp;&amp; (XMLHttpRequestObject.status == 200 || !XMLHttpRequestObject.status)) {
callback(XMLHttpRequestObject.responseXML)
}
}
})(XMLHttpRequestObject,callback);
XMLHttpRequestObject.send(request);
}
}
Copy linkTweet thisAlerts:
@CrazyMerlinSep 12.2007 — sort of searched for my name and came across this thread...[/QUOTE]

that's modesty right there! ?
×

Success!

Help @littlened spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.28,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...