Beginning Ajax with PHP ( FORMS //xmlhttp.js //Function to create) - P.4 ppsx

Note that you nowhave a new field to be passed in that represents the date that you wish to add a task to.The date field is then passed along into the Ajax request using the query string

xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");

} catch (e) {//If not, then use the older active x object

try {//If we are using internet explorer

xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

} catch (E) {//Else we must be using a non-internet explorer browser

xmlhttp = false;

}}

// If not using IE, create a // JavaScript instance of the object

if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {xmlhttp = new XMLHttpRequest();

}return xmlhttp;

}//Function to process an XMLHttpRequest

function processajax (serverPage, obj, getOrPost, str){

//Get an XMLHttpRequest object for use

} else {xmlhttp.open("POST", serverPage, true);

}}//functions.jsfunction createform (e, thedate){

posx = e.clientX + document.body.scrollLeft;

posy = e.clientY + document.body.scrollTop;

theObject.style.left = posx + "px";

theObject.style.top = posy + "px";

//The location we are loading the page into

var objID = "createtask";

var serverPage = "theform.php?thedate=" + thedate;

var obj = document.getElementById(objID);

processajax (serverPage, obj, "get", "");

}

As you can see, not much has changed in thecreateformfunction Note that you nowhave a new field to be passed in that represents the date that you wish to add a task to.The date field is then passed along into the Ajax request using the query string to be

//Functions to submit a form

function getformvalues (fobj, valfunc){

var str = "";

aok = true;

var val;

//Run through a list of all objects contained within the form

for(var i = 0; i < fobj.elements.length; i++){

//Then return the string values

return str;

}function submitform (theform, serverPage, objID, valfunc){

var file = serverPage;

theform.phpfile The submitformfunction takes in four arguments: the form element itself(theform), a serverPage(the file that will do the processing) to send an Ajax request to, the

object into which you want to load the results of the request (objID), and a function

different than the previous functions you have been using to process Ajax requests

getformvaluesthat will return a string containing the fields and values to submit to the

that it can cycle through the form elements and find any fields submitted to it In order

statement has been created to deal with different types of fields based upon their type

By processing the values this way, you can handle different types of fields in different

manners, which will prove quite useful in validating your form

name of the field and appends the value of that field When a full collection of values and

func-tion to move on to processing with

processajaxfunction to finally perform the server request The processajaxfunction

ActiveXobject if you are using Internet Explorer), and then loads in the form request to

where you specify what type of form submission it is This is also where, when passing

this in more detail in Chapter 6)

XMLHttpRequestobject By passing along the string and sending the request, the values

The process_task.phpfile is shown in Listing 5-3

Listing 5-3.The Code to Process the Form and Add a New Record to the Database

$yourname = mysql_real_escape_string (strip_tags ($_POST['yourname']));

$yourtask = mysql_real_escape_string (strip_tags ($_POST['yourtask']));

$thedate = mysql_real_escape_string (strip_tags ($_POST['thedate']));

//Build a dynamic query

$myquery = "INSERT INTO task (taskid, yourname, thedate, description) VALUES➥('0','$yourname','$thedate','$yourtask')";

//Execute the query (and send an error message if there is a problem)

if (!mysql_query ($myquery)){

header ("Location: theform.php?message=There was a problem with the entry.");exit;

}

//If all goes well, return

header ("Location: theform.php?message=success");

?>

When adding information to a database through a PHP processing script, there areseveral important aspects to consider Of particular importance is the question of whatsort of information you want allowed into your database In this case, I have decided that

I do not want any excess blank space or HTML code inserted into my database I

functions to create a set of data that I will like within my database

data-base In this case, I have altered the table very slightly from the previous chapter by

for anyone to add a task into the task database Once the query has been built, I simply

the error message If it succeeds, however, it will return to the form, and the new task willhave been added

new code is shown in Listing 5-4

Listing 5-4.The Code That Will Pop Up As an Auto-Complete Listing (autocomp.php)

$myquery = "SELECT DISTINCT(yourname) AS yourname FROM task WHERE➥

yourname LIKE LOWER('%" mysql_real_escape_string($_GET['sstring']) "%')➥

ORDER BY yourname ASC";

if ($userquery = mysql_query ($myquery)){

?><div style="padding: 4px; height: 14px;" onmouseover="➥

this.style.background

= '#EEEEEE'" onmouseout="this.style.background = '#CCCCCC'" ➥

onclick="setvalue ('<?php echo $userdata['yourname']; ?>')">➥

<?php echo $userdata['yourname']; ?></div><?php

}

?>

</div>

<?php}} else {echo mysql_error();

}

?>

Now that the autocomp.phpfield is reading from the tasktable, you can add as manytasks as you want, and the system will make it nice and easy to add more The results areshown in Figure 5-2; first before adding the new user (and task) and then after the newuser has been entered.

Figure 5-2.A before-and-after example of adding records into the database using based form submission

Ajax-Form Validation

Form validation (well, validation period) is what I believe separates the slackers from thetrue development professionals Your application will only run as well as the code thatimplements it, and such success is partly defined by being aware of what errors couldpotentially occur as well as how to deal with them should problems arise In the develop-

ment world, handling errors and unplanned actions is called validation.

There are two ways to validate input: client-side and server-side Naturally, as youmight imagine, one is handled by your client-side language (in this case JavaScript) andthe other is handled by your server-side language (PHP, in this case) This is one of thecases in coding that I believe redundancy is not only useful, but highly necessary Inorder to have a fully functional, non-crashing web application, it is important to validatefor a proper submission from the user If users witnesses bugs or crashes, they lose trust

in your product If users lose trust in a product, they will likely not use it

Consider the current example, for instance It works great if the user submits theirname and task, but what if they fail to do so? You would end up with blank entries in your

database that could potentially cause problems with your system Remember how I

talked about building your JavaScript to allow for some validation? Well, it is time to put

that structure to use Let’s have a look at the client-side validation first

//functions.js

function trim (inputString) {

// Removes leading and trailing spaces from the passed string Also removes// consecutive spaces and replaces them with one space If something besides// a string is passed in (null, custom object, etc.), then return the input

if (typeof inputString != "string") { return inputString; }var retValue = inputString;

// Note there are two spaces in the string

// Therefore look for multiple spaces in the string

retValue = retValue.substring(0, retValue.indexOf(" ")) +➥

retValue.substring(retValue.indexOf(" ")+1, retValue.length);➥

// Again, there are two spaces in each of the strings

}return retValue; // Return the trimmed string back to the user} // Ends the "trim" function

func-tion too much, as it is quite intricate in its nature when only its actual funcfunc-tionality is

removes all blank characters from the front and end of a string While PHP has its own

library of functions to use, you must sadly code in anything you want to use for JavaScript

validation The goal of this function is to ensure that you are testing for blank strings that

are not simply filled with blank spaces

//Function to validate the addtask form.

function validatetask (thevalue, thename){

var nowcont = true;

}

the system to put the focus on the empty form element

var aok;

//Functions to submit a form

function getformvalues (fobj, valfunc){

var str = "";

aok = true;

var val;

//Run through a list of all objects contained within the form.

for(var i = 0; i < fobj.elements.length; i++){

}//Then return the string values

return str;

}

textareavalues), you call the validation function and pass in the name and value to be

problem must be rectified before the script will be allowed to progress

function submitform (theform, serverPage, objID, valfunc){

var file = serverPage;

the onclickevent handler within the theform.phpfile; shown in Listing 5-5) and passes

effect until there is a completed form)

Listing 5-5.A Revised Version of the Form Script That Is Shown When a Date on the

Calendar Is Clicked (theform.php)

<input type="hidden" name="thedate" value="<?php echo $_GET['thedate']; ?>" />

<input type="button" value="Submit" onclick="submitform➥

(document.getElementById('newtask'),'process_task.php','createtask', ➥

validatetask); return false;" />

<div align="right"><a href="javascript:closetask()">close</a></div>

</form>

</div>

validatetaskfunction name in with the submitformfunction call This makes the

submitformfunction rather portable by allowing you to specify which validation script

to use

Now that the client-side validation is done, have a look at the redundant validation

in the form of server-side scripting in PHP, shown in Listing 5-6

Listing 5-6.A Revised Version of the Task-Submission Script (process_task.php)

$yourname = mysql_real_escape_string (strip_tags ($_POST['yourname']));

$yourtask = mysql_real_escape_string (strip_tags ($_POST['yourtask']));

$thedate = mysql_real_escape_string (strip_tags ($_POST['thedate']));

//Build a dynamic query

$myquery = "INSERT INTO task (taskid, yourname, thedate, description) VALUES➥

//If all goes well, return

header ("Location: theform.php?message=success");

?>

The nice thing about validation from a server-side perspective is that programminglanguages such as PHP have a very nice selection of functions ready for usage (whereas inJavaScript, you would have to include them) Note the validation statements, which takeeffect before you get into the meat and potatoes of the script You test for a non-empty

gets to finish filling in the form properly

As you can see, validation may involve a little more work, but it will allow you to sleepbetter at night knowing that your scripts are safe from a wide range of problems, andthat your users will be able to get the most out of your hard work and commitment (seeFigure 5-3)

Figure 5-3.Validation: a true developer’s friend

Summary

Well, another piece of the Ajax puzzle has been put into place As you continue throughthis book, you will continue to steadily build upon the core ideas Now that you have formsubmission, dynamic server requests, and client-side JavaScript under wraps, you have arather large repertoire of knowledge that you can use to perform some valuable functions

By allowing the user a way to interact with both your client-side and server-side nologies, and then confirming the data being passed to each, you have opened a doorthat will allow you to move ahead with some of the more fun and advanced Ajax method-ologies There is one last set of functionality that should be discussed before you areready to start doling out some intriguing applications: images

Isuppose that it goes without saying that one of the more annoying, yet necessary,

aspects of browsing a web site using a slow Internet connection is waiting for images to

load While text-based web sites can display instantaneously (or seemingly so) on any

Internet connection, images must be downloaded in order to be viewable With the

advent of high-speed Internet, this issue has become less of a problem, but images still

require time to display Nonetheless, images are indispensable to the user experience,

and therefore, as web developers, we’re tasked with minimizing the negative aspects of

image loading

Thankfully, through concepts such as Ajax and scripting languages like PHP, we nowhave a much more robust set of tools with which to deal with imaging Through Ajax, we

can dynamically load and display images without the rest of the page having to reload,

which speeds up the process considerably We also have more control over what the user

sees while the screen or image loads Users are generally understanding of load times,

provided that you let them know what is happening Through Ajax and a little PHP magic,

we can help the user’s experience be as seamless and enjoyable as possible

Throughout this chapter, I will be going through the basics of uploading, ing, and dynamically displaying images using PHP and Ajax

manipulat-Uploading Images

I suppose it is necessary to bring a little bad news to Ajax at this point; it is not possible

to process a file upload through the XMLHttpRequestobject The reason for this is that

JavaScript has no access to your computer’s file system While this is somewhat

disap-pointing, there are still ways to perform Ajax-like functionality for this without making

use of the XMLHttpRequestobject Clever developers have discovered that you can use

hidden iframes to post a form request, thereby allowing for a file upload without a

com-plete page refresh (although you might see a bit of a screen flicker)

By setting the iframe’s CSS displayproperty to none, the element is present on thepage to be utilized by the upload form, but not visible to the end user By assigning a name

to the iframetag, you can use the targetattribute in the formtag to post the request to the

87

C H A P T E R 6

hidden iframe Once you have the iframe configured, you can perform any uploads youlike, and then use Ajax to perform any extra functionality Consider the following exam-ple, which will allow you to upload an image to a folder of your specification Considerthe code in Listing 6-1, which will allow you to create the application shown in Figure 6-1.

Figure 6-1.An Ajax-enabled file upload system that uses hidden iframes to hide the upload

Listing 6-1.The Code to Create a Form with a Hidden Iframe for Processing

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link rel="stylesheet" type="text/css" href="style.css" />

<script type="text/javascript" src="xmlhttp.js"></script>

<script type="text/javascript" src="functions.js"></script>

<input type="file" id="myfile" name="myfile" />

<input type="submit" value="Submit" />

<iframe id="uploadframe" name="uploadframe" src="process_upload.php"➥

class="noshow"></iframe>

</form>

</body>

</html>

Listing 6-1 creates the groundwork and user interface for the application Here, you