Home arrow JavaScript arrow Page 3 - JavaScript Remote Scripting: An AJAX-based Random Code Generator in Action
JAVASCRIPT

JavaScript Remote Scripting: An AJAX-based Random Code Generator in Action


In this article, Alejandro Gervasio finishes his discussion of creating a random code generator. Going beyond the core functions, he defines the remaining JavaScript functions needed to turn the random code generator into a functional program.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 15
October 26, 2005
TABLE OF CONTENTS:
  1. · JavaScript Remote Scripting: An AJAX-based Random Code Generator in Action
  2. · Looking at existing functions: the “sendRequest()” and “stateChecker()” functions at a glance
  3. · Displaying random codes: defining the “createDataContainer()” function
  4. · Dynamic link generation: taking a look at the “createLinks()” function
  5. · Server-side processing: generating four-digit random codes with PHP
  6. · Putting the pieces together: showing the application’s complete code

print this article
SEARCH DEVARTICLES

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.


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials