ddslick select options won'st post value of selected option - jquery plugin

Question

I am using ddslick to make drop down menu's with icons, the only trouble is when I post the form the value of the selected option is always empty, it works fine if I turn ddslick off.

<script language="javascript" type="text/javascript">
$('.cflagdd').ddslick({
 onSelected: function(selectedData){
    //callback function: do something with selectedData;
   // $('#editcflag').submit(); - this does not work, posts form on page load
}   
});
</script>

<select class="cflagdd" name="cflag">
<option value="0" selected="selected">No action flag set</option>
<option value="1" data-imagesrc="'.base_url().'images/Actions-flag-green-icon.png">Resolved</option>
<option value="2" data-imagesrc="'.base_url().'images/Actions-flag-yellow-icon.png">Investigate</option>
<option value="3" data-imagesrc="'.base_url().'images/Actions-flag-red-icon.png">Urgent</option>
<option value="4" data-imagesrc="'.base_url().'images/Actions-flag-blue-icon.png">False positive</option>
</select>

Versions: Jquery-1.7.2.js jQuery UI - v1.8.20

Thanks for any help, much apreceated

Answer 1

Perhaps a better solution than this one but what I did when I ran into this is I took my selected value and placed it into a hidden input element.

<script language="javascript" type="text/javascript"> 
    $('.cflagdd').ddslick({  
        onSelected: function(selectedData){  
            if(data.selectedIndex > 0) {
                $('#hidCflag').val(data.selectedData.value);

                $('#editcflag').submit();
            }   
        }    
    }); 
</script>  

<input type="hidden" name="hidCflag" id="hidCflag" value="" />

<select class="cflagdd" name="cflag"> 
    <option value="0" selected="selected">No action flag set</option> 
    <option value="1" data-imagesrc="'.base_url().'images/Actions-flag-green-icon.png">Resolved</option> 
    <option value="2" data-imagesrc="'.base_url().'images/Actions-flag-yellow-icon.png">Investigate</option> 
    <option value="3" data-imagesrc="'.base_url().'images/Actions-flag-red-icon.png">Urgent</option> 
    <option value="4" data-imagesrc="'.base_url().'images/Actions-flag-blue-icon.png">False positive</option> 
</select> 

Answer 2

Solution
<select id="status" name="status" class="ddslick" >
        <option  value="1">Admin Only</option>
        <option  value="2">Editing</option>
        <option value="3">Review</option>
        <option  value="4">Live</option>
</select>

<script>
$("select.ddslick").each(function(){
        var name =  $(this).attr('name');
        var id = $(this).attr('id');
        $("#"+id).ddslick({
            showSelectedHTML: false,
            onSelected: function(selectedData){
                $("#"+id+ " .dd-selected-value").prop ('name', name);
             }  
        });
    });
</script>

Answer 3

FInd this text in jquery.ddslick.min.js and add a name to this

<input class="dd-selected-value" type="hidden" />

This will be sending correct data to server

<input class="dd-selected-value" name="cflag" type="hidden" />

Answer 4

Download Stable Version

https://raw.githubusercontent.com/jsmodules/ddslick/master/src/jquery.ddslick.js

I have tried almost any of the answers given. Some did not work for multiple instances, while others have broken links to fixed scripts. I have found this up to date version of ddSlick which actually fixed this 'bug'.

Answer 5

There's a bug in ddslick that leaves the hidden inputs without a name attribute.

I was able to add a couple lines to ddslick to get it to add the select's name attribute to the hidden element it creates.

First, download the uncompressed version of ddslick: http://dl.dropboxusercontent.com/u/40036711/Scripts/jquery.ddslick.js

Then add the following on line 106, or right after the lines starting with "var ddSelect = ..." :

// set hidden input name
ddSelect.find('input.dd-selected-value').attr('name', $(this).attr('name'));

Answer 6

Snipe656 conceptual idea works but the script has a mistake. The correct script part should be:

<script language="javascript" type="text/javascript"> 
    $('.cflagdd').ddslick({  
        onSelected: function(data){  
            if(data.selectedIndex > 0) {
                $('#hidCflag').val(data.selectedData.value);

                $('#editcflag').submit();
            }   
        }    
    }); 
</script>

(...)

Answer 7

Managed to fix it by dynamically adding a name to the hidden input that stores the value of the selected option.

In the HTML:

<select id='locationList'> 
  <option value="a">a</option>
  ...
</select>

In the Javascript:

1. "ddslick" it:

   $('#locationList').ddslick();
   

2. Dynamically add name attribute to hidden

   $('#locationList').find('input[type=hidden]:first').attr("name", "location");
   

Answer 8

Here's the fix for this:

https://github.com/ahmeij/ddslick/commit/6a085996428dd6f1a06a6fd2195c8f4f13d8ab28

FIND THIS LINE IN THE UNMINIFIED SOURCE CODE (AROUND LINE 103)

 obj.addClass('dd-container').append(ddSelectHtml).append(ddOptionsHtml);

AND ADD THIS BELOW IT:

// Inherit name attribute from original element
obj.find("input.dd-selected-value").attr("name", $(original).attr("name"))

This fixed the issue for me!