ddslick wybierz opcje nie ma wartości post wybranej opcji - jquery plugin

Question

Używam ddslick do rozwijania menu z ikonami, jedynym problemem jest kiedy zamieszczam formularz, wartość wybranej opcji jest zawsze pusta, działa dobrze, jeśli wyłączę 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> 

Wersje: jQuery 1.7.2.js jQuery UI - v1.8.20

Dzięki za wszelką pomoc, znacznie apreceated

Answer 1

Być może lepszym rozwiązaniem niż ten jeden, ale to, co zrobiłem kiedy wpadłem na to, wybrałem wybraną wartość i umieściłem ją w ukrytym elemencie wejściowym.

<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

Wtyczka ddslick zmienia wszystkie select-tags, i tworzy nowy ukryty <input> -field dla nich. Spójrz w kodzie i prawdopodobnie znajdziesz wejście niezdefiniowanej:

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

coś, co nie jest wszystko, aby wyczyścić na plugin-page jest to, że wtyczki potrzebuje otaczającego div i nazwę i identyfikator dla select-tag do działa poprawnie. Więc używać:

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

Teraz masz ważny wkład:

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

odnoszą się do pojemnika w jQuery:

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

Answer 3

Ty mieć aby umieścić selectedData z ddslick w polu takim jak input.hidden. Następnie ddslick przekazuje element do formatu HTML. Nie ma mowy, że element html wysyła dane, gdy wykonujesz proste wysyłanie formularzy. ;)

Answer 4

Idea koncepcyjna Snipe656 działa, ale skrypt popełnił błąd. Prawidłowe część skrypt powinien być:

<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

miałem ten sam problem jak ty. Wszystkie te wskazówki/wskazówki tutaj nie pomogły.

Problem z ddslick jego buggy. Nie ma nazwy wysłanej z wybraną pozycją, ale ta wartość powinna wynosić.

Spróbuj następcę:

http://ddslickremablized.remabledesigns.com/

Twój problem został rozwiązany w tej wersji. Wybrany element zostanie wysłany poprawnie na serwer.

Answer 6

Możesz spróbować tego, zadziałało to dla mnie.

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

Answer 7

Istnieje błąd w ddslick, który pozostawia ukryte dane wejściowe bez atrybutu nazwy.

Udało mi się dodać kilka linii do ddslick, aby dodać atrybut nazwy selekcji do ukrytego elementu, który tworzy.

Najpierw pobierz nieskompresowanego wersję ddslick: http://dl.dropboxusercontent.com/u/40036711/Scripts/jquery.ddslick.js

następnie dodaj następującą na linii 106, lub tuż po linie zaczynające się od "var ddSelect = ...":

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

Answer 8

Oto Rozwiązanie tego:

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

znaleźć tej linii w taki UNMINIFIED kodu źródłowego (wokół linii 103)

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

i dodać pod nim:

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

ta stała się kwestią dla mnie!

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

Udało się naprawić poprzez dynamiczne dodawanie nazwy do ukrytego wejścia, która przechowuje wartość wybranej opcji.

W HTML:

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

W javascript:

1. "ddslick" to:

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

2. Dynamicznie dodać atrybut name do ukryty

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

Answer 11

znaleźć ten tekst w jquery.ddslick.min.js i dodać opis do tego

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

To będzie wysyłającego prawidłowych danych do serwera

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