/    Sign up×
Community /Pin to ProfileBookmark

Filling span tag with HTML from AJAX/Javascript

Copy linkTweet thisAlerts:
Dec 20.2007

I am aiming to fill a span tag coded in my index.php page with an HTML page through using AJAX technology.

This is the code I have so far although it only displays Login.html text i.e. I need to find a function that recognises the file.

[CODE]var element = document.getElementById(“programTarget”);
var HTMLContent = document.createElement(“login.html”);

element.innerHTML = “”;

element.appendChild(HTMLContent);

[/CODE]

Cheers anyone
John

to post a comment
JavaScript

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@TJ111Dec 20.2007 — document.createElement("login.html") will return flas or return in error. You can only create DOM nodes (html tags) using the "createElement" function. You need to open an xmlHttprequest object with the server, then use that to get the contents of the file. Then you can update "element" however you want.
Copy linkTweet thisAlerts:
@john7832authorDec 20.2007 — Cheers for reply.

I understand now, bit rusty on AJAX.

[CODE]
myXMLHTTPRequest = new XMLHttpRequest();
myXMLHTTPRequest.open("GET", "login.html", true);
myXMLHTTPRequest.send(null);
[/CODE]

How would I update the element though?

This was my guess that did not work:

[CODE] programData = myXMLHTTPRequest.responseXML;

var XMLContent = programProcessor.transformToFragment(programData, document);

while (element.firstChild)
{
element.removeChild(element.firstChild);
}

element.appendChild(XMLContent);[/CODE]
Copy linkTweet thisAlerts:
@john7832authorDec 20.2007 — Surely this would work:

[CODE]myXMLHTTPRequest = new XMLHttpRequest();
myXMLHTTPRequest.open("GET", "login.html", true);
myXMLHTTPRequest.send(null);

element.innerHTML = myXMLHTTPRequest.responseText;[/CODE]
Copy linkTweet thisAlerts:
@TJ111Dec 20.2007 — Surely this would work:

[CODE]myXMLHTTPRequest = new XMLHttpRequest();
myXMLHTTPRequest.open("GET", "login.html", true);
myXMLHTTPRequest.send(null);

element.innerHTML = myXMLHTTPRequest.responseText;[/CODE][/QUOTE]

Only in non IE browsers I think. I think you need to use ActiveX for IE.
<i>
</i>function xmlHttpOpen() { <br/>
var ajaxRequest;
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// No Ajax or Function Failure
alert("AJAX supported browser required for this page.");
return false;
}
}
}
return ajaxRequest;
}
Copy linkTweet thisAlerts:
@john7832authorDec 20.2007 — I am only developing for Firefox at the moment and will do all IE code later.

So your saying that the code I put should work?

Im using firebug - javascript debugger - really good addon for firefox and it says that the login.html has loaded in 141ms but it does not show - weird.
Copy linkTweet thisAlerts:
@TJ111Dec 20.2007 — If it doesn't work now, try this:
<i>
</i>//shortened to "x" just for example purposes
x = new XMLHttpRequest();

x.onreadystatechange = function() {
if (x.readyState == 4) {
element.innerHTML = x.responseText;
}
}

x.open("GET", "login.html", true);
x.send(null);


I am only developing for Firefox at the moment and will do all IE code later.
[/quote]

You sir, are a smart man.
Copy linkTweet thisAlerts:
@john7832authorDec 20.2007 — Yep, that did the trick - thanks.

Cannot see how it is different though.

Cheers
Copy linkTweet thisAlerts:
@TJ111Dec 20.2007 — Because it's immediately trying to find responseText, which doesn't exist until it's returned from the server. The onreadystatechange acts like an event handler (like onclick, etc), so every time the status with the server changes the function gets called again (a total of 4 times).
×

Success!

Help @john7832 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 6.17,
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: @nearjob,
tipped: article
amount: 1000 SATS,

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

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...