DIV in HTML with AJAX
Hi Guys,
i have a problem, the script below works fine generally in loading the external file into the div.
However there is one issue, i have i problems updating the informations.
For example.
i input information like first in test.htm: test Filling
i visit the link. (it appears as test Filling in bold which is correct)
i then admend the test.htm to: test Filling *Note....etc..
i revisit the link. (it still appears as test Filling in bold only.)
where went wrong? is there a setting i need to change? thanks in advance.
[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
******** type="text/javascript">
function ahah(url, target) {
document.getElementById(target).innerHTML = "Requesting content...";
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
if (req != undefined) {
req.onreadystatechange = function() {ahahDone(url, target);};
req.open("GET", url, true);
req.send("");
}
}
function ahahDone(url, target) {
if (req.readyState == 4) { // only if req is "loaded"
if (req.status == 200) { // only if "OK"
document.getElementById(target).innerHTML = req.responseText;
} else {
document.getElementById(target).innerHTML=" HTML Error:\n"+ req.status + "\n" +req.statusText;
}
}
}
function load(name, div) {
ahah(name,div);
return false;
}
</script>
<title>EMbed script</title>
<style type="text/css">
A:link, A:visited, A:active
{text-decoration: none; font-weight: bold; color:#000000; padding: 0px;}
A:hover
{text-decoration: underline; color:#000000; font-weight: bold; border: 0px solid #000000; padding: 15px;}
.head
{font-family:Arial; font-weight: bold; font-size: 20px; line-height:10px; color:#000000; text-align:Left;}
.text
{font-family:Arial; font-weight: normal; font-size: 12px; line-height:10px; color:#000000; text-align:Left;}
hr
{border: 0px none; color: #f00; background-color: #ffc453; height: 1px}
</style>
</head>
<body>
</br>
<table border="0" style="position:absolute;top:30px;left:30px">
<font face="Arial" size="3"><b><u>Please Select:</b></u></br></br>
<a href="test.htm" onclick="javascript:load('test.htm','content');return false;"><font face="Arial" size="2">test Filling</a></br>
<a href="test2.htm" onclick="javascript:load('test2.htm','content');return false;"><font face="Arial" size="2">test2 Filling</a></br>
</table>
<div id="content" style="position:absolute;top:200px;left:30px"> </div>
</body>
</html>[/HTML]
i have a problem, the script below works fine generally in loading the external file into the div.
However there is one issue, i have i problems updating the informations.
For example.
i input information like first in test.htm: test Filling
i visit the link. (it appears as test Filling in bold which is correct)
i then admend the test.htm to: test Filling *Note....etc..
i revisit the link. (it still appears as test Filling in bold only.)
where went wrong? is there a setting i need to change? thanks in advance.
[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
******** type="text/javascript">
function ahah(url, target) {
document.getElementById(target).innerHTML = "Requesting content...";
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
if (req != undefined) {
req.onreadystatechange = function() {ahahDone(url, target);};
req.open("GET", url, true);
req.send("");
}
}
function ahahDone(url, target) {
if (req.readyState == 4) { // only if req is "loaded"
if (req.status == 200) { // only if "OK"
document.getElementById(target).innerHTML = req.responseText;
} else {
document.getElementById(target).innerHTML=" HTML Error:\n"+ req.status + "\n" +req.statusText;
}
}
}
function load(name, div) {
ahah(name,div);
return false;
}
</script>
<title>EMbed script</title>
<style type="text/css">
A:link, A:visited, A:active
{text-decoration: none; font-weight: bold; color:#000000; padding: 0px;}
A:hover
{text-decoration: underline; color:#000000; font-weight: bold; border: 0px solid #000000; padding: 15px;}
.head
{font-family:Arial; font-weight: bold; font-size: 20px; line-height:10px; color:#000000; text-align:Left;}
.text
{font-family:Arial; font-weight: normal; font-size: 12px; line-height:10px; color:#000000; text-align:Left;}
hr
{border: 0px none; color: #f00; background-color: #ffc453; height: 1px}
</style>
</head>
<body>
</br>
<table border="0" style="position:absolute;top:30px;left:30px">
<font face="Arial" size="3"><b><u>Please Select:</b></u></br></br>
<a href="test.htm" onclick="javascript:load('test.htm','content');return false;"><font face="Arial" size="2">test Filling</a></br>
<a href="test2.htm" onclick="javascript:load('test2.htm','content');return false;"><font face="Arial" size="2">test2 Filling</a></br>
</table>
<div id="content" style="position:absolute;top:200px;left:30px"> </div>
</body>
</html>[/HTML]
0
Comments
Here's what I would do if I were you:
1) get prototype
2) Put the html you want to include in a document root of a server like apache or IIS so that you can serve it over http
3) mess with your javascript a tad
prototype:
[PHP]
function ahah(url, target){
var myDiv= document.getElementById(target);
// i personally hate the $ syntax, but that's just me
Element.extend(myDiv);
myDiv.update("Requesting content...");
new Ajax.Updater(myDiv, url, { method: 'get' });
}
[/PHP]
of course i didnt test this... but it's pretty trivial. and that 'requesting content' bit probably would happen so fast that you wouldnt be able to see it. i only ever give loading messages in ajax pages if the ajax call is doing anything with a database or calling dynamic content where there may be a noticeable lag.
All of this could also be done easily with jquery.
word to the wise... don't EVER set the inner html of a div with innerHTML='some text'. that clobbers the DOM object. work with the dom, not against it.
but i have another problem now.. take a look:
[PHP]
<?
//here is the checking part for any attachement uploaded
if ($attachment == true && $attach == yes) { require("attach-rd.php"); }
elseif ($attach == no && $attachment == false) { require("plain-rd.php"); }
elseif ($attach == yes && $attachment == false) { header('Location:http://Itis-jzcintra3/03. Knowledge Centre/Knowledge Centres/attacherror.htm'); }
?>[/PHP]
the ($attach == yes && $attachment == false) seems to work but the
elseif ($attach == no && $attachment == false) doesn't work at all..
any solutions? i check the file is there in the server but it isn't working.