Select2, bir önyükleme kipine gömüldüğünde çalışmaz

Önyükleme kipinde bir select2 (girdi) kullandığımda, içine hiçbir şey yazamıyorum. Engelli gibi mi? Kipin dışında select2 iyi çalışıyor.

Çalışma örneği: http://jsfiddle.net/byJy8/1/ kodu:

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Panel</h3>
  </div>
  <div class="modal-body" style="max-height: 800px">


<form class="form-horizontal">

<!-- Text input-->
<div class="control-group">
  <label class="control-label" for="vdn_number">Numer</label>
  <div class="controls">
     <!-- seleect2 -->
    <input name="vdn_number" type="hidden" id="vdn_number"  class="input-large" required=""  />
  </div>
</div>

  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

ve js:

$("#vdn_number").select2({
    placeholder: "00000",
    minimumInputLength: 2,
    ajax: {
        url: "getAjaxData/",
        dataType: 'json',
        type: "POST",
        data: function (term, page) {
            return {
                q: term, // search term
                col: 'vdn'
            };
        },
        results: function (data) { // parse the results into the format expected by Select2.
            // since we are using custom formatting functions we do not need to alter remote JSON data
            return {results: data};
        }
    }
});

Yanıtlar:

burada hızlı bir düzeltme bulabilirsiniz

ve işte 'doğru yol': Select2 bir önyükleme yöntemine gömüldüğünde çalışmıyor

Tamam, işe aldım.

değişiklik

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Panel</h3>
  </div>
  <div class="modal-body" style="max-height: 800px">

için

<div id="myModal" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Panel</h3>
  </div>
  <div class="modal-body" style="max-height: 800px">

( tabindex = "- 1" kipinden kaldır )

Select2 v4 için:

dropdownParentAçılır listeyi HTML gövdesi yerine kalıcı iletişim kutusuna eklemek için kullanın .

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <select id="select2insidemodal" multiple="multiple">
          <option value="AL">Alabama</option>
            ...
          <option value="WY">Wyoming</option>
        </select>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>


<script>

$(document).ready(function() {
  $("#select2insidemodal").select2({
    dropdownParent: $("#myModal")
  });
});

</script>

Bu, Select2 açılır menüsünü ekleyerek HTML gövdesine (varsayılan) değil, modun DOM'sine girer. Bkz. Https://select2.org/dropdown#dropdown-placement

Select2 için github'da buna bir çözüm buldum

https://github.com/ivaynberg/select2/issues/1436

Bootstrap 3 için çözüm:

$.fn.modal.Constructor.prototype.enforceFocus = function() {};

Bootstrap 4 enforceFocusyöntemi yeniden adlandırdı _enforceFocus, bu yüzden bunun yerine yama yapmanız gerekiyor:

$.fn.modal.Constructor.prototype._enforceFocus = function() {};

Yukarıdaki bağlantıdan kopyalanan açıklama:

Bootstrap, odaklanan öğenin yer paylaşımının kendisinin mi yoksa bir alt öğesinin mi olduğunu kontrol eden focusin olayına bir dinleyici kaydeder - değilse, yalnızca yer paylaşımına odaklanır. Select2 açılır listesinin gövdeye eklenmesi, metin alanına herhangi bir şey girmenizi etkili bir şekilde önler.

Olayı modda kaydeden enforceFocus işlevinin üzerine yazarak bunu düzeltebilirsiniz.

Sadece kaldır tabindex="-1" stili ve ekleyinoverflow:hidden

İşte bir örnek:

<div id="myModal" class="modal fade" role="dialog" style="overflow:hidden;">
    <!---content modal here -->
</div>

.select2-close-mask{
    z-index: 2099;
}
.select2-dropdown{
    z-index: 3051;
}

Bu, select2 4.0.0 ile benim çözümüm. Select2.css içe aktarma işleminin hemen altındaki css'yi geçersiz kılmanız yeterlidir. Lütfen z-endeksinin diyalog veya modunuzdan daha büyük olduğundan emin olun. Sadece varsayılanlara 2000 ekliyorum. Çünkü diyaloglarımın z-endeksi yaklaşık 1000.

Açılır listeyi ayarlayın. Bunu mod içindeki .modal içerik üzerine ayarlamam gerekiyordu, ya da metin ortalanacaktı.

$("#product_id").select2({
    dropdownParent: $('#myModal .modal-content')
});

Benim için çalışan cevap burada bulundu: https://github.com/select2/select2-bootstrap-theme/issues/41

$('select').select2({
    dropdownParent: $('#my_amazing_modal')
});

Ayrıca kaldırılmasını gerektirmez tabindex.

Resmi select2 belgelerine göre, bu sorun Bootstrap modals modal dışındaki diğer unsurlardan odak çalma eğilimi nedeniyle oluşur.

Varsayılan olarak Select2, açılır menüyü öğeye ekler ve "modun dışında" olarak kabul edilir.

Bunun yerine, açılır listeyi dropdownParent ayarıyla modun kendisine ekleyin:

$('#myModal').select2({
   dropdownParent: $('#myModal')
});

Referansa bakın: https://select2.org/tro Giderme/common-problems

Ben aynı sorunu vardı, güncelleme z-indexiçin .select2-containerhile yapmalı. z-indexModsalınızın select2'lerden daha düşük olduğundan emin olun .

.select2-container {
    z-index: 99999;
}

Güncelleme: Yukarıdaki kodun düzgün çalışmadığı durumlarda, @breq tarafından önerilen şekilde tabindexes'i modalınızdan kaldırın

Jus bu kodu Document.read () üzerinde kullanır

$.fn.modal.Constructor.prototype.enforceFocus = function () {};

Bu Sorun Benim İçin Çalışıyor Tek Jquery Fonksiyonu

$('#myModal .select2').each(function() {  
   var $p = $(this).parent(); 
   $(this).select2({  
     dropdownParent: $p  
   });  
});

select2.css dosyasını değiştir

z-index: 9998;
...
z-index: 9999;
...
z-index: 10000;

için

z-index: 10000;
...
z-index: 10001;
...
z-index: 10002;

Tabindex öğelerinin kabul edilen cevabı tamamlamak için nasıl çalıştığını daha iyi anlamak için:

Tabindex global özniteliği, öğenin giriş odağını alıp alamayacağını (odaklanabilir), sıralı klavye navigasyonuna katılıp katılmayacağını ve varsa hangi konumda olduğunu gösteren bir tamsayıdır. Birkaç değer alabilir:
  -negatif bir değer, öğenin odaklanabilir olması gerektiği, ancak ardışık klavye gezinmesi yoluyla ulaşılamayacağı anlamına gelir;
  -0, öğenin ardışık klavye gezinmesi yoluyla odaklanabilir ve erişilebilir olması gerektiği anlamına gelir, ancak göreceli sırası platform kuralı tarafından tanımlanır;
  - pozitif bir değer, sıralı klavye gezintisi yoluyla odaklanabilir ve erişilebilir olmalıdır; göreceli sırası, özniteliğin değeri ile tanımlanır: ardışık, tabindex'in artan sayısını izler. Birden fazla öğe aynı tabindex'i paylaşıyorsa, göreli sıraları belgedeki göreli konumlarını izler.

from: Mozilla Geliştirme Ağ

Eğer bir sorun varsa iPad klavyesi gizlemek önyükleme modal tıklarken Select2 girişi, aşağıdaki kuralı ekleyerek bu çözebilirsiniz sonra başlatılması select2girişi:

if (navigator.userAgent.match(/iPhone|iPad|iPod/i)) {
   var styleEl = document.createElement('style'), styleSheet;
   document.head.appendChild(styleEl);
   styleSheet = styleEl.sheet;
   styleSheet.insertRule(".modal { position:absolute; bottom:auto; }", 0);
   document.body.scrollTop = 0; // Only for Safari
}

Alındığı https://github.com/angular-ui/bootstrap/issues/1812#issuecomment-135119475

DÜZENLE: Seçenekleriniz düzgün gösterilmiyorsa, dropdownParentbaşlatma sırasında bu özelliği kullanmanız gerekir select2:

$(".select2").select2({
    dropdownParent: $("#YOURMODALID")
});

İyi şanslar (:

@Pymarco cevabına dayanarak bu çözümü yazdım, mükemmel değil ama select2 odak problemini çözer ve modal içinde çalışan sekme dizisini korur

    $.fn.modal.Constructor.prototype.enforceFocus = function () {
        $(document)
        .off('focusin.bs.modal') // guard against infinite focus loop
        .on('focusin.bs.modal', $.proxy(function (e) {
            if (this.$element[0] !== e.target && !this.$element.has(e.target).length && !$(e.target).closest('.select2-dropdown').length) {
                this.$element.trigger('focus')
            }
        }, this))
    }

Benim durumumda iki modals ile aynı sorunu vardı ve hepsi kullanılarak çözüldü:

$('.select2').each(function() { 
    $(this).select2({ dropdownParent: $(this).parent()});
})

41 numaralı proje sayısında olduğu gibi bir kullanıcı söyledi.

$("#IlceId").select2({
    allowClear: true,
    multiple: false,
    dropdownParent: $("#IlceId").parent(),
    escapeMarkup: function (m) {
        return m;
    },
});

bu kod çalışıyor. Teşekkür ederim.

Tamam, partiye geç kaldığımı biliyorum. Ama benim için neyin işe yaradığını sizinle paylaşmama izin ver. Tabindex ve z-endeksi çözümleri benim için çalışmadı.

Select öğesinin üst öğesini ayarlamak, select2 sitesinde listelenen genel sorunlara göre çalıştı .

Jquery mobile popup kullanıyorsanız _handleDocumentFocusIn işlevini yeniden yazmalısınız:

$.mobile.popup.prototype._handleDocumentFocusIn = function(e) {
  if ($(e.target).closest('.select2-dropdown').length) return true;
}

Birlikte aynı sorun select2in bootstrap modalve çözelti kaldırmak oldu overflow-y: auto;ve overflow: hidden; itibaren.modal-open ve.modal classes

İşte jQuerykaldırmak için kullanma örneği overflow-y:

$('.modal').css('overflow-y','visible');
$('.modal').css('overflow','visible');

daha önce bu sorunu vardı, yii2 kullanıyorum ve bu şekilde çözdüm

$.fn.modal.Constructor.prototype.enforceFocus = $.noop;

Bir uygulamada yarı ilgili bir sorun yaşadım, bu yüzden 2c'ye koyacağım.

Ben select2 widget içeren formları ile birden fazla modals var. A modunun, ardından A modunun içindeki başka bir modun açılması, B modunun içindeki select2 widget'larının kaybolmasına ve başlatılamamasına neden olur.

Bu kiplerin her biri formları ajax aracılığıyla yüklüyordu.

Çözüm, bir modal kapatılırken formları domdan çıkarmaktı.

$(document).on('hidden.bs.modal', '.modal', function(e) {
    // make sure we don't leave any select2 widgets around 
    $(this).find('.my-form').remove();
});

$('.modal').on('shown.bs.modal', function (e) {
    $(this).find('.select2me').select2({
        dropdownParent: $(this).find('.modal-content')
    });
})

Bunu genel olarak select2projemde -fonksiyonunu aşırı yükleyerek çözdüm. Şimdi, dropdownParent öğesinin bulunmadığını ve işlevin türünde bir üst öğeye sahip öğede çağrılıp çağrılmadığını kontrol eder div.modal. Eğer öyleyse, o modal açılır listenin ana öğesi olarak ekleyecektir.

Bu şekilde, her select2 giriş kutusu oluşturduğunuzda belirtmeniz gerekmez.

(function(){
    var oldSelect2 = jQuery.fn.select2;
    jQuery.fn.select2 = function() {
        const modalParent = jQuery(this).parents('div.modal').first();
        if (arguments.length === 0 && modalParent.length > 0) {
            arguments = [{dropdownParent: modalParent}];
        } else if (arguments.length === 1
                    && typeof arguments[0] === 'object'
                    && typeof arguments[0].dropdownParent === 'undefined'
                    && modalParent.length > 0) {
            arguments[0].dropdownParent = modalParent;
        }
        return oldSelect2.apply(this,arguments);
    };
    // Copy all properties of the old function to the new
    for (var key in oldSelect2) {
        jQuery.fn.select2[key] = oldSelect2[key];
    }
})();

Ben sadece select2.min.css dahil ederek işe almak

İyiyi dene

Benim modal html arasında bootstrap 3 olduğunu

<div id="changeTransportUserRequestPopup" class="modal fade" role="dialog">
    <div class="modal-dialog" style="width: 40%!important; ">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h3>Warning</h3>
            </div>
            <div class="modal-body" id="changeTransportUserRequestPopupBody">
                <select id="cbTransport" class="js-example-basic-single" name="cbTransport" style="width:100%!important;"></select>
            </div>
            <div class="modal-footer">
                <button id="noPost" class="btn btn-default" name="postConfirm" value="false" data-dismiss="modal">Cancel</button>
                <button type="submit" id="yesChangeTransportPost" class="btn btn-success" name="yesChangeTransportPost" value="true" data-dismiss="modal">Yes</button>
            </div>
        </div>
    </div>
</div>

$ (belgeniz) içinde tekrar select2 trigger'ı arayabilirsiniz

$(".select2").select2({ 
                width: '120' 
            });

bootstrap 4.0'ı sunucu tarafı ile kullanmak için (ajax veya json veri satır içi), bunların tümünü eklemeniz gerekir:

$.fn.modal.Constructor.prototype._enforceFocus = function() {};

ve ardından mod açıkken select2 öğesini oluşturun:

  // when modal is open
  $('.modal').on('shown.bs.modal', function () {
            $('select').select2({
                  // ....
            });
  });

Benim durumumda bunu yaptım ve işe yarıyor. Yüklemek için paket kullanıyorum ve bu durumda benim için çalıştı

 $(document).on('select2:select', '#Id_Producto', function (evt) {
   // Here your code...
  });