0

我想在引导范围滑块值发生变化时触发一个事件，然后想执行一些 ajax。范围滑块是为了价格。

这是我的ajax：

 var ajaxCallBack = function (e) {

            var input = $(this).val();

            if ( input.length >= 2 ) {
                $('#spinner').show();
                $.ajax({
                    type: "GET",
                    url: "{{ path('search') }}",
                    dataType: "json",
                    data: {search:  $('#form_search').val(), brand: $('#form_brand').val(), price: $('#form_price').val()},
                    cache: false,
                    success: function (response) {
                        $('.card-deck').html(response.classifiedList);
                        $('#spinner').hide();
                        console.log(response);
                    },
                    error: function (response) {
                        console.log(response);
                    }
                });
            }

我尝试了很多选择，但没有任何帮助。

任何人都可以帮忙！

4

2 回答 2

1

只需使用https://github.com/seiyria/bootstrap-slider#events中列出的事件

$('#ex1').slider({
	formatter: function(value) {
		return 'Current value: ' + value;
	}
}).on('change', change); // Change the 'change' to any other event slide, slideStart, etc.


function change(e){
    $('.card-deck').html($(this).val() + "<br/>");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.0/css/bootstrap-slider.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.0/bootstrap-slider.min.js"></script>
<input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14"/>

<div class="card-deck">

</div>

于 2017-05-08T15:29:13.033 回答
0

看看这个，

https://stackoverflow.com/a/21869493/7231415

看起来你必须使用 slideStart 和 slideStop 事件

也看看 angularJS，有一个指令叫做 ng-change 可以用来处理事件，

或者你可以绑定一个 ng-model 变量并观察变化

于 2017-05-08T15:19:33.590 回答