Wie setze ich einen jQuery UI-Schieberegler mit mehreren jQuery-Bibliotheken auf null zurück

Question

Ich habe Probleme beim Zurücksetzen der jQuery UI-Schieberegler.

ich diesen Fehler: MyProject.OrderInfo.Search.js: 187 Uncaught Typeerror:. $ (...) Slider ist keine Funktion

Ich denke, unser Problem etwas mit mit mehreren jQuery zu tun hat/Javascript-Bibliotheken, die sich gegenseitig übertreten, aber ich bin unsicher. Alles, was mein Team versucht hat, hat nicht funktioniert. Wir müssen einfach unsere Schieberegler zurücksetzen, um NULL-Werte zu haben. Wir müssen NULL verwenden, damit wir wissen, dass der Benutzer den Schieberegler nicht berührt hat. Auf diese Weise können wir es von unseren API-Aufrufparametern ausschließen.

Wie kann ich die Schiebereglerwerte auf NULL zurücksetzen? Hier

ist, was der Code wie folgt aussieht:

[OrderInfo.cshtml] (Script-Bereich, oberer Teil):

<link rel="stylesheet" href="~/Content/order.css" /> 
<link rel="stylesheet" href="~/Content/bootstrap.css" /> 
<link rel="stylesheet" href="~/Content/backgrid-paginator.css" /> 
<link rel="stylesheet" href="~/Content/backgrid-filter.css" /> 
<link rel="stylesheet" href="~/Content/backgrid.css" /> 
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 

<script src="~/Scripts/underscore.js"></script> 
<script src="~/Scripts/jquery-2.2.0.js"></script> 
<script src="~/Scripts/jquery-2.2.0.min.js"></script> 
<script src="~/Scripts/backbone.js"></script> 
<script src="~/Scripts/backbone.paginator.js"></script> 
<script src="~/Scripts/backgrid.js"></script> 
<script src="~/Scripts/backgrid-paginator.js"></script> 
<script src="~/Scripts/backgrid-filter.js"></script> 
<script src="~/Scripts/backgrid-select-filter.js"></script> 
<script src="~/Scripts/MyProject.OrderInfo.js"></script> 
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
<script src="~/Scripts/jquery.ui.touch-punch.js"></script> 

[OrderInfo.cshtml] (Körper):

<div class="col-sm-7" id="divslider"> 
     <div class="row filterHeader"> 
      <div class="col-md-3 paddingZero"> 
       <b>Tuition and Fees</b> 
      </div> 
      <div class="col-md-2 paddingZero"> 
       <div class="input-group"> 
        Min: 
        <span class="input-group-addon" id="MinOrderPrice"> </span> 
       </div> 
      </div> 
      <div class="col-md-5"> 
       <div id="SliderOrderPrice"></div> 
      </div> 
      <div class="col-md-2 paddingZero"> 
       <div class="input-group"> 
        Max: 
        <span class="input-group-addon" id="MaxOrderPrice"> </span> 
       </div> 
      </div> 
     </div> 

     <!-- MORE HTML BODY CODE HERE, UI/search elements, DIVS, ETC ETC --> 

     <div class="row filterHeader"> 
      <div class="col-md-3 paddingZero">      
      </div> 
      <div class="col-md-2 paddingZero">       
      </div> 
      <div class="col-md-4">       
      </div> 
      <div class="col-md-3 paddingZero"> 
       <button class="btn btn-info" id="btnSearch" type="button">Search</button> 
       <button class="btn btn-primary" id="btnReset" type="button" style="min-width:71px">Reset</button>      
      </div> 
     </div> 
</div> 

<!-- END OF [OrderInfo.cshtml] BODY, ** NOTICE THE BOTTOM HAS A JS SCRIPT, EEEK!! ** --> 
<script src="~/Scripts/MyProject.OrderInfo.Search.js"></script> 

[MyProject.OrderInfo.Search.js] (a js-Datei für Orders REST API suchen):

//Declare slider variables as null and assign only in change function, to distinguish 'dirty' slider from a 'clean' slider 
var minorderprice; 
var maxorderprice; 

//Tution and Fees slider 
$("#SliderOrderPrice").slider({ 
    range: true, 
    min: 0, 
    max: 50000, 
    values: [0, 50000], 
    step: 500, 
    slide: function (event, ui) { 
     $("#MinOrderPrice").html("$" + ui.values[0].toLocaleString()); 
     if (ui.values[1] == 50000) { 
      $("#MaxOrderPrice").html("> $50,000") 
     } 
     else ($("#MaxOrderPrice").html("$" + ui.values[1].toLocaleString())) 
    }, 
    change: function (event, ui) { 
     minorderprice = ui.values[0]; 
     maxorderprice = ui.values[1]; 
    } 
}); 
$("#MinOrderPrice").html("$ 0"); 
$("#MaxOrderPrice").html("> $50,000"); 
$("#SliderOrderPrice").draggable(); //this is a hack to make the slider responsive on mobile devices (see touch-punch.js) 

// Get the values of search checkboxes and sliders, after search button click 
$("#btnSearch").click(function() { 

    //do a bunch of nifty things to produce a dynamic URL string, for REST API calls here. This works fine and is left out on purpose. 

}); 

$("#btnReset").click(function() { 
    $('input:checkbox').removeAttr('checked');  //clear all checkboxes 
    $('#orderTerritory').prop('selectedIndex',0); //reset State/Territory dropdown to 'All States' 
    RenderJSGrid();        //re-draw grid 

    //how to reset slider values here? 
    $("#SliderOrderPrice").slider('values', 0, 50000); //this throws the error like the slider doesnt exist? 
    $("#SliderOrderPrice").slider('values', null, null); //would this work? 
}); 

Hinweis gibt es Hinweise auf:

<script src="~/Scripts/jquery-2.2.0.js"></script> 
<script src="~/Scripts/jquery-2.2.0.min.js"></script> 
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 

Wir haben dies zu tun, weil unsere BackgridJS Implementierung verwendet jQuery 2.2. Die Schieberegler möchten 'jquery-ui.js' verwenden, was meiner Meinung nach von 'jquery-1.10.2.js' abhängt.

Wenn der Benutzer auf die Schaltfläche Zurücksetzen klickt, tritt der Fehler auf und Javascript verhält sich wie der Schieberegler nicht geladen wird. Aber es ist, ich kann es in der Benutzeroberfläche arbeiten sehen. Könnte es sein, dass das Ereignis "Zurücksetzen" an einen anderen Ort verschoben werden muss?

Irgendwelche Ideen? Hilfe?

UPDATE # 1: Ich versuchte @ Noctane Vorschlag, aber ich bekomme immer noch den gleichen Fehler, egal wo ich die Reset-Funktion. Ich kann es inline setzen, ich kann es in andere Skripte einfügen, aber es funktioniert leider nie. Hier

ist, was ich versucht:

<link rel="stylesheet" href="~/Content/order.css" /> 
<link rel="stylesheet" href="~/Content/bootstrap.css" /> 
<link rel="stylesheet" href="~/Content/backgrid-paginator.css" /> 
<link rel="stylesheet" href="~/Content/backgrid-filter.css" /> 
<link rel="stylesheet" href="~/Content/backgrid.css" /> 
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
<script src="~/Scripts/underscore.js"></script> 
<script src="~/Scripts/backbone.js"></script> 
<script src="~/Scripts/backbone.paginator.js"></script> 
<script src="~/Scripts/backgrid.js"></script> 
<script src="~/Scripts/backgrid-paginator.js"></script> 
<script src="~/Scripts/backgrid-filter.js"></script> 
<script src="~/Scripts/backgrid-select-filter.js"></script> 
<script src="~/Scripts/MyProject.OrderInfo.js"></script> 
<script src="~/Scripts/jquery.ui.touch-punch.js"></script> 

Answer 1

ich eine Demo vorbereitet haben mit jsFiddle, die jQuery UI verwendet, während die Verwendung sowohl jquery v2.2.0 und jquery Version 1.10.2, bitte beachten Sie, werden Sie Wenn Sie den Schieberegler verschieben, wird der geänderte Wert auf die Konsole gesetzt. Wenn Sie auf Zurücksetzen klicken, wird der Schieberegler auf null gesetzt.

Siehe DEMO

Sie dies mit dem folgenden Code erreichen können:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css" /> 
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" /> 
<style> 
#resetButton { 
    margin-top: 15px; 
} 

</style> 



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 

<script type="text/javascript"> 
$("#sliderTest").slider({ 
    change: function(event, ui) { 
    var s = ui.value; 
    console.log(s); 
    } 
}); 

$("#resetButton").button({ 
    icons: { 
     primary: "ui-icon-refresh" 
     } 
}); 

$("#resetButton").click("click", function(event){ 
     var s = $("#sliderTest").slider("value", null); 
    console.log(s); 
}); 
</script> 

<div id="sliderTest"></div> 
<button id="resetButton">Reset</button> 

Sie müssen möglicherweise neu ordnen Ihre in Ihrer Anwendung enthält, um es zu arbeiten. Wenn du die auf der Fiedel neu anordnest, wirst du den Fehler sehen, den du bekommst. Wenn du sie dann wieder auf die Art und Weise vertausche, wie ich sie arrangiert hast, wirst du sehen, dass es funktioniert.