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(){

Nov 2011

  • John

    Ah ha! I was struggling with this, trying to figure out what Channels includes that I need to include as well to get ee_url_title to work… and your solution worked great. I had already found the plugin to include and the structure for the html was all correct, but that last little bit of jQuery to link up changes from the title field to call the function on the url_title field was all I was missing. Thanks!