Category: "Dojo"

dojo AJAX file upload demonstration

This is a demonstration or example of how one can use dojo.io.iframe.send to submit form data to a server. This is useful if you have file inputs, which cannot use other methods.

The page includes good notes, and all source can be viewed.

dojo Form Demo

This is a very simple demonstration of a dojo form. Please use ‘View Source’ to view the code.

Supporting server-side PHP.

json.php

Returns the submitted input. Demonstrates a ’successful’ transaction.

<?php
header('Content-type: application/json');
echo <<<END
{"sText":"{$_REQUEST['sText']}"}
END;
?>

error.php

Returns a 503, service not available.

<?php
header("HTTP/1.0 503 Service Not Available");echo 'Server side error';
exit();
?>

timeout.php

Sleeps for 3 seconds to force a timeout.

<?php
sleep(3);
?>

AJAX Page Load Improvement

The application I am working on has several very complex pages, which take some time to render in the browers. I used the link above to create a ‘loading‘ gif (with great thanks to the authors and contributors). Set up a div to contain the image and ‘Loading, please wait …‘ text, with z-index set to -1. Added dojo.OnLoad() to hide the loading div and display the main div.

The effect of these changes is to prevent display of the page content until dojo had fully rendered it.

A side effect is that the page seems to load and display much more quickly. I suspect this is because the browser doesn’t have to display the page as it is being rendered.

dojo - Smarty - PHP - Synchronizing client- and server-side validation

The following architecture with Smarty and dojo allows you to the client and server synchronized for validation for RIA/PHP applications.

Each input has 4 characteristics defined in a (PHP) .ini file -

V_input_name = regExp (usually includes length)
L_input_name = max length
R_input_name = true or false (required or not)
T_input_name = type of input data in database, used to support documentation



Each input also has 3 characteristics defined in a Smarty .conf file, and there is a .conf file for every language (.ini be under languages)

E_input_name = error message
I_input_name = invalid message
P_input_name = prompt message

Smarty constructs the input tags like so:

<input type="text" dojoType="dijit.form.ValidationTextBox"
    name="input_name" id="input_name"
    regExp="{#V_input_name#}"   
    errorMessage="{#E_input_name#}"
    promptMessage="{#P_input_name#}"
    invalidMessage="{#I_input_name#}"
    length="{#L_input_name#}" />



There is a simple javascript validation that accepts an array of inputs and tests if they are valid with input_name.isValid(), displaying input_name.errorMessage if not, and cancelling the submit.

On the server side, there is a loop that tests the inputs against the same strings:

foreach ($aInput as $k => $v)
  if (isset($aIni['V_'.$k]))
  { 
    $sInput=trim($v); 
    if (isset($aIni['R_'.$k])
    if (($aIni['R_'.$k]=='true') && ($sInput=='')) /* Test for required */
      return false;
    if (!filter($aIni['V_'.$k],$v))  /* flter ensures data complies with regexp */
        return false;
   }



This allows the client-side code to help the user enter valid data, and allows the server-side code to protect the server by disallowing or discarding data that isn’t valid.

Please note that page-level validation, where the required state and content of data may vary based on other inputs must be reflected at both the client and server side.

What you can do with FireBug

  • Debug javascript
  • Examine the DOM tree
  • Understand the CSS
  • Change the CSS in the browser to see its effect
  • See the layout of the page
  • Determine the dimensions of page elements
  • See the page components and understand the page load process
  • View the HTTP headers
  • Evaluate javascript expressions and commands interactively
  • Use debug write (console.debug) statements to issue debug data
  • Add breakpoints
  • Profile your page

If you use it, all the time, contribute. Ask your employer to support it.