JDOMP - simple DB access without AJAX

[JDOMPer]

Do not 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, that 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.

Now to introduce the idea, as you are probably aware - 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 us say you have a counter on the page. 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 can do this 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: &nbsp;
<input id= "myid" name="myid" type="text" value="1" >
Word: &nbsp;
<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(myid) {
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,

[Nafai]

But that only works on browsers that let you store data in the DOM like IE 7 right?

[JDOMPer]

No it works in all recent browsers IE, Mozilla, Opera, Safari because it only uses standard DOM, javascript and PHP. There is no data storage in the DOM. JDOMP simply loads a javascipt file (PHP file) and gets back the javascipt code (a function with data attached) to load the data into the client's webpage dynamically, just as AJAX does. It is just like having a script tag on the web page that loads a js file when the page loads. In this case we use the DOM to dynamically build the script, which runs the php file, which builds the javascript code for the function and its attached variables and runs it. JDOMP simply works by dynamically loading a new script which runs one of the functions already on the client's page. The script is added to an existing div and runs when it is loaded from the php echo. It is that simple!
Cheers,

[JDOMPer]

I have been asked to provide further explanation of what JDOMP does. There is nothing new to this - it is simply using the old basic stuff in a new way. What is new is to echo the javascript function name and its variables in the PHP. Many people have been struggling to send data back from the PHP file and there are a various posts about this including time delays etc. etc. JDOMP deals with this in a simple elegant way by using the javascript function, which covers all the timing issues etc. JDOMP is simpler than using an iframe. Using the function to build the script is easily extended by using variables referring to various PHP files and supplying different variable values to the PHP. JDOMP is simpler than AJAX and great for inline editing. When you look back you'll see that there was nothing new about AJAX either. It was developed using some long ignored bits of the DOM and combining them into a tool. There is nothing like a name to encapsulate something old into something new or different that people find useful - hence JDOMP.

Let me stress that JDOMP is dynamic and does not require a refresh!!!! Just like Ajax, JDOMP ships data to and fro *after* the entire page has been loaded in a way that doesn't force a browser refresh. It works in all recent browsers IE, Mozilla, Opera, Safari because it only uses standard DOM, javascript and PHP. There is no data storage in the DOM. JDOMP simply loads a javascript file (PHP file) and gets back the javascript code (a function with data attached) to load the data into the client's webpage dynamically, just as AJAX does. It is just like having a script tag on the web page that loads a js file when the page loads. In this case we use the DOM to dynamically build the script, which runs the php file, which builds the javascript code for the function and its attached variables and runs it. JDOMP simply works by dynamically loading a new script which runs one of the functions already on the client's page. The script is added to an existing div and runs when it is loaded from the php echo. It is that simple!

Let’s use a pizza machine analogy. Imagine that we have developed a webpage that allows you to select ingredients and get back a sample so you can see what it looks, smells and tastes like before you order.
Client side --- you have the tool for selecting the ingredient options or pre-selecting ‘meat lovers’ etc. (the script builder). You also have the oven and the tools for delivering the sensations to you (the javascript function).
Server side --- is the tool (PHP, ASP etc.) for taking your selection, assembling the pizza and sending it back via the script reply and the SRC command. It is delivered live on your computer after a second or so, and baked fresh on the client’s computer – no refresh required - the ‘baking now’ message will show for a second or two and then Voila! - The smell of freshly baked pizza.

Cheers,

[MMJ]

Why are you advocating this method? Any special reason?

[JDOMPer]

It's simple.
It uses basic stuff - no work-arounds required.
It's cross-browser.
It's elegant and simple to use and understand - you reuse the functions.
I love pizza!

By the way there is nothing new about delivering smells to the client either.
If you're and old bastard like me you will remember ' Smellorama' in the Movies.
When you entered you were given a card with various areas to scratch with a coin. During the movie messages would pop up - scratch No. 2 now!

Cheers,

[koolman]

I think this works, simple to understand.

However, it underlines issue of complexity in managing code.

Let say i need to get a large html content from server to update to current page.
Since the return string must be javascript, we can not out put html content like normal.
We may have to put into a string of javascript. We may need to output structured html in one line, seems bad for large html.

For example, instead of writing:

<table>
<tr>
<td></td>
</tr>
</table>


I need to write:

output = "<table><tr><td></td></tr></table>";


or better we can write


output+="<table>";
output+="<tr>";
output+="<td>";
output+="</td>";
output+="</tr>";
output+="</table>";


It seems ok if we have small output of html update but it become rather bad when we have large and complex output html.

Furthermore, things are getting complicated that instead we directly use server-side language (PHP) to generate HTML, we need to use server-side to generate javascript in order to generate HTML. This adds more complexity.

That is my personal thought.

[JDOMPer]

You are correct. It would be silly to use JDOMP to transfer new chunks of HTML.
AJAX is the best tool for that - that's what it’s been designed to do!!!!! HTML/XML transfer.
However, I think it is best for speed and reliability to only transfer the new bits of info (text and numbers) that you need to update or change what's on the client's page. Let’s say you have a table there, and you want to dynamically change some of its elements, but the HTML structure remains the same.
The JDOMP way is to make a function client-side (maketable()) that builds the scaffolding for the table and gets the data from an array ( say A[1] = "one"; A[2] = "two"; A[3] = "three"). The function is designed to dynamically build and display the table using basic DOM or innerHTML. When the page loads, maketable() is run to display the table on the page.
To change the table dynamically using a JDOMP, what you do is to run a script to execute a PHP file to gather the new info and send it back.

The PHP file echos the new array assignments and the command for the function.
echo "A[1] = 'four';";
echo "A[2] = 'five';";
echo "A[3] = 'six';";
echo "maketable();";

It’s that simple – minimum data transfers are the go. This will fire the function to rewrite the table dynamically.

Note that the arrays and function have to be pre-defined in the javascript client-side. You can do quite large changes in this way, but remember that there is a size limit for javascript variables (254 characters I think, from memory?). So you will have to break long text extracts into bits and then reassemble client-side, which is easy to do.
Cheers,