Here is a quick tutorial on how to handle radion buttons using jQuery.

< input type="radio" name="empType" value="regular" /> Regular
< input type="radio" name="empType" value="temporary" /> Temporary

Then the jQuery code: (assuming that you have already included the JS file in the header…)

 $("input[@name='empType']").change(
        function() {
            if ($("input[@name='empType']:checked").val()) {
                alert($("input[@name='empType']:checked").val());
            }
        }
    );

I am sharing this because it took me a while to figure out how to handle checkboxes using jQuery.

First off, let us create a checkbox using Zend_Form.

The code for the Zend_Form_Element_Checkbox above will generate something like this:

Notice that the value is always Zero? Usually, in jQuery, we get used to getting the value of inputs using:

With that we can do all sort of things. But .val() will always return “0″. So the trick is, you need to check if the checkbox is “Checked” using something like this:

That’s about it. Basically it just the .is() in jQuery.

Sometimes, I “mix” PHP variables with Javascript. For example, I have something like this:

Note the $this->baseUrl, I need it like that. The thing is, I have that code in my view file (.phtml - in Zend Framework, this is parsed like a normal PHP file). If I remove all the Javascript in my view file and place it in a .js file, the $this->baseUrl will not be parsed. To go around this, I create a hidden input element in my view file with $this->baseUrl echoed as the value. Like this:

Then in my .js file (assuming that you have already included this file in your header, or somewhere else), I have something like this:

What it does is that jQuery gets the value of the hidden form element. The value of this hidden form element is from a PHP Variable.

So there you go, nothing special. Just something that works and I just wanted to share.

You can do this in jQuery:

This is useful if you want to “delete” or “update” multiple rows in a table at the same time. This works like the “Check All Email” in YahooMail.

And the HTML Code is:

< input class="mycheckbox" name="a" value="1" type="checkbox" />Number 1
< input class="mycheckbox" name="b" value="1" type="checkbox" />Number 2
< input class="mycheckbox" name="c" value="1" type="checkbox" />Number 3
< a href="#" id="#check_all_boxes">Check All< / a>
< a href="#" id="#uncheck_all_boxes">Uncheck All< / a>

The scenario: Every time you click on a row, the row highlights. When you click on the highlighted row - remove the highlight.
The jQuery / Javascript code:

And for the HTML Code:

Alright, here is a quick example of how to use jQuery to select all of the items in a multiple-option select box.

//Javascript part assuming that you have already included jquery.js in your header
$(document).ready(function() {
    $("#select_all_col_managers").click(function() {
        $("#col_manager_list").each(function(){
            $("#col_manager_list option").attr("selected","selected"); });
    }) ;

    $("#unselect_all_col_managers").click(function() {
        $("#col_manager_list").each(function(){
            $("#col_manager_list option").removeAttr("selected"); });
    }) ;

});

and now for the HTML part…

Filter by Collection Manager:
< select class="select_multiple" id="col_manager_list" multiple="multiple" name="RTCLMG[]">
< option>Must Select One
< option> value="< ?=$value['col_manager']?>">< ?=$value['col_manager']?>        < / select>

    < a href="#" id="select_all_col_managers">Select All< / a> 
    < a href=”#” id=”unselect_all_col_managers”>Unselect All< / a> 

Please note that I am using Code Igniter with this.

In some cases, you are required to do something (EG: show/hide divs) when a checkbox is clicked. Here is an example using jQuery.

First your checkbox will look like this:

...html code here...

< input name="myCheckBox" id="myCheckBox" value="yes" type="checkbox" /> This is a sample checkbox.

Then somewhere in your HTML head, your Javascript code will look like this:

NOTE: Do not forget to download and then include the required jQuery files in your HTML File.

I found this:

jRails is a drop-in jQuery replacement for Prototype/script.aculo.us on Rails. Using jRails, you can get all of the same default Rails helpers for javascript functionality using the lighter jQuery library.

jRails provides drop-in functionality for these existing Rails methods.

o Prototype
o form_remote_for
o form_remote_tag
o link_to_remote
o observe_field
o observe_form
o periodically_call_remote
o remote_form_for
o submit_to_remote

o Scriptaculous
o draggable_element
o drop_receiving_element
o sortable_element
o visual_effect

o RJS
o hide
o insert_html
o remove
o replace
o replace_html
o show
o toggle

Click here.

I have posted a sample code on my wiki on how to submit variables to an action controller. The sample code contains a niffty jQuery plugin - the jQuery Calendar.

Click here for the tutorial.

Update (05-07-2008): Since this post has been getting a lot of traffic and the tutorial to my wiki is not that good, I have decided to update this page and post a simpler and shorter tutorial.

So here it is…

The Javascript will look something like this:

Then my controller would look something like this:

That’s about it…
The $data that was encoded using Zend_JSON in the controller/action can now be accessed in the Javascript after you call the eval().