Sending Email with AJAX: Developing the Client-Side Application Layer - Adding new contacts: defining the “contact insertion” module
(Page 4 of 5 )
The process for adding a new contact to the corresponding list is fairly simple to understand. So, first take a look at the “addContact()” function, so you can see how this task is performed:
function addContact(){
// create containing div
var cdiv=document.createElement('div');
// create 'fullname' field
var fullname=document.createElement('input');
fullname.setAttribute('type','text');
fullname.setAttribute('name','fullname');
fullname.setAttribute('value','Enter Full Name');
fullname.className='contfield';
fullname.onfocus=function(){this.value=''};
// create 'email' field
var emailaddr=document.createElement('input');
emailaddr.setAttribute('type','text');
emailaddr.setAttribute('name','email');
emailaddr.setAttribute('value','Enter Email Address');
emailaddr.className='contfield';
emailaddr.onfocus=function(){this.value=''};
// create 'done' button
var donebtn=document.createElement('input');
donebtn.setAttribute('type','button');
donebtn.setAttribute('name','sendcontact');
donebtn.setAttribute('value','Done');
donebtn.className='mailbutton';
// append form fields to containing div
cdiv.appendChild(fullname);
cdiv.appendChild(emailaddr);
cdiv.appendChild(donebtn);
// get 'addContact" button
addbtn=document.getElementsByTagName('form')[0].elements
['add'];
// replace 'addContact' button with div
addbtn.parentNode.replaceChild(cdiv,addbtn);
// insert contact into 'contacts.xml' file
donebtn.onclick=function(){
insertXMLHttpObj.open('POST','addcontact.php',true);
// set form http header
insertXMLHttpObj.setRequestHeader('Content-
Type','application/x-www-form-urlencoded; charset=UTF-8');
// get form values and send http request
insertXMLHttpObj.send(getFormValues
(document.getElementsByTagName('form')[0]));
// replace back containing div with 'addContact" button
cdiv.parentNode.replaceChild(addbtn,cdiv);
// refresh contact list
getContactList();
}
}
Here, the above function actually does a few interesting things worth noting. Since this function is fired when the respective “Add Contact” button is pressed, it creates a two-field online form on the fly, where the user can enter the full name for the new contact, along with the corresponding email address. After entering this information, the data is submitted by triggering a POST request to the “addcontact.php” file, which is responsible for adding the new contact to the XML file that you saw earlier. Notice how the whole contact insertion process is handled by the third “insertXMLHttpObj” requester object that I mentioned previously. With reference to the simple PHP file that adds a new contact to the XML file in question, its source code is as follows:
$file='contacts.xml';
$str='<contact>'."\n".'<name>'.$_POST
['fullname'].'</name>'."\n".'<email>'.$_POST
['email'].'</email>'."\n".'</contact>'."\n".'</contactlist>';
if(!$fp=fopen($file,'r+')){
trigger_error('Error opening contacts file',E_USER_ERROR);
}
$contents=fread($fp,filesize($file));
rewind($fp);
$contents=str_replace('</contactlist>',$str,$contents);
fwrite($fp,$contents);
fclose($fp);
The above PHP snippet simply opens the “contacts.xml” file, and inserts the contact data as a new file node, which makes inserting a new contact a really easy task.
At this point, and after having explained how new contacts are added to the corresponding XML file, it’s time to define the last module of the AJAX email application, which takes care of performing some useful initializing tasks. To figure out how this is achieved, jump into next section.
Next: Initializing the AJAX email application: defining the “initializeEmailClient()” function >>
More HTML Articles
More By Alejandro Gervasio
