Grails multi select plugin not working

Question

I have 6 dropdowns in my grails application written using g select tags and now I need multiple selections in all the dropdowns but I am not able to implement this using the Grails multi select plugin

First of all I have included plugins - multiselect and resources in my Buildconfig.groovy using the following lines :

compile ":multi-select:0.2"
runtime ":resources:1.2.2"

The following codes are in my "index.gsp" file

My earlier code with basic single selection drop down :

<g:select from="['AFFILIATES', 'CSE','DISPLAYADS','EMAIL','MOBILEWEB','OTHERS','ORGANIC','SEO', 'SEM']" name="mv" id = "mv" 
           onchange="${remoteFunction(
           controller:'Com', 
           action:'ajaxGetMv', 
           // params:'\'mv=\' + escape(this.value)',
           params:'\'mv=\'+this.value+\'&department=\'+$(\'department\').value+\'&device=\'+$(\'device\').value+\'&browser=\'+$(\'browser\').value+\'&platform=\'+$(\'platform\').value+\'&time_period=\'+$(\'time_period\').value+\'&metric=\'+$(\'metric\').value',
           onSuccess: 'printpgtyp(data)')}"
></g:select>

This has to be changed to something like below : Attempt at multi select dropdown :

<ui:multiSelect from="['AFFILIATES', 'CSE','DISPLAYADS','EMAIL','MOBILEWEB','OTHERS','ORGANIC','SEO', 'SEM']" multiple="yes" name="mv" id = "mv" noSelection="['':'Select One']" 
           onchange="${remoteFunction(
           controller:'Com', 
           action:'ajaxGetMv', 
           // params:'\'mv=\' + escape(this.value)',
           params:'\'mv=\'+this.value+\'&department=\'+$(\'department\').value+\'&device=\'+$(\'device\').value+\'&browser=\'+$(\'browser\').value+\'&platform=\'+$(\'platform\').value+\'&time_period=\'+$(\'time_period\').value+\'&metric=\'+$(\'metric\').value',
           onSuccess: 'printpgtyp(data)')}"
/>

Also, I have added the following line in index.gsp outside the tag (form tag contains all my g select tags - dropdowns)

<ui:resources includeJQuery="true"/>

It is not clear if this should be true/false as the results are same in both cases. Reference link

After all this, I am still getting the same dropdown as before and there is no multiple selections yet. I am using Grails - 2.3.4 What am I missing here? What else should I add/remove? Are the steps followed correct?

Any suggestions/feedback will be highly appreciated.

UPDATE :

Using this in index.gsp now:

<g:select from="['AFFILIATES', 'CSE','DISPLAYADS','EMAIL','MOBILEWEB','OTHERS','ORGANIC','SEO', 'SEM']" name="mv" id = "mv" multiple="true"
           onchange="${remoteFunction(
           controller:'Com', 
           action:'ajaxGetMv', 
           // params:'\'mv=\' + escape(this.value)',
           params:'\'mv=\'+this.value+\'&department=\'+$(\'department\').value+\'&device=\'+$(\'device\').value+\'&browser=\'+$(\'browser\').value+\'&platform=\'+$(\'platform\').value+\'&time_period=\'+$(\'time_period\').value+\'&metric=\'+$(\'metric\').value',
           onSuccess: 'printpgtyp(data)')}"
></g:select>

And controller is like this

    def ajaxGetMv = {
            if(params.metric == 'Marketing visits')
            {
            def com = Com.executeQuery("select p.date_hour, p.visits, case when visits_ly IN (0,null) THEN 0 ELSE ((visits/visits_ly - 1)*100) END as yoy, case when visits_lw IN (0,null) THEN 0 ELSE ((visits/visits_lw - 1)*100) END as wow, p.mv, p.browser, p.department, p.platform, p.device, p.time_period from Com p where p.department = ? and p.device = ? and p.browser = ? and p.platform = ? and p.mv = ? and p.time_period = ? order by col_0_0_ asc ",[params.department, params.device, params.browser, params.platform, params.mv, params.time_period])
            render com as JSON
            }
//.........else if and so on for all my metrics

So now, index and controller communicate for only one value, how do I make them communicate for multiple selections here? I think controller will have to change here

Joe Joe · Accepted Answer · 2014-07-23T16:32:44

Grails 2.x supports multi select without a plugin. Below is a example from the documentation. The UI for multi select is not the best.

// create multiple select
<g:select name="cars"
      from="${Car.list()}"
      value="${person?.cars*.id}"
      optionKey="id"
      multiple="true" />

Here is an example on how I accessed multi select checkboxes in the view and controller:

   <g:each in="${Car.findAllByActive(true)}" var="car">
        <div class="span4 checkbox">
             <g:checkBox name="cars" value="${car.id}" checked="${car in instance?.cars}" />
              <label>${car.name}</label>
        </div>
    </g:each>

    params.cars.each { it ->
        instance.cars.add(Car.findById(it as Long))
    }

Grails multi select plugin not working

1 Answers