同时使用jquery v1.9.1和jquery ui v1.10.2?

时间:2013-05-13 19:07:20

标签: javascript jquery-ui jquery

我正在使用jquery1.9.1和jqueryui 1.10.2:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>

使用:

$(document).ready(function(){ 
// my code here
});

我正在使用这样的AJAX:

$('.formu').fadeOut("slow", function(){
    $.ajax({
        type: "GET",
        url: './php/calc.php?id=1000',
        dataType: "json",
        success: function(data){
            alert("hello");
            // jQueryUI component below
            $("#sliderui").slider({
               range: "min",
               min: 1,
               max: data.maxi,
               value: data.valu
            });
        },
        error: function(){
            errorcalculo();
        }
    });
});

我看到两次警告“你好”...所以我搜索问题,可能是因为两个库之间存在冲突。 然后我把这段代码:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>var jQuery132 = $.noConflict(true);</script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>

使用:

$(document).ready(function(){ 
// my code here
})(jQuery132);

最后修改了这样的AJAX:

jQuery132('.formu').fadeOut("slow", function(){
    jQuery132.ajax({
        type: "GET",
        url: './php/calc.php?id=1000',
        dataType: "json",
        success: function(data){
            alert("hello");
            // jQueryUI component below
            $("#sliderui").slider({
               range: "min",
               min: 1,
               max: data.maxi,
               value: data.valu
            });
        },
        error: function(){
            errorcalculo();
        }
    });
});

但我担心代码也不行...... 我做错了什么?

如果您需要更多信息,请与我们联系,我会修改帖子。

1 个答案:

答案 0 :(得分:2)

最简单的方法是使用检查条件..

var check = false;
jQuery132('.formu').fadeOut("slow", function(){ 
   if(!check) {
     jQuery132.ajax({
        type: "GET",
        url: './php/calc.php?id=1000',
        dataType: "json",
        success: function(data){
            alert("hello");
            // jQueryUI component below
            $("#sliderui").slider({
               range: "min",
               min: 1,
               max: data.maxi,
               value: data.valu
            });
        },
        error: function(){
            errorcalculo();
        },
        complete: function() {
           check = true;
        }
    });
  }
});

或者看起来可能存在滑块可能无法定义的情况。使用该条件会更好..

var $slider = $("#sliderui");
jQuery132('.formu').fadeOut("slow", function(){ 
   if(!$slider.hasClass('ui-slider')) {
      jQuery132.ajax({
        type: "GET",
        url: './php/calc.php?id=1000',
        dataType: "json",
        success: function(data){
            alert("hello");
            // jQueryUI component below
            $slider .slider({
               range: "min",
               min: 1,
               max: data.maxi,
               value: data.valu
            });
        },
        error: function(){
            errorcalculo();
        }
    });
  }
});

<强> Check Fiddle