View Thread: JDOMP - DB access without AJAX using Javascript, DOM, Php

Welcome Guest | Register | Login

Killersites.com Forum

Category: Programming

Forum: AJAX, Dom Scripting and JavaScript

Thread: JDOMP - DB access without AJAX using Javascript, DOM, Php

Quick Go »

No member browsing this thread

Thread Status: Active
Total posts in this thread: 1

[ ]

Author

This topic has been viewed 3170 times and has 0 replies

JDOMPer
Stranger

Joined: Jun 27, 2008
Post Count: 1
Status: Offline


JDOMP - DB access without AJAX using Javascript, DOM, Php

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" language ="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 myextra = '& time=' + time // note you may need to add this time stamp to avoid cache problems
var mynurl = "gme.php?myvar=" + mynum // url for php with id as the variable
//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("language","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,

[Jun 27, 2008 3:57:00 PM]

[Link]

[ ]

Current timezone is GMT
Mar 17, 2010 6:35:27 PM