Tag Archives: jQuery

Issues with jQuery and ZendFormElementCheckbox

In addition to the more obvious backwards compatibility breaks encountered when migrating from ZF1 to ZF2, there are also more nuanced changes.  In this particular instance, the migration to ZendForm broke the standard code used to determine whether a checkbox input is checked.  The resultant value was always false.

The code we used to determine the a checkbox’s state was extremely simple.

var value = $('input[name="my_element"]').prop('checked') ? 1 : 0;

Next, the ZendForm code responsible for instantiating the element object:

namespace ApplicationForm;

class MyCheckboxForm extends Form
{
    public function __construct($name = null)
    {
        $this->add(array(
            'name' => 'my_checkbox',
            'type' => 'Checkbox',
            'options' => array(
                'label' => 'My Checkbox',
            ),
        ));
    }
}

Under ZendForm, the standard resultant HTML for the checkbox element looks like this:

<input name="my_checkbox" value="0" type="hidden">
<input name="my_checkbox" value="1" type="checkbox">

Gasp… a hidden element! The first input element, which is most certainly not a checkbox, receives priority using the aforementioned selector query. There are a few simple ways to fix this…

Fix #1

It seems as though the creators of Zend Framework had some foresight, and gave programmers the option to disable the hidden element.

$this->add(array(
    'name' => 'my_checkbox',
    'type' => 'Checkbox',
    'options' => array(
        'label' => 'My Checkbox',
        'use_hidden_element' => false,
    ),
));

Fix #2: With Hidden Element

If you wish to retrain the hidden element, you can update the selector query as follows.

var value = $('input[name="my_element"]:checkbox').prop('checked') ? 1 : 0;

jQuery Tablesorter helper function for WordPress

In one of my projects, I converted WordPress into a reporting engine, which is used at 20 car dealerships to track Internet sales.  During development, I found that I was writing the same code over and over again for the jQuery Tablesorter plugin, which allows you to sort tables using a simple JavaScript call.

First, I would have to queue the script file, then add the appropriate JavaScript. To ensure the JavaScript was executed at the right time, I had to create a function to use it with add_action().  I found this to be tedious and unnecessary, and wrote a simple helper function to remedy this.  The following function was added to /wp-admin/includes/template.php, but if you use it, it will most likely go in a plugin or theme include.  This will prevent it from being overwritten during WordPress upgrades. Continue reading jQuery Tablesorter helper function for WordPress

Simple handling of jQuery dependencies with Zend Framework 1.9.x

I have a lot of experience with WordPress development, and I’ve grown to love the way JavaScript dependencies are handled in that particular application.  In WordPress, all JavaScript dependencies are defined in /wp-includes/script-loader.php.  To ensure jQuery loads before any jQuery-dependent scripts, you just use $script->add() and reference the jQuery library ID.  Easy as pie. Continue reading Simple handling of jQuery dependencies with Zend Framework 1.9.x

Create a slide down menu with toggle button using jQuery

Recently, I have come to find myself recreating the same code over and over again for jQuery slide down menus equipped with one button to toggle display. There’s nothing complex about this code, but it will give beginners the gist of how to do accomplish the task. For this example, we will use jQuery 1.3.2, delivered from Google’s CDN.

On a side note, using a CDN like Google’s can lessen the load on your server, and will actually help reduce overall bandwidth usage on the web as whole. If a visitor has already downloaded the jQuery library from Google’s CDN, the majority of the time they won’t need to do it a second time if you implement this strategy.

The Google CDN address for jQuery 1.3.2 can be implemented using the following code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

HTML:

<input type="button" id="hidden_menu_button" value="Toggle Menu" />
<div id="hidden_menu" style="display: none;">
	<label><input type="checkbox" />Checkbox #1</label>
	<label><input type="checkbox" />Checkbox #2</label>
</div>

JavaScript:

<script type="text/javascript">
(function($) {
	$("#hidden_menu_button").click(function() {
		if ( $("#hidden_menu").is(":hidden") ) {
			$("#hidden_menu").slideDown("normal");
		} else {
			$("#hidden_menu").slideUp("normal");
		}
	});
})(jQuery);
</script>

View Demo