CODEWITHSUNDEEP
jqueryjquery-uijquery-plugins
John J
John J

Reputation: 195

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

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

Upvotes: 9

Views: 14779

Answers (12)

gfcodix
gfcodix

Reputation: 181

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

Upvotes: 2

Muthukumar
Muthukumar

Reputation: 21

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

Upvotes: 2

Seb Viergever
Seb Viergever

Reputation: 23

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");

Upvotes: 2

areeb
areeb

Reputation: 422

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>

Upvotes: 3

Friendly Code
Friendly Code

Reputation: 1655

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!

Upvotes: 1

Bonjiro
Bonjiro

Reputation: 345

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'));

Upvotes: 13

Mazhar Ahmed
Mazhar Ahmed

Reputation: 1543

You can try this, it worked for me.

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

Upvotes: 0

Elisabeth
Elisabeth

Reputation: 21216

@John J

I had the same problem like you. All these tips/hints here did not help.

The problem with ddslick its buggy. There is no name sent with the selected item but this

should be.

Try this successor:

http://ddslickremablized.remabledesigns.com/

Your bug is fixed in this version. The selected item will be sent correctly to the server.

Upvotes: 0

Filipe M S Bento
Filipe M S Bento

Reputation: 31

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>

(...)

Upvotes: 3

Andreas Mika
Andreas Mika

Reputation: 1

You have to put the selectedData of ddslick in a field like input.hidden. Then, ddslick renders an input element into HTML. No way a html-element sends data when you do a simple form-submit. ;)

Upvotes: 0

Linkmichiel
Linkmichiel

Reputation: 2130

The ddslick plugin changes all select-tags, and creates a new hidden <input>-field for them. Look into your code and you'll probably find an undefined input:

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

Something that is not all to clear on the plugin-page is that the plugin needs a surrounding div AND a name and id for the select-tag to work properly. So 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>

Now you have a 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();

Upvotes: 0

Snipe656
Snipe656

Reputation: 845

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>

Upvotes: 5

Related Questions