This part focuses on adding AJAX capabilities to the authentication form that we developed in parts 1 and 2. This is in my opinion the greatest benefit of the Zend Framework – It makes it so easy to extend and adapt the application because of its modular construct.
First and foremost, I would like to give credit to Quentin Zervaas (author of Practical Web 2.0 Applications with PHP) for writing about this in his exceptional book. I strongly recommend this book to anyone looking to understand the Zend Framework. In my opinion, It is THE most informative book on ZF, PHP and good programming practices.
The first change that we will make is to the AuthController class. We need a way to isolate our AJAX calls from a normal POST submit. ZF provides an easy way to do this using the isXmlHttpRequest() function on the request object. This function returns true if the request is an AJAX request.. false otherwise.
$request = $this->getRequest();
$validate = $request->isXmlHttpRequest();
$json = array(‘errors’=>$errors);
public function sendJson($data)
//change the header so as to send json data to accepting page
Quite trivial really..
- suppress the layout from displaying,
- suppress the view from displaying,
- change the header to ‘application/json’ and
- finally call the Zend_Json::encode() method.
We will name our script as validateAjax.js. This script will make the ajax call and fill in the div sections that we setup for errors.
ValidateAjax = Class.create();
var formElement = this.form[key];
var container = formElement.up().down(‘.error’);
new Ajax.Request(this.form.action, options);
var json = transport.responseText.evalJSON(true);
var errors = $H(json.errors);
The ‘resetErrors’ method gets all the elements marked with “class=error” and invokes the ‘hide’ method on each block
The showErrors method is responsible for displaying the error messages within the appropriate DIV section. This is important .. The display process works on the following premises:
- The errors array returns json in the format “fieldname”:”error message”
- It is assumed that the error div is inside the div that displays the field (Once the form element is obtained, go up() to the parent div, then move down() to the actual div tagged with the error class.)
The onSubmit function is the event handler for the submit event. Invoke the Ajax.Request method. Note that the form.action is used instead of the actual URL. This is to promote reuse of this js file. This file is now capable of handling the AJAX validation of ANY form that is built with the divs in the prescribed format.
The onFormSuccess is the function that is executed on success of our asynchronous call. The responseText from the server contains the JSON formatted array that looks like (I used a simple alert message – alert(transport.responseText); to display this)
The evalJSON(true) call evaluates the JSON string and returns an object. The ‘true’ parameter is a security measure and is a good practice to make sure that there a
re no XSS (cross-site scripting issues)
In case there are multiple errors, they will all be grouped under errors. The $H() prototype function is used to convert the errors object into an array.
<div class=”error”> <?php if (isset($this->errors[‘auth’])) echo $this->errors[‘auth’]?> </div>
<p>Please log in here</p>
<form method=”post” id=”login” action='<?php echo $this->baseUrl?>/auth/identify’>
<input type=”text” name=”username” value=””/>
<div class=”error”> <?php if (isset($this->errors[‘username’])) echo $this->errors[‘username’]?> </div>
<input type=”password” name=”password” value=”” />
<input type=”submit” name=”login” value=”Login” />
There! We now have a complete login/authentication form with Ajax functionality built using the Zend Framework.
For details about my ACL implementation, check out this post