Don’t misunderstand me – I use AJAX, but I think there is a far simpler, elegant alternative that just uses Javascript, the DOM and Php ( hence - JDOMP) for data transfers, and is cross-browser without the need for work arounds. JDOMP works in recent versions of Explorer, Mozilla, Safari and Opera. Please note I will not deal with security issues which are always an issue whenever there is access to a database.
You can simply change text on a page using the DOM without using innerHTML.
<DIV id=”mytext”>Loading…….</DIV>
<A id="mymod" href="javascript:textmod('mytext', 'the count is 5')">Change Counter</A>
<SCRIPT type="text/javascript" >
function textmod (elid, newtext) {
// get reference to the element
var ttext = document.getElementById(elid);
var new_txt = document.createTextNode(newtext);
ttext.replaceChild(new_txt, ttext.childNodes[0]);
}
</SCRIPT>Now to look at how to change text with data extracted from a database.
Let’s say you have a counter on the page and when the page loads you want to go to a PHP file update the counter and send back the data and change text on the page.
You start by adding this to the bottom of the HTML.
<SCRIPT type="text/javascript" SRC="mylinkcount.php "></SCRIPT>
For the PHP file - mylinkcount.php
<?php
Blah, blah, blah access database etc.
// out info
$div = "mytext";
$count = $clicks." - Visitors since 1 May 2008";
echo " textmod('$div','$count');";
?>You simply echo the javascript command with the variables. This will change the text on the page a second or so after the page loads. This is a JDOMP!
To do this dynamically you need to use the DOM to dynamically build the script command as above.
Let’s say we have a form and we want to show the information extracted from a database.
<form id="form1" name="form1">
Id:
<input id= "myid" name="myid" type="text" value="1" >
Word:
<input id= "myword" name="myword" type="text" value="First Word" >
</form>This link will inset blank values
<a href="javascript:clear()">Clear Me</A>
Using these functions
function clear() {
listmake(" ", " ")
}
function listmake(gotid, gotword) {
document.forms[0].myid.value = gotid
document.forms[0].myword.value = gotword
}To load data into the form dynamically from a database you need a container and a link
<DIV id="List">
<DIV id="Listp"></DIV>
</DIV>
<a href="javascript:getme(23)">Get Me 23</A> …. Get the word with id ‘23’And the function to build the script
function getme(mynum) {
var d = new Date();
var time = d.getTime();
var mynurl = "gme.php?myvar=" + myid //+ " &time = " + time
// url for php program with myid as the variable
// + time stamp added to avoid cache problems
//the following replaces Lisp with the script
var mydiv = document.getElementById("List");
var myoldp = document.getElementById("Listp");
var mynewp = document.createElement("DIV")
mynewp.id="Listp";
var docfrag = document.createDocumentFragment();
myelem = document.createElement("script")
docfrag.appendChild(myelem);
myelem.setAttribute("type","text/javascript")
myelem.setAttribute("src",mynurl)
docfrag.appendChild(myelem);
mynewp.appendChild(docfrag);
mydiv.replaceChild(mynewp, myoldp)
}It looks complicated but it’s a reusable function so once it works you can forget the details.
And the PHP file - gme.php
<?php
Blah, blah, blah access database etc.
// out info
$id = parseToXML($row['id']);
$word = parseToXML($row['word']);
echo " listmake('$id','$word');";
?>Once again you simply echo the javascript command and Voila! the data is transferred to the form.
Anyway that’s it. Try JDOMP and let me know what you think.
Cheers,
