Tech Chorus

How to create dijit.form.DateTextBox widget programmatically

There are two ways to create Dojo's widgets

1. Declarative
2. Programmatic

It is often a matter of project preference and personal opinion to decide which approach to take. Many developers are against mixing up markup and JavaScript.

Programmatically creating widgets has its advantages. For instance, you may want to create a date picker when a button is clicked.

In a previous article we discussed how to add a Dojo date picker declaratively. We also showed how to add Dojo date picker without writing a singe line of JavaScript using the Zend Framework.

Let's create a dijit.form.DateTextBox widget programmatically step by step.

In the previous articles I've written about using Dojo date pickers and filteringSelect widgets.

Is the value of your Zend_Dojo_Form_Element_DateTextBox form element set to 11/30/1899?

The code speaks for itself.

<script language="text/javascript">
myNumber = 22/7;
//To round the myNumber to 2 number of decimal places we use the toFixed() method
rounded = myNumber.toFixed(2);
alert("My number is " + rounded);
</script>

We have all seen drop down date pickers in web pages that are really convenient for the user. Let us see how we can build one with just 2 lines of JavaScript code. Yes, you read it right. 2 lines of JavaScript. You don't even have to know JavaScript to build a date picker in your web page.

For the impatient: Demo is here

Before: Traditional HTML form with input field
Visit the above link and take a look at the HTML only form fields that collect date information from the user. If you don't use a server side scripting language to generate the form fields you have to type a lot of select options to make it easier for the user. Populating the select fields with the desired option, especially in the case of failed validation, takes a bit more server side code. Most of you would agree that the user hates these kind of forms.

Zend Framework users know that Dojo toolkit is integrated to 1.6+ release. In the previous post I demonstrated how to add a cool Dojo date picker widget to your text input form element by manually typing the JavaScript code. In this post let us discover how to create a cool date picker form element with Zend_Dojo. As the title says you don't have to write a single line of JavaScript. Zend_Dojo does all the work for you.

Prerequisite: you are familiar with Zend_Form, Zend_Controller and Zend_Layout.

Bootstrap: Zend Framework comes with many Dojo specific view helpers. You have to instruct the view object to find Dojo view helpers.

Grab the view object and add the following line in your bootstrap file.

Zend Framework brings lot of user interface goodies with Zend_Dojo family of classes. In this article let us explore how to build a form element with autocomplete feature.

As a prerequisite you must be familiar with

• Zend_Controller_Action
• Zend_Layout
• Zend_Form

Would it be nice if I tell you that you don't need any JavaScript knowledge? Zend_Dojo empowers PHP programmers to build dynamic and appealing forms without writing a single line of JavaScript.

This example has been tested with Zend Framework 1.7.0.

In this example, we will build a text element where the visitor can either select the user from the drop down list or type the username. While typing the username, the form element generates a drop down list filtering the data from user input. Take a look at the filteringSelect Dijit example to understand the type of form element we will be building.

FilteringSelect differs from Combobox Dojo widget in that, the value of the form element must be provided in the list. Also, you could display the username on the screen and set the 'user id' as the element value.

We will use the autoCompleteDojo action helper to send JSON data.

Let's start coding.

Today, we will learn how to toggle the 'disabled' attribute of input elements in a div block using jQuery.

The 'disabled' attributed is set to HTML input elements where user input is not desirable. When 'disabled' attribute is set to an input element, it is rendered read only. The read only input elements make lot of sense in various contexts.

<input type="text" name="elementName" disabled="disabled" />

Wouldn't it be more fun if we play around with the 'disabled' attribute programmatically? We are going to do exactly the same in this example.