Suppression et réapplication du widget sur un élément

Question

J'ai un problème. J'applique le widget sur select élément. Lorsque je recharge le même select je supprime le widget sur l'élément select et de refaire une demande. Mais en réappliquant le widget sur le même élément, les changements ne sont pas reflétés.

Voici l'instruction de sélection HTML :

<select id="countries" class="multiselect" multiple="multiple" name="countries">
        <option value="USA">United States</option>
        ...
</select>

Pour appliquer le widget sur le même élément :

function applyWidget(){ 
    $(".multiselect").multiselect();
}

Une fois que le widget est appliqué, il crée une div con class=".ui-multiselect" .

Pour supprimer la classe de widgets :

function removeWidget(){
    $(".ui-multiselect").remove();
}

Appeler le applyWidget() pour la première fois fonctionne bien. L'appel de la deuxième fois ne fonctionne pas. Comment puis-je recharger le widget sur l'élément ?

Answer 1

Tout d'abord, votre widget doit avoir un destroy La façon de procéder dépend de l'utilisation de jQueryUI 1.8 et moins ou de jQueryUI 1.9 et plus.

Pour ces exemples, je suppose que vous faites référence à la sélection multiple. div avec le code suivant :

_create: function () {
    this.multiselect = $("<div>").addClass("ui-multiselect")...
}

Si vous utilisez jQuery 1.8, votre widget doit définir destroy :

destroy: function()
{
    this.multiselect.remove();
    $.Widget.prototype.destroy.call(this);
}

Sinon, sous jQuery 1.9+, vous devez définir _destroy :

_destroy: function () 
{
    this.multiselect.remove();
}

Notez que vous n'incluez qu'une seule des deux méthodes ci-dessus, en fonction de votre version de jQueryUI, et que la version 1.9 est précédée d'un trait de soulignement `` . Sous jQueryUI 1.9, ne définissez pas destroy sans le trait de soulignement, car la fabrique de widgets définit cette méthode et vous écraserez (et casserez) la méthode._

Une fois cette opération terminée, vous devez modifier votre code de manière à "détruire" le widget avant de le recréer.

function removeWidget(){
    $(".multiselect").multiselect("destroy");
}

Answer 2

Vous devez détruire le widget ou il ne sera pas lié à nouveau.

function removeWidget() { 
    $(".ui-multiselect").multiselect("destroy");
    $(".ui-multiselect").multiselect(); 
}