Using jQueryUI features in your ExpressionEngine Control Panel

Sometimes you might find it useful to add some additional UI features to your EE control panel pages – luckily EE comes bundled with jQuery and jQueryUI so you can use any of the jQuery UI widgets without needing to bundle the scripts themselves. In this example, I’m going to add a nice Date Picker control to a form to make it easier for users to enter dates.

To begin with, we need to tell EE to include the necessary jquery UI features. jQueryUI is modular and has dependencies, so even though I only want to use the ‘datepicker’ feature, that in turn relies on the ‘core’ library so I need to include them both in the list of required modules. This code will need to be in your control panel function prior to loading your view

$this->EE->cp->add_js_script(
array('ui' => array(
'core', 'datepicker'
)
));

And then in your view, it’s the usual jQuery code to wire it up. In this case I’m going to declare that any input field with a class of “datepicker” should be converted into a jQueryUI datepicker field.

<script type="text/javascript">
    $(function() {

        $("input.datepicker").datepicker();

    });
</script>

<form method="post">

<input id="expiry_date" class="medium datepicker" type="text" name="expiry_date" value="<?=htmlspecialchars($expiry_date)?>" />

<input class="submit" type="submit" value="<?=lang('submit')?>" />

</form>

You can of course do the same for any other jQuery UI feature which means it’s easy to add great interactive features to your control panel forms

08
Dec 2011
POSTED BY
DISCUSSION 2 Comments
TAGS

How to dynamically create url_titles with jQuery in ExpressionEngine modules

Whilst developing your custom module for EE, you might have a requirement to add a Url Title for one of your data types. ExpressionEngine does this in a few places in the control panel (for new Entries, Channels etc) so why not just reuse the existing functionality?

First, we need to load the ‘ee_url_title’ jQuery plugin which EllisLabs have kindly provided. The snippet below does this for you and needs to be included in your mcp file controller method.


$this->EE->cp->add_js_script('plugin', 'ee_url_title');

Now, we need to switch over to your view and add a little javascript. So given the following html code in your view


<label for="title"><?=lang('title')?></label>
<input type="text" name="title" id="title" value="<?=htmlspecialchars($title)?>" />

<label for="url_title"><?=lang('url_title')?></label></td>
<input type="text" name="url_title" id="url_title" value="<?=htmlspecialchars($url_title)?>" />

You only need to add the following snippet of javascript, this can either be in your view, or even better add it to a separate javascript file.

$(function() {

	// Attach url_title live feedback
	$("#title").bind("keyup blur",function(){
		$("#title").ee_url_title($("#url_title"));
	});

});
08
Nov 2011
POSTED BY
DISCUSSION 1 Comment
TAGS