JavaScript Remote Scripting: An AJAX-based Random Code Generator in Action - Displaying random codes: defining the “createDataContainer()” function
(Page 3 of 6 )
If you’re used to writing JavaScript code that uses the DOM for dynamic document manipulation, then the “createDataContainer()” function should seem pretty straightforward. What this function does essentially is create the required (X)HTML elements for building a containing DIV and include a simple a text-input box for entering random codes. Its definition is the following:
function createDataContainer(elem,data){
if(elem.getElementsByTagName('div')[0]){return};
// create containing <div>
var div=document.createElement('div');
div.className='container';
// assign custom attribute
div.setAttribute('active','true');
// create form
var f=document.createElement('form');
f.setAttribute('action','checkvote.php');
f.setAttribute('method','post');
// create input box element
var inp=document.createElement('input');
inp.setAttribute('type','text');
inp.setAttribute('name','challenge');
inp.setAttribute('maxlength','4');
inp.setAttribute('size','4');
inp.className='midchars';
// create submit button
var btn=document.createElement('input');
btn.setAttribute('type','submit');
btn.setAttribute('name','vote');
btn.setAttribute('value','Go!');
// create paragraph & include challenge value
var pc=document.createElement('p');
pc.className='largechars';
pc.appendChild(document.createTextNode(data));
// create paragraph to display instructions
var pl=document.createElement('p');
pl.className='smallchars';
pl.appendChild(document.createTextNode('Enter the above
number to rate this article (case insensitive)'));
// add elements to form
f.appendChild(pc);
f.appendChild(pl);
f.appendChild(inp);
f.appendChild(btn);
// add form to div element
div.appendChild(f);
// add div to document tree
elem.parentNode.appendChild(div);
}
Despite the lengthy definition for the function above, its programming logic is extremely understandable. Basically, the code can be divided in six logical sections. Thus, let’s analyze each of them in turn.
The first section is charged with building the general containing <div> element and assigning its attributes. Given that, the below lines carry out these operations:
// create containing <div>
var div=document.createElement('div');
div.className='container';
// assign custom attribute
div.setAttribute('active','true');
Notice that I’ve assigned a custom “active” attribute to the DIV. The only reason for doing this is to track what input boxes are active, so they can be properly removed from the document tree.
The next fragment of code builds up the corresponding form for submitting random codes. This operation is illustrated below:
// create form
var f=document.createElement('form');
f.setAttribute('action','checkvote.php');
f.setAttribute('method','post');
Regarding the above snippet, the only thing worth mentioning is the assignment of the “action” attribute. Note that the form is pointed to “checkvote.php”, which is the file that will process the code entered by the user.
Now, let’s continue analyzing the function, by explaining the section that creates a text-input box:
// create input box element
var inp=document.createElement('input');
inp.setAttribute('type','text');
inp.setAttribute('name','challenge');
inp.setAttribute('maxlength','4');
inp.setAttribute('size','4');
inp.className='midchars';
In a similar way, the input box is created and spiced up with some attributes, such as “name” and “className”. As a matter of fact, you can add even more attributes to suit particular needs. As usual, it depends on the application what the code generator will be integrated into.
The next piece of code to be reviewed is the one tasked with creating the proper form submitting button. It looks like this:
// create submit button
var btn=document.createElement('input');
btn.setAttribute('type','submit');
btn.setAttribute('name','vote');
btn.setAttribute('value','Go!');
Since this element is created by using the same DOM methods, I won’t bore you with irrelevant details. Considering this, let’s jump directly to the section that displays random codes, together with the indicative text:
// create paragraph & include challenge value
var pc=document.createElement('p');
pc.className='largechars';
pc.appendChild(document.createTextNode(data));
// create paragraph to display instructions
var pl=document.createElement('p');
pl.className='smallchars';
pl.appendChild(document.createTextNode('Enter the above number to
rate this article (case insensitive)'));
The above code presents an interesting point. After the first <p> element is created, a child text node is appended to it by specifying the value of the “data” variable. This variable represents the four-digit random code, which has been generated on the server to be displayed within the containing <div> element that you saw at the very beginning of this explanation. For the moment though, don’t worry about how this value is obtained. At the time of listing the complete script, including the file processed on the server, you’ll be provided with all the pertinent clarifications.
Now, let’s dissect the code, and see how the elements just created are appended to the document tree:
// add elements to form
f.appendChild(pc);
f.appendChild(pl);
f.appendChild(inp);
f.appendChild(btn);
// add form to div element
div.appendChild(f);
// add div to document tree
elem.parentNode.appendChild(div);
By this point, I’ve hopefully covered all the tasks performed by the “createDataContainer()” function. Given that, the next step will be defining another JavaScript function, that is “createLinks()”, which will be used to generate the appropriate rating links, after the whole document has been loaded.
Next: Dynamic link generation: taking a look at the “createLinks()” function >>
More JavaScript Articles
More By Alejandro Gervasio
/ 12 
