Asp.Net ScriptManager jQuery Widget ile sorunlara neden oluyor

Question

Ben yıllardır sitelerdeki ScriptManager ve jQuery kaydırıcı widget'ını birlikte kullanıyorum ama son zamanlarda widget'ı çalışmayı durduran bir soruna karşı çıktım. Sorunu çözmeyi başardım, ama uzmanlıktan daha şanslıydı. Birisinin sorunun ardında mantık yürütmesini ve düzeltmenin aynı konuya sahip başkalarına yararlı olabileceğini umuyorum.

ben birlikte benim komut birleştiren bir komut toplayıcısı kullanabilir - burada içerdiği budur - tüm kod parçacıkları kısalık için aşağı eşleştirilmiş edilmiştir:

: Burada

vendor/Modernizr.min.js 
vendor/jQuery.3.0.0.min.js 
vendor/jQuery-UI.1.12.1.min.js 
vendor/jQuery-UI.TouchPunch.min.js 
propriertary/LoanSelector.js 
DefaultInit.js 

DefaultInit.js içeriği olan İşte

$(document).ready(function() { 
    loanSelector.init(); 
}); 

Şimdi bu LoanSelector.js

var loanSelector = function() { 

    var pub = {}, $ctl = $("#loan-selector"), 
     $sliderAmount = $ctl.find(".slider-amount:first"), 
     $widgetAmount = $sliderAmount.find(".widget:first"); 

    function initControl() { 
     initWidgetAmount(100, 2000, 100, $("#hfStartAmount").val()); 
    } 

    function initWidgetAmount(min, max, step, initialVal) { 
     $widgetAmount.slider({ 
     }); 
    } 

    pub.init = function() { 
     initControl(); 
    }; 

    return pub; 
}(); 

çıplak kemikleri çalışır - ancak sayfadaki ScriptManager olmadan.

Komut dosyası yöneticisi eklendiğinde, kaydırıcı küçük aracı yüklenmez - hata yok - hiçbir şey.

Önbelleğe alınan öğeler sayfada kalıcı birer bağlantıdır - bu nedenle, belirli bir zamanda bulunmayan öğelerin durumu değildir.

var loanSelector = function() { 

    var pub = {}, $ctl, $sliderAmount, $widgetAmount; 

    function cacheElements() { 
     $ctl = $("#loan-selector"), 
     $sliderAmount = $ctl.find(".slider-amount:first"), 
     $widgetAmount = $sliderAmount.find(".widget:first"); 
    } 

    function initControl() { 
     // This is new 
     cacheElements(); 

     initWidgetAmount(100, 2000, 100, $("#hfStartAmount").val()); 
    } 

    function initWidgetAmount(min, max, step, initialVal) { 
     $widgetAmount.slider({ 
     }); 
    } 

    pub.init = function() { 
     initControl(); 
    }; 

    return pub; 
}(); 

: Burada çalışan LoanSelector.js başka versiyonu -

<asp:ScriptManager ID="SM" runat="server" 
     EnableCdn="true" 
     LoadScriptsBeforeUI="false" 
     EnablePageMethods="true"> 
    </asp:ScriptManager> 

Ben değişiklik yaparsanız, ben sayfada betiği betik ile yüklemek için widget'ı alabilirsiniz:

İşte ScriptManager'ın kodu

Peki, kimse neden çalışmıyor olabileceğine ve düzeltmenin neden işe yarayacağına ışık tutabilir mi? Yürüttüğü olarak

Answer 1

İlk yöntem değişkenleri girer: Bu çağrılmadan önce

var pub = {}, $ctl = $("#loan-selector"), 
    $sliderAmount = $ctl.find(".slider-amount:first"), 
    $widgetAmount = $sliderAmount.find(".widget:first"); 

Yani #loan-selector, .slider-amount:first ve .widget:first sayfanın DOM işlenecek gerekir.

İkinci varyant, loanSelector.init() çağrıldığında ve kodunuzda DOM olarak adlandırdığınız yerde yüklendiğinde açılır.

<asp:ScriptManager>

kolayca ekleyebilir size komut denetimlerinin bir sunucu tarafı koleksiyonu verir, ancak <script> etiketleri ve önemli olabilir düzenin bir listeye vermektedir - sayfadan başka kontrol DOM Eğer değişmedi dayanarak konum anlamına gelebilir kodunuzun çalıştığı zamana göre yüklenmez. Komut dosyaları sırayla çalışır, ancak DOM işleminin bitmesini beklemeyin. doğrudan idam kod yapar iken loanSelector.init() DOM erişebilir yüzden zaten DefaultInit.js bunu kullanıyoruz, -

jQuery bunun yerine kullanabileceğiniz kendi bileşen yapısı ve güvenebileceğiniz bir DOM hazır yöntemidir vardır değil.

Zaten bir düzeltmeniz var ve ikinci komut dosyanız daha iyi uygulama çünkü yürütme süresine bağlı değil.

diğer alternatif $(document).ready içinde loanSelector işlevi çağırmak olacaktır:

$(function(){ 
    // In this DOM ready function your elements should be ready to find 
    var loanSelector = ... 
    ... 

    // And you may not need this, as you can init in the actual function 
    loanSelector.init(); 
});