JQuery UI Examples

Hi Guy,

Within say an Accessory you can include any UI module like this:

$this->EE->cp->add_js_script(array('ui' => 'core'));
$this->EE->cp->add_js_script(array('ui' => 'draggable'));
$this->EE->cp->add_js_script(array('ui' => 'droppable'));

You can then use the example code from the UI documentation in your own scripts.

Cheers

Greg

Sorry, posted using the wrong account.

Greg,

I tried using this for jQuery’s autocomplete component:

$this->EE->cp->add_js_script(array("plugin" => "autocomplete"));
$this->EE->javascript->compile();

But when I try to use

$(***).autocomplete({...});

I receive this error:

TypeError: Result of expression '$("#field_id_13").autocomplete' [undefined] is not a function.

I’ve also added autocomplete’s dependencies:

$this->EE->cp->add_js_script(array("plugin" => "core"));
$this->EE->cp->add_js_script(array("plugin" => "widget"));
$this->EE->cp->add_js_script(array("plugin" => "position"));

But that doesn’t seem to help.

Bringing in my own version of jQuery UI with, the core, widget, position and autocomplete components works just fine.

Any reason why, after bringing in those plugins, that I’m receiving that error? After combing through the compiled javascript, itt seems as if the plugins aren’t getting loaded. Do I need to add something?

I’m using 2.1.1 build 20101018.

Thanks, Wes

accordion/core/widget/position are in the system/expressionengine/javascript/compressed/ui directory, so you’d load with:

$this->EE->add_js_script(
          array('ui' => array(
                'core', 'widget', 'position', 'autocomplete'
          )
);

eta: use ‘plugin’ to load things in the plugin directory eg: overlay or tablesorter. make sense?

Makes sense. Thanks Greg. Any chance this stuff could be added to the documentation?

gah. You’re right. It isn’t well documented. reported as a bug https://support.ellislab.com/bugs/detail/14263/, and we’ll get ‘er fixed up.

Thanks!

Hello,

I’m new to expression engine. In one of the site I’m working on, I’m planning to add a jQuery UI dialog box for a button on click. It would be great if any of you can share your ideas in implementing this.

My page has 3 template codes embedded in the actual page -> 1. Header 2. Content 3. Footer

I tried adding a jQuery script entries in the head section under the Header template, I just gave a sample script to test if a div tag can be loaded in a dialog box.

To be precise it is more of normal jQuery in a page rendered by expression engine variables. But I was not able to get the jQuery UI.

Any sample code or snippets are much appreciated.

Thanks! Adi

Adi,

It sounds like what you’re looking for is just a standard jQuery UI dialog box, whereas this post was about using EE’s built-in jQuery library for add-ons. Most jQuery UI tutorials should help you out just fine. I’d start at the jQuery UI site and work my way from there.

Wes