web notes - a blog

Using objects with javascript, under IE requires attention to commas.

If you have an AJAX application that won’t load, and the error message is difficult to match up with the code, or not descriptive, one of the best things to check is the objects for trailing commas.

The code below will run fine in FF, but will not load in IE, because of the trailing comma after the second object in the array.

object={"object":"value","array":[{"v":"one"},{"v":"two"},]};

Be sure to check any JSON data sent back from the server, as well as that which is assigned or dynamically generated in javascript.

Brute force debugging with alert statements may be helpful.

Each step ends with place in version control, submit for review, evaluate review responses and apply them as appropriate..

1. Define the page architecture, common page elements first. These must be stable before beginning.
2. Build page level XHTML/CSS for all pages, target browser FireFox, with only enough back end code to deliver the pages. Use static server-side content to populate dynamic controls/queries for illustration. Create data in the database to support it. Validate the XHTML/CSS as well as possible (some libraries have proprietary attributes).
3. If common components are identified in the previous step, they should be constructed reusable/shared components. For example, a file upload or search results dialog box will probably be used in more than one place. Both client and server-side code should address this to avoid duplicate code.
4. Tune colors.
5. Define and implement client-side functionality, allowing content to be delivered through AJAX, navigation, any dynamic operations.
6. Implement client-side validation.
7. Extend pages to run under any other browsers you will be supporting. Clearly indicate limitations, such as will function but may not display well. Provide notification for users of unsupported browsers.
8. Integrate and implement server-side validation. It should be identical to client-side validation, with addition considerations for security.
9. Implement page level functionality.
10. Test, test, test.

The link above demonstrates the use of a dijit ContentPane to request content from the server with a client-side request refresh, and error detection that allows the server to indicate when the requests should be stopped.

The intended use is to allow graceful monitoring of background scripts on a server.

Basic approach:

• Use the ContentPane to display the content. A quote script is used to illustrate the content change.
• Use a javascript timer to request a refresh every 5 seconds
• Have the server-side code count and issue a 303 See Other when processing has completed. http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html
• Have the client-side code catch the 303 and act accordingly. In this case, it changes the displayed text to reflect the status, puts up an alert box, and clears the timer.

Use View Source to view the client-side code, server-side code is listed at the bottom of the page.

This is a nice way to implement a refreshing iframe with dojo.

Notes on using a dojo/RIA web interface to launch background (server-side) scripts.

• File uploads can run under FF and IE with dojo.io.iframe.send, and it is a nice interface. There is another post on this blog, with sample code.
• Synchronizing background server tasks with client launch and monitor requires the client to be able to identify script failure to execute, execute reporting whether the operation was successful or not.
• Two-phase, asynchronous execution can be made much more secure by storing the second-phase action on the server. Thus, if the first-phase executes correctly, no information is required from the client to continue the operation. All data submitted can be disregarded.
• Success or Error can be indicated with HTTP headers in cases where no data is required on the response.
• Client-side redirects can be used to transition to the next phase after a successful run of one phase.
• User should be alerted that scripts initiated through the web interface cannot be stopped (unless a mechanism is provided).
• User should be able to return to a previously initiated scripts and view the output.
• Background script output should be delivered to the initiator through an email. User should be able to suppress email.
• Background scripts should deliver output in text only.
• Server must be responsible for state management. Server must ensure background scripts do not collide with each other, or the data, and must provide an interface that allows the client to determine if administration should be readonly or prohibited when specific scripts are executing.
• Server must be responsible for scheduling resource intensive tasks to prevent service interruptions.
• An object is an excellent way to allow a single dialog box to submit data to different scripts without writing additional code. The object is then assigned to the AJAX content property.
• Server must have intelligence to adjust state of client, for example hiding informational messages after termination, enabling buttons to allow continuation, and providing alerts for errors.
• Initial error reporting can be limited to ‘Error’, a simple indication that something went wrong. After testing, common errors should be delivered with additional explanatory text.
• Balance distribution of client side code. Although it is nice to split a page into many components that can stand alone, this increases the number of HTTP requests which has performance impacts. Building the javascript into a single file is one solution, bundling related code together is another. Templates should include only the elements that require template processing. Large sections of javascript should be removed. Use caching to improve performance.
• Break server side code into components such that only the code required to execute is read. This doesn’t always work out perfectly, and there are impacts to opening alot of files as well, but the server impacts are less serious than the client side, because there is no data transfer.
• Put some timing code into the application so you can see where the time goes. Use YSlow to improve page delivery performance.
• Use FireBug to monitor traffic between client and server.
• Use a log file to write out debugging information. Check the error_log frequently. Use echo, var_dump, and exit. Build graceful error reporting into the application from the beginning. This will make debugging much easier. Log all errors. Put a switch in to allow debug displays to be suppressed for production systems.
• Use a tee (*nix command) to pipe script output to a file and into mail.
• Document the entire process and describe it to the appropriate people. This will ensure you understand what is happening and that it is what is supposed to be done. Be ready to change.
• Write a good test plan and use it.
• Be mindful of security. Validate all inputs. Escape all command line parameters that are user submitted. Check for access privileges for all requests, at all times. Avoid divulging application details or data.
• Copy script output to a temporary access area, do not grant access further into the server for output display. Identify script output with the script name and session id.
• Have Apache execute as apache:apache, or nobody:nobody, and allow only those scripts that should be executed through the web to have execute permissions for that user.
• Be persistent and creative.

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.