複数のjQueryライブラリを使用してjQuery UIスライダをnullにリセットする方法

Question

jQuery UIスライダのリセットに問題があります。

私はこのエラーを取得する： MyProject.OrderInfo.Search.js：187キャッチされない例外TypeError：$（...）をスライダーが私たちの問題は、複数のjQueryを持つとは何かを持っていると思う機能

ではありません/ Javascriptのライブラリは、お互いを歩いて、しかし私は不確実です。私のチームが試みてきたことはすべて働いていません。スライダをNULL値にリセットするだけで済みます。ユーザがスライダに触れていないことを知るために、NULLを使用する必要があります。こうすることで、API呼び出しパラメータから除外できます。

スライダーの値をNULLにリセットするにはどうすればよいですか？ここ

は、コードがどのように見えるかである：

[OrderInfo.cshtml]（スクリプト領域、上部セクション）：

<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]（本体）：

<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]（注文REST APIを検索するための.JSファイル）：

//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? 
}); 

当社BackgridJS実装はjQueryの2.2使用していますので、我々はこれをしなければならない

<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> 

：

お知らせへの参照があります。 スライダーは 'jquery-ui.js'を使用します。これは 'jquery-1.10.2.js'に依存していると思います。

ユーザーが[リセット]ボタンをクリックすると、エラーが発生し、スライダがロードされていないようなjavascriptが動作します。しかし、私はそれがUIで動作していることがわかります。リセットボタンイベントが別の場所に移動する必要がありますか？

アイデア？助けて？

UPDATE＃1： Noctaneの提案を試しましたが、リセット機能をどこに置いても同じエラーが表示されます。私はそれをインラインにすることができます、私は他のスクリプトでそれを置くことができますが、残念なことに決して動作しません。ここで

は、私が試したものです：

<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

私はjQueryのバージョン2.2.0とjQueryのバージョン1.10.2の両方を利用しながら、jqueryのUIを使用していますjsFiddleを使ってデモを準備している、見てください、あなたは意志スライダを動かすと、変更された値がコンソールに設定されます。リセットをクリックすると、スライダがnullに設定されます。

はDEMO

あなたは、次のコードでこれを達成することができます参照してください。

<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> 

あなたはあなたはそれが仕事を得るためにあなたのアプリケーションに含まれる再配置する必要があるかもしれません。あなたがフィドルのものを並べ替えると、あなたは私がそれらを整理している方法に戻すと、それが動作するのを見るでしょう、あなたが得るエラーを見るでしょう。