JDOMP - DB access without using AJAX

[JDOMPer]

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: &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(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,

[~s.o.s~]

And how is it different from dynamically writing out JavaScript which developers have been using for times unknown? Plus Ajax is a different beast altogether dealing with shipping data to and fro *after* the entire page has been loaded in a manner which doesn't force a browser refresh.

So yeah, I have tried out both Ajax and JDOMJ (Java in my case) and think of them as different tools of my toolbox.

[JDOMPer]

JDOMP – further info and analogy.

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,

[Ken Sharpe]

It's not really new. This is how one passes information from a server side language to the javascript. Problem has already been solved, sorry 8)

[JDOMPer]

It's odd that if you Google "transfer data php to javascript" etc. you get very few solutions. JDOMP is not a new concept, but doing the transfer dynamically in such a simple way is new ( echoing the command with the variables). Using AJAX to transfer data (text and numbers) is like using a semi-trailer truck to drive the kids to school and do the shopping. JDOMP is much simpler. Why not try it!
Cheers,