Bootstrap selectpicker kütüphanesini kullanamıyorum

khalannz7

khalannz7

Decipat
Katılım
18 Ağustos 2022
Mesajlar
623
Çözümler
10
Merhaba, Bootstrap selectpicker kütüphanesini kullanarak @Html.DropDownListFor'uma arama özelliği eklemek istiyorum. Konsolda herhangi bir hatam yok ama tıklayınca liste açılmıyor.
Kod: 
 <div class="mb-3">
     @Html.LabelFor(m => m.Repairs.urunAd, "Ürün", new { @class = "form-label" })
     @Html.DropDownListFor(m => m.Repairs.urunID, Model.ProductsList, "Bir Ürün Seçiniz*", new { @class = "form-control repair-inputs selectpicker", id = "repairProductInput", required = "required", data_live_search = "true" })
 </div>
Kod: 
<script src="~/Scripts/jquery-3.7.0.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-table-locale-all.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/js/bootstrap-select.min.js"></script>
<script src="~/Content/js/repair.js"></script>
<script>
    $(document).ready(function () {
        $('#repairProductInput').selectpicker();
    });
</script>

Anlamadığım nokta şu ki eğer bootstrap kütüphanesi olarak <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> bunu kullanırsam sorun çözülüyor. Ama bu seferde diğer bootstrap özelliklerim bozuluyor.
 
Localinizdeki bootstrap.min.js ile selectpicker sürümü eşleşmiyor büyük ihtimalle.
CDN olarak eklediğiniz dosyayı localinize alıp diğer değişiklikleri o dosyaya göre yapmalısınız.
 
dgknbzglu dedi:
Localinizdeki bootstrap.min.js ile selectpicker sürümü eşleşmiyor büyük ihtimalle.
CDN olarak eklediğiniz dosyayı localinize alıp diğer değişiklikleri o dosyaya göre yapmalısınız.
Genişletmek için tıkla...
Hocam o sorunu halettim, ama şimdi başka bir hata alıyorum. Popper.js ile alakalı. Bunun için yeni konu açmayayım direkt stackoverflow linkimi bırakıyorum aynı hata sayılır bir nevi. link
 
khalannz7 dedi:
Merhaba, Bootstrap selectpicker kütüphanesini kullanarak @Html.DropDownListFor'uma arama özelliği eklemek istiyorum. Konsolda herhangi bir hatam yok ama tıklayınca liste açılmıyor.
Kod: 
 <div class="mb-3">
     @Html.LabelFor(m => m.Repairs.urunAd, "Ürün", new { @class = "form-label" })
     @Html.DropDownListFor(m => m.Repairs.urunID, Model.ProductsList, "Bir Ürün Seçiniz*", new { @class = "form-control repair-inputs selectpicker", id = "repairProductInput", required = "required", data_live_search = "true" })
 </div>
Kod: 
<script src="~/Scripts/jquery-3.7.0.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-table-locale-all.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/js/bootstrap-select.min.js"></script>
<script src="~/Content/js/repair.js"></script>
<script>
    $(document).ready(function () {
        $('#repairProductInput').selectpicker();
    });
</script>

Anlamadığım nokta şu ki eğer bootstrap kütüphanesi olarak <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> bunu kullanırsam sorun çözülüyor. Ama bu seferde diğer bootstrap özelliklerim bozuluyor.
Genişletmek için tıkla...


selamlar, bana bu konu hakkında destek olurmusunuz acaba ?

dgknbzglu dedi:
Localinizdeki bootstrap.min.js ile selectpicker sürümü eşleşmiyor büyük ihtimalle.
CDN olarak eklediğiniz dosyayı localinize alıp diğer değişiklikleri o dosyaya göre yapmalısınız.
Genişletmek için tıkla...

Merhaba benzer aynı problem bende yaşıyorum konu hakkında yardımcı olabilir misiniz?
 
Son düzenleme:
ikodyazilim dedi:
selamlar, bana bu konu hakkında destek olurmusunuz acaba ?



Merhaba benzer aynı problem bende yaşıyorum konu hakkında yardımcı olabilir misiniz?
Genişletmek için tıkla...
Detaylı şekilde paylaşın sorununuzu hocam yardımcı olabilirsem seve seve olurum.

Ben sorunu çözmüştüm burada paylaşmamışım. Sorun yanlış kütüphane yüklenmesinden dolayıydı. Doğru sürümü ve yazdığım kodlar şöyle :
Kod: 
//SELECT PICKER
$(document).ready(function () {
    $("#repairCustomerInput").selectpicker({
        noneSelectedText: 'Lütfen Bir Müşteri Seçiniz',
        noneResultsText: 'Sonuç Bulunamadı {0}',
        liveSearch: true,
        liveSearchNormalize: true,
        showTick: true
    });
 });
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/js/bootstrap-select.min.js" integrity="sha512-FHZVRMUW9FsXobt+ONiix6Z0tIkxvQfxtCSirkKc5Sb4TKHmqq1dZa8DphF0XqKb3ldLu/wgMa8mT6uXiLlRlw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/css/bootstrap-select.min.css" integrity="sha512-mR/b5Y7FRsKqrYZou7uysnOdCIJib/7r5QeJMFvLNHNhtye3xJp1TdJVPLtetkukFn227nKpXD9OjUc09lx97Q==" crossorigin="anonymous" referrerpolicy="no-referrer" />

CSS kısmını sayfanın başında, script kısmını da sonuna ekleyin. Sorunsuz çalışıyor.
 
khalannz7 dedi:
Detaylı şekilde paylaşın sorununuzu hocam yardımcı olabilirsem seve seve olurum.

Ben sorunu çözmüştüm burada paylaşmamışım. Sorun yanlış kütüphane yüklenmesinden dolayıydı. Doğru sürümü ve yazdığım kodlar şöyle:
Kod: 
//SELECT PICKER.
$(document).ready(function () {
 $("#repairCustomerInput").selectpicker({
 noneSelectedText: 'Lütfen Bir Müşteri Seçiniz',
 noneResultsText: 'Sonuç Bulunamadı {0}',
 liveSearch: true,
 liveSearchNormalize: true,
 showTick: true.
 });
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/js/bootstrap-select.min.js" integrity="sha512-FHZVRMUW9FsXobt+ONiix6Z0tIkxvQfxtCSirkKc5Sb4TKHmqq1dZa8DphF0XqKb3ldLu/wgMa8mT6uXiLlRlw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/css/bootstrap-select.min.css" integrity="sha512-mR/b5Y7FRsKqrYZou7uysnOdCIJib/7r5QeJMFvLNHNhtye3xJp1TdJVPLtetkukFn227nKpXD9OjUc09lx97Q==" crossorigin="anonymous" referrerpolicy="no-referrer" />

CSS kısmını sayfanın başında, script kısmını da sonuna ekleyin. Sorunsuz çalışıyor.
Genişletmek için tıkla...

Controller. CS kısmından viewbag ile çektiğim değerleri;
Public actionresult urungetir(int ID)
{
List<selectlistıtem> deger1 = (from X in c.Kategoris.ToList()
Select New selectlistıtem.
{
Text = X. Kategoriad,
Value = x.KategoriID.ToString()
}).ToList();
List<selectlistıtem> deger2 = (from X in c.Birimlers.ToList()
Select New selectlistıtem.
{
Text = X. Birimad,
Value = x.Birimid.ToString()
}).ToList();
Viewbag. Dgr1 = deger1;
Viewbag. Dgr2 = deger2;
Var urundeger = C. Urunlers. Find(ID);
Return view("urungetir",urundeger);
}
--------------------
@HTML. Dropdownlistfor'UMA arama özelliği ile eklemek istiyorum. Ama bir turlu beceremedım.
Dropdowslist form alanına normal liste ekranında geliyor ama arama olarak selectpicker ile yapmak ıstedıgımde ıse beceremedım :(

khalannz7 dedi:
Detaylı şekilde paylaşın sorununuzu hocam yardımcı olabilirsem seve seve olurum.

Ben sorunu çözmüştüm burada paylaşmamışım. Sorun yanlış kütüphane yüklenmesinden dolayıydı. Doğru sürümü ve yazdığım kodlar şöyle:
Kod: 
//SELECT PICKER.
$(document).ready(function () {
 $("#repairCustomerInput").selectpicker({
 noneSelectedText: 'Lütfen Bir Müşteri Seçiniz',
 noneResultsText: 'Sonuç Bulunamadı {0}',
 liveSearch: true,
 liveSearchNormalize: true,
 showTick: true.
 });
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/js/bootstrap-select.min.js" integrity="sha512-FHZVRMUW9FsXobt+ONiix6Z0tIkxvQfxtCSirkKc5Sb4TKHmqq1dZa8DphF0XqKb3ldLu/wgMa8mT6uXiLlRlw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/css/bootstrap-select.min.css" integrity="sha512-mR/b5Y7FRsKqrYZou7uysnOdCIJib/7r5QeJMFvLNHNhtye3xJp1TdJVPLtetkukFn227nKpXD9OjUc09lx97Q==" crossorigin="anonymous" referrerpolicy="no-referrer" />

CSS kısmını sayfanın başında, script kısmını da sonuna ekleyin. Sorunsuz çalışıyor.
Genişletmek için tıkla...

Denedim ama olmadı :(
 
Son düzenleyen: Moderatör:
ikodyazilim dedi:
Controller. CS kısmından viewbag ile çektiğim değerleri;
Public actionresult urungetir(int ID)
{
List<selectlistıtem> deger1 = (from X in c.Kategoris.ToList()
Select New selectlistıtem.
{
Text = X. Kategoriad,
Value = x.KategoriID.ToString()
}).ToList();
List<selectlistıtem> deger2 = (from X in c.Birimlers.ToList()
Select New selectlistıtem.
{
Text = X. Birimad,
Value = x.Birimid.ToString()
}).ToList();
Viewbag. Dgr1 = deger1;
Viewbag. Dgr2 = deger2;
Var urundeger = C. Urunlers. Find(ID);
Return view("urungetir",urundeger);
}
--------------------
@HTML. Dropdownlistfor'UMA arama özelliği ile eklemek istiyorum. Ama bir turlu beceremedım.
Dropdowslist form alanına normal liste ekranında geliyor ama arama olarak selectpicker ile yapmak ıstedıgımde ıse beceremedım :(



Denedim ama olmadı :(
Genişletmek için tıkla...
Hocam kodları daha listeyi değil de script kodlarınızı atar mısınız? Konsolda herhangi bir hata alıyor musunuz? Özellikle konsolda aldığınız hatayı atmanız lazım. Ve kodları benim gibi kod şeklinde atsanız daha iyi olur.
 
khalannz7 dedi:
Hocam kodları daha listeyi değil de script kodlarınızı atar mısınız? Konsolda herhangi bir hata alıyor musunuz? Özellikle konsolda aldığınız hatayı atmanız lazım. Ve kodları benim gibi kod şeklinde atsanız daha iyi olur.
Genişletmek için tıkla...
hocam droplist seklınde kullanmam durumumda ılk goruntude verılerım gelıyor hata ve sıkıntı yok ama sızın belırttıgınız kodlamayı yapmaya calıstıgımda ıse drop gelmıyor.

ikodyazilim dedi:
hocam droplist seklınde kullanmam durumumda ılk goruntude verılerım gelıyor hata ve sıkıntı yok ama sızın belırttıgınız kodlamayı yapmaya calıstıgımda ıse drop gelmıyor.
Genişletmek için tıkla...
 

Dosya Ekleri

  • drobluhal.jpg
    drobluhal.jpg
    51 KB · Görüntüleme: 6
  • kodkullanım.jpg
    kodkullanım.jpg
    140,2 KB · Görüntüleme: 9

Benzer konular

533388
Hangi JavaScript kütüphanesini kullanıyorsunuz?
Mesaj
9
Görüntüleme
303
brkdnmz
brkdnmz
therdogan
PHP Bootstrap
Mesaj
7
Görüntüleme
1B
korayaan
K
hussah
SCSS ve Bootstrap
Mesaj
5
Görüntüleme
361
BreaKSooN05
B
Berat.xx56
Bootstrap vs JavaScript
Mesaj
5
Görüntüleme
353
Berat.xx56
Berat.xx56
ErrorCorrection
Bootstrap neden kısıtlıyor?
Mesaj
6
Görüntüleme
702
Yuuns
Yuuns

Yeni konular

Yeni mesajlar

Geri
Yukarı