2013-11-19 2 views
1

Я хочу использовать ползунок диапазона для запроса в mysql/php для получения списка. Но я не понимаю, как передать переменную из jQuery в php-файл. Я читал this page и другие, но до сих пор не получаю результата. Это код для jQuery, который я хочу передать, что мне делать, чтобы передать переменную?Передача значения из 2 jQuery диапазона слайдера в PHP

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title>jQuery UI Slider - Range slider</title> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
    <link rel="stylesheet" href="/resources/demos/style.css" /> 
    <script> 
     $(function() { 
      $("#slider-range1").slider({ 
       range: true, 
       min: 0, 
       max: 500, 
       values: [ 75, 300 ], 
       slide: function(event, ui) { 
        $("#amount1").val("$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ]); 
       } 
      }); 
      $("#amount1").val("$" + $("#slider-range1").slider("values", 0) + 
       " - $" + $("#slider-range1").slider("values", 1)); 

      $("#slider-range2").slider({ 
       range: true, 
       min: 0, 
       max: 500, 
       values: [ 75, 300 ], 
       slide: function(event, ui) { 
        $("#amount2").val("$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ]); 
       } 
      }); 
      $("#amount2").val("$" + $("#slider-range2").slider("values", 0) + 
       " - $" + $("#slider-range2").slider("values", 1)); 

      $.ajax("file.php", {variable1:/*variable value*/, variable2:/*variable value*/, variable3:/*variable value*/, variable4:/*variable value*/}, /* insert ajax result*/); 
     }); 
    </script> 
</head> 
<body> 
    <p> 
     <label for="amount1">Price range:</label> 
     <input type="text" id="amount1" style="border: 0; color: #f6931f; font-weight: bold;" /> 
    </p> 
    <div id="slider-range1"></div> 
    <p> 
     <label for="amount2">Price range:</label> 
     <input type="text" id="amount2" style="border: 0; color: #f6931f; font-weight: bold;" /> 
    </p> 
    <div id="slider-range2"></div> 
</body> 
</html> 

ответ

2

, если вы хотите, чтобы представить значение каждый раз это изменение, которое вы можете попробовать мой код, но у вас есть плохая идея, если вы сделаете это .. его лучше у вас есть кнопка, чтобы сказать вашему серверу, что делается клиент выбирая цену.

Я просто обновляю код, надеюсь, это поможет.

<script> 
     $(function() { 
      var sliderChangeCallback = function(){ 
       var amount1 = $("#amount1").val(), amount2 = $("#amount2").val() 

       $.ajax({ 
        url : "your url", 
        data : { 
         "amount1" : amount1, 
         "amount2" : amount1 
        }, 
        error : function(){ 
         "call back error" 
        } 
       }) 
      }; 

      $("#slider-range1").slider({ 
       range: true, 
       min: 0, 
       max: 500, 
       values: [ 75, 300 ], 
       slide: function(event, ui) { 
        $("#amount1").val("$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ]); 
        sliderChangeCallback(); 
       } 
      }); 
      $("#amount1").val("$" + $("#slider-range1").slider("values", 0) + 
       " - $" + $("#slider-range1").slider("values", 1)); 

      $("#slider-range2").slider({ 
       range: true, 
       min: 0, 
       max: 500, 
       values: [ 75, 300 ], 
       slide: function(event, ui) { 
        $("#amount2").val("$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ]); 
        sliderChangeCallback(); 
       } 
      }); 
      $("#amount2").val("$" + $("#slider-range2").slider("values", 0) + 
       " - $" + $("#slider-range2").slider("values", 1)); 

     }); 
    </script> 
+0

спасибо ... он работает (с регулировкой litle) – Cosmin