jQuery UI slider ajax

13.02.2018  06:06

jQuery UI slider вызов ajax после изменения положения бегунков. В методах есть slide, но он нам не подходит, т.к. он срабатывает многократно по ходу сдвигания бегунков. Событие завершения сдвига можно отловить через метод stop. Код будет такой:

      var slider = $( "#slider" ).slider({
        range: true,
        min: min,
        max: max,
        values: [ min2, max2 ],
        slide: function( event, ui ) {
          // some manipulations
        },stop: function( event, ui ) {
			submitFilter(29);
			// alert('stop');
		}
      });


Полный код подключения слайдера выйдет такой:
	$(function() {
      var slider = $( "#slider" ).slider({
        range: true,
        min: min,
        max: max,
        values: [ min2, max2 ],
        slide: function( event, ui ) {
          $( "#amount" ).val( ui.values[ 0 ] );
          $( "#amount_1" ).val( ui.values[ 1 ] );
		  var v = ui.values[ 0 ] * dimension;
		  v = parseInt(v);
		  var v1 = ui.values[ 1 ] * dimension;
		  v1 = parseInt(v1);
		  if (ui.values[ 1 ] == max) v1 = maxDef;
        },stop: function( event, ui ) {
			submitFilter(29);
		}
      });
      $( "#amount" ).val( $( "#slider" ).slider( "values", 0 ) );
      $( "#amount_1" ).val( $( "#slider" ).slider( "values", 1 ) );
      // Изменение местоположения ползунка при вводе данных в первый элемент input
      $("input#amount").change(function(){
        var value1=$(this).val();
        var value2=$("input#amount_1").val();
          if(parseInt(value1) > parseInt(value2)){
          value1 = value2;
          $("input#amount").val(value1);
        }
        slider.slider("values",0,value1);
		setTimeout(function(){
			submitFilter(4);
		}, 100);
      });
      // Изменение местоположения ползунка при вводе данных в второй элемент input  
      $("input#amount_1").change(function(){
        var value1=$("input#amount").val();
        var value2=$("input#amount_1").val();
        if(parseInt(value1) > parseInt(value2)){
          value2 = value1;
          $("input#amount_1").val(value2);
        }
        slider.slider("values",1,value2);
		setTimeout(function(){
			submitFilter(5);
		}, 1);
      });
      // фильтрация ввода в поля
      $('#amount, #amount_1').keypress(function(event){
        var key, keyChar;
        if(!event) var event = window.event;
        if (event.keyCode) key = event.keyCode;
        else if(event.which) key = event.which;
        if(key==null || key==0 || key==8 || key==13 || key==9 || key==46 || key==37 || key==39 ) return true;
        keyChar=String.fromCharCode(key);
        if(!/d/.test(keyChar)) return false;
		setTimeout(function(){
			submitFilter(6);
		}, 1);
      });
    });


В функции submitFilter() уже собственно и происходит отправка данных из формы аяксом.


перейти в Блог | Блог (стр. 3)

Ударим лайками по бездорожью, разгильдяйству и бюрократизму!


Ключевые слова (тэги): JavaScript 24  jQuery 19  web-программирование 80  

Вам есть что сказать — ну я же чую.
Высказаться о наболевшем, я выслушаю:
Имя


email (не публикуется)