ddslick seleccionar opciones no publicar valor de la opción seleccionada - jquery plugin

Question

Estoy usando ddslick para hacer menús desplegables con iconos, el único problema es cuando publico el formulario, el valor de la opción seleccionada está siempre vacío, funciona bien si apago el 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> 

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

Gracias por cualquier ayuda, tanto apreceated

Answer 1

Tal vez una solución mejor que éste, pero lo que hice Cuando me encontré con esto, tomé mi valor seleccionado y lo coloqué en un elemento de entrada oculto.

<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

El plugin ddslick cambia todos los selectos-tags, y crea un nuevo ocultado <input> -field para ellos. Mira en su código y probablemente encontrará una entrada indefinido:

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

Algo que no es todo para borrar en la plugin-page es que el plugin necesita un div que rodea Y un nombre y una identificación para el selecto-etiqueta para funcionar correctamente. Así que utilice:

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

Ahora usted tiene una entrada válida:

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

Consulte el envase con sus jQuery:

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

Answer 3

Usted tienen para poner el selectedData de ddslick en un campo como input.hidden. Luego, ddslick representa un elemento de entrada en HTML. De ninguna manera un elemento html envía datos cuando haces un envío de formularios simple. ;)

Answer 4

Snipe656 idea conceptual funciona pero el script tiene un error. La parte de la escritura correcta debe ser:

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

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

(...)

Answer 5

@ John J

que tenían el mismo problema que tú. Todos estos consejos/consejos aquí no ayudaron.

El problema con ddslick es su error. No se ha enviado ningún nombre con el elemento seleccionado, pero este

debe ser.

probar este sucesor:

http://ddslickremablized.remabledesigns.com/

Su error se corrige en esta versión. El artículo seleccionado se enviará correctamente al servidor.

Answer 6

Puedes probar esto, funcionó para mí.

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

Answer 7

Hay un error en ddslick que deja las entradas ocultas sin un atributo de nombre.

Pude agregar un par de líneas a ddslick para que agregue el atributo de nombre de selección al elemento oculto que crea.

En primer lugar, descargar la versión sin comprimir del ddslick: http://dl.dropboxusercontent.com/u/40036711/Scripts/jquery.ddslick.js

continuación, agregue el siguiente en la línea 106, o justo después de las líneas que comienzan con "var = ddSelect ...":

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

Answer 8

Aquí es la solución a este:

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

Encuentre esta línea en el código fuente UNMINIFIED (alrededor de la línea 103)

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

y añadir debajo de él:

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

Esto ha solucionado el problema para mí!

Answer 9

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 10

arregló para fijarlo de forma dinámica mediante la adición de un nombre a la entrada oculto que almacena el valor de la opción seleccionada.

En el código HTML:

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

En el Javascript:

1. "ddslick" que:

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

2. añadir dinámicamente atributo de nombre a escondidas

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

Answer 11

encontrar este texto en jquery.ddslick.min.js y agregar un nombre a esta

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

Este será el envío de datos correctos al servidor

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