Bootstrap selectpicker kütüphanesini kullanamıyorum

khalannz7 · 7 Eylül 2023

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/bootstrap-table@1.22.1/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.22.1/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.

dgknbzglu · 7 Eylül 2023

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.

khalannz7 · 7 Eylül 2023

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.

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

dgknbzglu · 7 Eylül 2023

Link geçersiz.

khalannz7 · 7 Eylül 2023

dgknbzglu dedi:
Link geçersiz.

Soruyu silmiştim hocam... O sorunu da hallettim ama Şimdi başka bir problemim var onunla uğraşıyorum onun içinde link bırakıyorum. link.

ikodyazilim · 16 Ekim 2023

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/bootstrap-table@1.22.1/dist/bootstrap-table.min.js"></script> <script src="https://unpkg.com/bootstrap-table@1.22.1/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.

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.

Merhaba benzer aynı problem bende yaşıyorum konu hakkında yardımcı olabilir misiniz?

khalannz7 · 16 Ekim 2023

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?

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.

ikodyazilim · 16 Ekim 2023

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.

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.

Denedim ama olmadı

khalannz7 · 16 Ekim 2023

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ı

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.

ikodyazilim · 16 Ekim 2023

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.

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.

Bootstrap selectpicker kütüphanesini kullanamıyorum

khalannz7

Hectopat

dgknbzglu

Megapat

khalannz7

Hectopat

dgknbzglu

Megapat

khalannz7

Hectopat

ikodyazilim

Femtopat

khalannz7

Hectopat

ikodyazilim

Femtopat

khalannz7

Hectopat

ikodyazilim

Femtopat

Dosya Ekleri