Ddslick selection options have a post value for the selected parameter - jquery plugin

Question

I use ddslick to create a drop-down menu with icons, the only problem is when I submit the form, the value of the selected parameter is always empty, it works fine if I disable ddslick.

<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> 

Version: jquery-1.7.2.js jQuery UI - v1.8.20

Thanks for any help, a lot apcceated

Answer 1

There is an error in ddslick that leaves hidden entries without a name attribute.

I managed to add a couple of lines to ddslick so that it adds the select name attribute to the hidden element that it creates.

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

Then add the following to 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 2

Perhaps a better solution than this, but what I did when I came across this I took my chosen value and put it in 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 3

Snipe656 concept works, but the script has an error. The correct part of the script 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 4

 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 5

It was possible to fix this by dynamically adding a name to the hidden input, which stores the value of the selected parameter.

In HTML:

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

In Javascript:

• "ddslick" it:

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

• Dynamically add name attribute to hidden

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

Answer 6

The ddslick plugin modifies all select tags and creates a new hidden <input> -field for them. Take a look at your code and you will probably find the input undefined:

 <input name="undefined" id="undefined" class="dd-selected-value" type="hidden" value="1"> 

Something that is not everything to clear on the plugin page is that the plugin needs an ambient div And the name and id to select -tag in order to work properly. Therefore use:

 <div id="cflagdd_container"> <select class="cflagdd" name="cflag" id="cflag"> <option value="0">No action</option> <option value="1" selected data-imagesrc="...">Resolved</option> ... </select> </div> 

You now have valid input:

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

Refer to the container in your jquery:

 $('.cflagdd_container').ddslick(); 

Answer 7

You have to put the selected ddslick data in a field of type input.hidden. Then ddslick displays the input element in HTML. In no case does the html element send data when you do a simple submit form .;)

Answer 8

@John J

I had the same problem as you. All of these tips / tricks here did not help.

The problem with ddslick is its error. There is no name sent with the selected item, but it is

it should be.

Try this successor:

http://ddslickremablized.remabledesigns.com/

Your error has been fixed in this version. The selected item will be correctly sent to the server.

Answer 9

You can try this, it worked for me.

 $('.cflagdd').ddslick({ onSelected: function(selectedData){ $('.dd-selected-value').prop ('name', 'cflag'); } }); 

Answer 10

Here's the fix for this:

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

FIND THIS LINE IN AN UNIFIED SOURCE (AROUND LINE 103)

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

AND ADD IT BELOW IT:

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

This fixed the problem for me!

Answer 11

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

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

This will send the correct data to the server

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