EchMultiselect(TypeError: m.easing[this.easing] is not a function)

1

Hey guys
I am using EchMultiselect to create a multiple select.

             $this->widget('ext.widgets.EchMultiSelect', 
             array(
            'model' => $modelCtas,
            'dropDownAttribute' => 'CATServiceID',
            'data' => $data,
            'dropDownHtmlOptions' => array(
            'style' => 'width:378px;',
            ),

It works fine, but it doesn’t collapse and the close button is not working.
I get the JQuery error TypeError: m.easing[this.easing] is not a function.
What could be the issue.?

2

Check if jQuery UI library was loaded correctly. If it’s loaded correctly, what version is it ?

3

I am using
jQuery UI - v1.11.2

4

I just tested it out on a clean installation of Yii and got the same result. It seems the problem is maybe some conflict between jQuery and jQuery UI version. Try these steps to get multiselect widget running - it worked for me:

1.Disable loading of default jquery and jquery ui, add this to your config/main.php in components array

'components'=>array(
            'clientScript' => array('scriptMap' => array('jquery-ui.min.js' => false, 'jquery.js' => false,)),

2.Download jquery-ui version 1.8.13
https://jqueryui.com/resources/download/jquery-ui-1.8.13.zip

3.Create folder js in path/to/your/yii/app/ (where index.php is) and extract here files jquery-1.5.1.js and jquery-ui.min.js from downloaded zip file.

4.Add these lines to your layout in <head> section

<script type="text/javascript" src="<?php echo Yii::app()->request->baseUrl; ?>/js/jquery-1.5.1.js"></script>
<script type="text/javascript" src="<?php echo Yii::app()->request->baseUrl; ?>/js/jquery-ui.min.js"></script>

5

@jaimez
Thanks for the solution.
But I am getting this error.

TypeError: $.ui is undefined; can't access its "position" property[Learn More]  [jquery.multiselect.js:543:3](http://localhost/caviar_svn/assets/de7c2fe5/jquery.multiselect.js)

open [http://base/path/assets/de7c2fe5/jquery.multiselect.js:543:3]
clickHandler [http://base/path/assets/de7c2fe5/jquery.multiselect.js:230:43]
dispatch [http://base/path/assets/63151579/jquery.min.js:3:8384]
add/r.handle [http://base/path/assets/63151579/jquery.min.js:3:5122]

Any insights?

6

Check page source code. What *.js files are loaded ?
I have these in head section:

<script type="text/javascript" src="/testdrive/js/jquery-1.5.1.js"></script>
<script type="text/javascript" src="/testdrive/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="/testdrive/assets/e5688046/jquery.ui.widget.min.js"></script>
<script type="text/javascript" src="/testdrive/assets/e5688046/jquery.multiselect.js"></script>

What JS files have you got in the source code?

BTW I have got the same error
TypeError: $.ui is undefined; can't access its "position" property[Learn More] jquery.multiselect.js:559:3
When I didn’t include this line in the layout
<script type="text/javascript" src="/testdrive/js/jquery-ui.min.js"></script>

7

@jaimez
I just realized I had a assets/jQuery.min.js , so I have this line in my config/main:

'clientScript' = array('scriptMap' = array('jquery-ui.min.js' = false, 'jquery.js' = false, 'jquery.min.js' = false,)),

Now, in my head section I have:

<script type="text/javascript" src="/path/js/jquery-1.5.1.js"></script>
<script type="text/javascript" src="/path/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="/path/assets/de7c2fe5/jquery.ui.widget.min.js"></script>
<script type="text/javascript" src="/path/assets/de7c2fe5/jquery.multiselect.js"></script>

But now the Multi select is not visible.

8

That’s strange. When I have the same files included multiselect works perfectly. Try to delete this line from layout
<script type="text/javascript" src="/path/js/jquery-ui.min.js"></script>

This file is redundant because jquery ui library is already included in the file named jquery.ui.widget.js. But for some reason multiselect won’t work without it. I don’t understand why is it like that, but it worked for me. Maybe in your case it will work this way. So, your source code should be like this:

<script type="text/javascript" src="/path/js/jquery-1.5.1.js"></script>
<script type="text/javascript" src="/path/assets/de7c2fe5/jquery.ui.widget.min.js"></script>
<script type="text/javascript" src="/path/assets/de7c2fe5/jquery.multiselect.js"></script>

If this won’t work, I’m afraid I ran out of ideas. This problem obviously needs someone more skilled. If you can’t get this to work consider using different approach - plain HTML <select multiple>, field of checkboxes, another multiselect extension or try to create custom widget

9

Thanks @jaimez for the insights.

I resulted to creating a custom drop-down with a list of checkbox options, then used css and js to achieve a multiple select and it is working perfectly.
I hope I will make a widget using that method soon.:smiley: