The Zend Framework in Practice

As with the home page, the view script for the contact page makes use of jQuery UI tabs. See the post The Home Page for more information the ZendX_JQuery view helpers used here to generate the necessary markup and JavaScript.

The script contains the following code:

<?php
$this->tabPane(
  'tabs',
  $this->render('index/contact/contact-us.phtml'),
  array('title' => 'Contact Us')
);
 
echo $this->tabContainer('tabs');

The contents of the tab are rendered by the contact-us.phtml script in the contact sub-directory. This starts by rendering the tab heading:

<h1>Contact Us</h1>

Then it determines whether an error has occurred; if it has, the amount of information displayed depends on whether the site is deployed in a development environment:

<?php
if (isset($this->errorMessage))
{
  if (APPLICATION_ENV == 'development')
  {
    printf('<p class="error">%s</p>', $this->errorMessage) . 
PHP_EOL;
  }
  else
  {
    printf('<p class="error">There was a problem sending 
your message; please phone us on %s, or try again later.
</p>' . PHP_EOL,
    $this->placeholder('phoneNumber'));
  }
}

If an error has not occurred, the script tests whether the message sent flag is set; if it has, it displays an appropriate message for the user:

else if (isset($this->sent))
{
  echo '<p>Thank you for contacting GM-RAM! We will attempt 
to respond to you as soon as possible.</p>' . PHP_EOL;
}

If the message sent flag is not sent, the script will render the contact form instructions and the form itself; if the form has been submitted, but failed validation, any errors will be displayed here and the appropriate form selected.

The script starts with the instructions:

else
{
  echo '<p>Please fill in the following form and click on the 
<strong>Send</strong> button.</p>' . PHP_EOL;

Then it tests for a validation error and displays the error message:

  if (isset($this->error))
  {
    // Display the error message
    printf('<p class="error">%s</p>' . 
PHP_EOL, $this->error['message']);

It also selects the error field using jQuery:

    // Select the error field
    $script = sprintf('$("#%s").focus()', $this->error['field']);
    $this->jQuery()->addOnload($script);
  }

Note that the script dynamically creates a jQuery selector which refers to the field id, e.g. $(“#name”) for the name field. Also note that it uses the ZendX_JQuery helper to add this code to the functions executed when the page has loaded; this makes sure that the field is selected properly.

If there is no error, a similar mechanism is used to select the first form field:

  else
  {
    // Select the first field
    $script = sprintf(
      '$("#%s :input:visible:enabled:first").focus()', 
      $this->form->getAttrib('id')); 
    $this->jQuery()->addOnload($script);
  }

Note the special jQuery selection code applied to the form to select the first field; this doesn’t depend on the field ID staying the same (or indeed on the form ID staying the same, as the script fetches that dynamically).

Finally, the script sets the form action and renders it:

  $this->form->setAction($this->url());
  echo $this->form . PHP_EOL;
}

We have already looked at the implementation of the action handler. In my next post I shall look at the classes used to implement the form.