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

Question

J'utilise ddslick pour faire des menus déroulants avec des icônes, le seul problème est que lorsque je poste le formulaire la valeur de l'option sélectionnée est toujours vide, cela fonctionne bien si je désactive 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>

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

Merci de votre aide.

Answer 1

Trouver ce texte dans jquery.ddslick.min.js et ajoutez un nom à ce

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

Cela permettra d'envoyer les données correctes au serveur

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

Answer 2

Télécharger la version stable

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

J'ai essayé presque toutes les réponses données. Certaines n'ont pas fonctionné dans plusieurs cas, tandis que d'autres ont des liens brisés vers des scripts. J'ai trouvé cette version actualisée de ddSlick qui a corrigé ce "bug".

Answer 3

Voici la solution à ce problème :

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

TROUVER CETTE LIGNE DANS LE CODE SOURCE NON MODIFIÉ (AUTOUR DE LA LIGNE 103)

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

ET AJOUTEZ CECI EN DESSOUS :

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

Cela a résolu le problème pour moi !

Answer 4

Le plugin ddslick modifie toutes les balises de sélection et crée une nouvelle balise cachée. <input> - champ d'action pour eux. Examinez votre code et vous trouverez probablement une entrée non définie :

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

Quelque chose qui n'est pas très clair dans la page du plugin est que le plugin a besoin d'une div environnante ET d'un nom et d'un identifiant pour que la balise de sélection fonctionne correctement. Utilisez donc :

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

Vous disposez à présent d'une entrée valide :

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

Référez-vous au conteneur dans votre jquery :

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

Answer 5

Usted tienen pour mettre le données sélectionnées de ddslick dans un domaine tel que input.hidden . Ensuite, ddslick rend un entrée dans le code HTML. Il est impossible qu'un élément HTML envoie des données lors de l'envoi d'un simple formulaire ;)