JavaScript Remote Scripting: Building an AJAX-based Random Code Generator - Avoiding simultaneous data submission: coding the “removeActiveNodes()” function
(Page 4 of 4 )
As I explained before, it’s undesirable to have a visitor trying to rate multiple articles at the same time. Bearing this in mind, the application is developed to expect user data coming from one single point, even when this point is dynamic. That’s precisely the reason for the “removeActiveNodes()” function. What this function does basically is check for existing input boxes, and accordingly remove them from the document tree.
The immediate effect of this operation is that each time an user clicks on a new rating link, any active input box previously opened will be completely removed from the page. Of course, by now this functionality may sound a little bit unarticulated from the rest of program functions, but this shouldn’t be a problem. At the end of this series you’ll have all the required source code for running the application, and all the functions will fit nicely.
With reference to the “removeActiveNodes()” function, here’s its definition:
function removeActiveNodes(){
var divs=document.getElementsByTagName('div');
for(var i=0;i<divs.length;i++){
if(divs[i].getAttribute('active')=='true'){
divs[i].parentNode.removeChild(divs[i]);
}
}
}
As you can see, the function above is very simple. Essentially, it loops over all the <div> elements and checks for DIVS with a custom “active” property. If they’re found –- which means that an active input box is being displayed -- the element is removed directly from the document tree. The following line:
divs[i].parentNode.removeChild(divs[i]);
takes care of removing the appropriate document node. Certainly, when I define the rest of the application's functions, this operation should be clearly understood. However, for now let’s settle down with explaining how the JavaScript application uses GET requests to generate random codes, as well as how it implements its functionality through some clearly delineated functions.
Even when it might look like a trivial topic, for completeness’ sake I’ll list a shortened version of the (X)HTML markup depicted in the previous screenshots, since this code will be used in future examples. Here it is:
<h1>Article Listing</h1>
<h2>Building Object-Oriented Database Interfaces in PHP: Processing Data through Data Access Objects</h2>
<p>With websites now featuring full-blown dynamic applications that link to databases, data accessing has become a critical process. Often, an object-oriented solution is wanted…</p>
<h2>Building Object-Oriented Database Interfaces in PHP: Abstracting Database Tables</h2>
<p>Welcome to part two of the series "Building Object-Oriented Database Interfaces in PHP." In the previous article, I offered complete coverage of the role that database interfaces play in Web applications, highlighting the immediate benefits of having a centralized mechanism….</p>
<h2>Object Interaction in PHP: Introduction to Composition</h2>
<p>Composition is an important concept in PHP. It occurs when an object creates another object; that is, the first object completely possesses the second object. In this article (the first of two parts)…</p>
<h2>Object Interaction in PHP: Introduction to Aggregation</h2>
<p>In this second part of his series, Alejandro Gervasio gets a little more technical with the basics of Aggregation. He begins working with a MySQL abstraction class and a useful paging class, and is starting to get into writing portable…</p>
To wrap up
We’re done for now. Through the fourth part of this series I’ve gone one step further into the usage of JavaScript remote scripting for building a random code generator by using AJAX, useful for integrating into web-based systems where additional data checking is required, in order to avoid automated data submission. In this case, I’ve exemplified the use of this program within a voting system, but it can be easily adapted to work with other applications.
However, there are many things yet to be explained for getting the program to work properly. The next part of the series goes into the explanation of the remaining JavaScript functions, together with the making of a fully-functional example. See you in the next part!
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
/ 14 
