Il plugin select2 funziona bene quando non si trova all'interno di una finestra di dialogo modale jquery

Question

Uso il plug-in select2 all'interno di una finestra di dialogo jquery ma non funziona. Quando si abbassa, lo stato attivo passa al controllo di input ma ne esce immediatamente, non permettendomi di digitare nulla.

Questo è il codice HTML:

<div id="asignar_servicio" title="Asignar servicios a usuarios"> 
    <input type="hidden" class="bigdrop" id="a_per_id" /> 
</div> 

E questo è il codice javascript:

 $("#asignar_servicio").dialog({ 
      autoOpen: false, 
      height: 500, 
      width: 450, 
      modal: true, 
      buttons: { 
       "Cancelar": function() { 
        $('#asignar_servicio').dialog('close'); 
       } 
      } 
     }); 
     $("#a_per_id").select2({ 
      placeholder: "Busque un funcionario", 
      width: 400, 
      minimumInputLength: 4, 
      ajax: { 
       url: "@Url.Action("Search", "Personal")", 
       dataType: 'json', 
       data: function (term, page) { 
        return { 
         q: term, 
         page_limit: 10, 
        }; 
       }, 
       results: function (data, page) { 
        return { results: data.results }; 
       } 
      } 
     }).on("change", function (e) { 
      var texto = $('lista_personal_text').val().replace(/ /g, ''); 
      if (texto != '') 
       texto += ','; 
      texto += e.added.text; 

      var ids = $('lista_personal_id').val().replace(/ /g, ''); 
      if (ids != '') 
       ids += ','; 
      ids += e.added.id; 
     }); 

Ho questo stesso codice in altra pagina e funziona.

Qualsiasi aiuto sarà apprezzato,

grazie Jaime

Answer 1

ho trovato questa soluzione. https://github.com/ivaynberg/select2/issues/1246

Acclamazioni Jame collegamento

Answer 2

di jstuardo è buono, ma c'è molto da vagliare in quella pagina. Ecco il codice è necessario:

$.ui.dialog.prototype._allowInteraction = function(e) { 
    return !!$(e.target).closest('.ui-dialog, .ui-datepicker, .select2-drop').length; 
}; 

Basta aggiungere accanto a dove si sta impostando l'select2 discesa.

Answer 3

Oppure provare questo da: Select2 doesn't work when embedded in a bootstrap modal

Rimuovere tabindex="-1" dal div modale

Answer 4

Ho usato la seguente correzione con successo:

$.fn.modal.Constructor.prototype.enforceFocus = function() { 
     var that = this; 
     $(document).on('focusin.modal', function (e) { 
      if ($(e.target).hasClass('select2-input')) { 
       return true; 
      } 

      if (that.$element[0] !== e.target && !that.$element.has(e.target).length) { 
       that.$element.focus(); 
      } 
     }); 
    } 

Answer 5

La soluzione migliore che ho trovato è stato solo fare la finestra di dialogo non è una finestra di dialogo modale rimuovendo modale: true. Una volta fatto, la pagina funzionerà come desiderato.

Dopo un po 'di lotta con questo ho trovato un'altra opzione che ti permette di mantenere il dialogo come una modale. Se si modifica il CSS per select2 a qualcosa di simile al seguente:

.select2-drop { 
    z-index: 1013; 
} 

.select2-results { 
    z-index: 999; 
} 

.select2-result { 
    z-index: 1010; 
} 

tenere a mente che questo funziona se si apre un sacco di finestre di dialogo sulla stessa pagina si finisce per superare la z-index specificato, ma in il mio caso d'uso questi numeri ha fatto il lavoro.

Answer 6

Non abbastanza reputazione di commentare un post precedente, ma ho voluto aggiungere questo pezzo di codice:

$('#dialogDiv').dialog({ 
       title: "Create Dialog", 
       height: 410, 
       width: 530, 
       resizable: false, 
       draggable: false, 
       closeOnEscape: false, 
       //in order for select2 search to work "modal: true" cannot be present. 
       //modal: true, 
       position: "center", 
       open: function() { }, 
       close: function() { $(this).dialog("distroy").remove(); } 
      }); 
$("#displaySelectTwo")select2(); 

l'aggiornamento alla versione più recente di JQuery e Select2 non è un'opzione nella nostra applicazione in questo momento . (utilizzando JQueryUI v1.8 e Select2 v1)

Answer 7

Aggiungere questo dopo la dichiarazione select2().

$.ui.dialog.prototype._allowInteraction = function (e) { 
    return !!$(e.target).closest('.ui-dialog, .ui-datepicker, .select2-dropdown').length; 
}; 

Answer 8

ho potuto risolvere questo problema rimuovendo l'opzione: 'modal: true' dalle opzioni di dialogo.
Ha funzionato bene.

Answer 9

C'è una nuova versione della correzione per select2 4.0 dal github issue thread about this problem:

if ($.ui && $.ui.dialog && $.ui.dialog.prototype._allowInteraction) { 
    var ui_dialog_interaction = $.ui.dialog.prototype._allowInteraction; 
    $.ui.dialog.prototype._allowInteraction = function(e) { 
     if ($(e.target).closest('.select2-dropdown').length) return true; 
     return ui_dialog_interaction.apply(this, arguments); 
    }; 
} 

basta eseguire questo prima di qualsiasi finestre di dialogo modale che avranno select2 in essi vengono creati.

JSFiddle of this fix in action

Answer 10

Un modo semplice:

$.ui.dialog.prototype._allowInteraction = function (e) { 
    return true; 
}; 

aggiungere questo dopo dovunque si impostare select2