jquery -ui - ползунок диапазона - сохранять значения на дескрипторах ползунка после отправки ввода - PullRequest
Новая
       80

jquery -ui - ползунок диапазона - сохранять значения на дескрипторах ползунка после отправки ввода

0 голосов
/ 27 мая 2020

Я пытаюсь заставить значения ползунка оставаться там, где они были перемещены при нажатии кнопки ПОИСК. По умолчанию они возвращаются к начальным значениям при каждом нажатии на поиск. Я перепробовал все, но ничего не помогло. Любая помощь будет принята с благодарностью. 

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <link rel="stylesheet" href="css/jquery-ui.css"> 
    </head>

    <body>

        <form method="post" id="formMain">


             <label>Price Range</label>
              <div>
              <div id="slider-range" ></div>
                <input type="hidden" name="price_l" id="price_l" value="<?php echo 
       (isset($_REQUEST["price_l"])?$_REQUEST["price_l"]:"50000")?>"/>
                <input type="hidden" name="price_h" id="price_h" value="<?php echo 
       (isset($_REQUEST["price_h"])?$_REQUEST["price_h"]:"400000")?>"/>
                <input type="text" name="text" id="amount" disabled="" />
            </div>

          <div>
            <input type="submit" value="Search">
          </div>

        </form>


    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="js/jquery-ui.js"></script>


    <script>
        var siteSliderRange = function() {
    $( "#slider-range" ).slider({
      range: true,
      min: 5000,
      max: 450000,
      step: 5000,
      values: [ 50000, 400000 ],
      slide: function( event, ui ) {
        $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
          // when the slider values change, update the hidden fields
                    $("#price_l").val(ui.values[ 0 ]);
                    $("#price_h").val(ui.values[ 1 ]);

      }
    });
    $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
      " - $" + $( "#slider-range" ).slider( "values", 1 ) );      
    };
    siteSliderRange();
      </script>


   </body>
   </html>

1 Ответ

0 голосов
/ 27 мая 2020

Рассмотрим следующий пример, в котором localStorage используется для хранения значений ползунка в браузере.

https://jsfiddle.net/Twisty/e28pqhy9/11/

HTML

<fieldset class="ui-widget">
  <legend>Price Range</legend>
  <div class="content">
    <div id="slider-range"></div>
    <div id="amount"></div>
    <button>Search</button>
  </div>
</fieldset>

JavaScript

$(function() {
  function getValues(k) {
    if (k == undefined) {
      return false;
    }
    var v = localStorage.getItem(k);
    if (v != null) {
      return JSON.parse(v);
    } else {
      return -1;
    }
  }

  function setValues(k, v) {
    if (k == undefined || v == undefined) {
      return false;
    }
    localStorage.setItem(k, JSON.stringify(v));
  }

  function showRange(tObj, v) {
    tObj.html("$" + v[0] + " - $" + v[1]);
  }

  function searchRange(q) {
    $.post("searchRange.php", {
      price_l: q[0],
      price_h: q[1]
    }, function(response) {
      // Do the needful
    })
  }

  function siteSliderRange(tObj) {
    tObj.slider({
      range: true,
      min: 5000,
      max: 450000,
      step: 5000,
      values: [50000, 400000],
      slide: function(event, ui) {
        showRange($(this).next(), ui.values);
      },
      stop: function(e, ui) {
        setValues($(this).attr("id"), ui.values);
      }
    });
  }

  function init() {
    var cVal = getValues("slider-range");
    if (cVal != -1) {
      showRange($("#amount"), cVal);
      siteSliderRange($("#slider-range"));
      $("#slider-range").slider("values", cVal);
    } else {
      showRange($("#amount"), [50000, 400000]);
      siteSliderRange($("#slider-range"));
      setValues("slider-range", [50000, 400000]);
    }

    $(".content button").click(function() {
      searchRange($("#slider-range").slider("values"));
    });
  }

  init();
});

Это будет проверять localStorage при инициализации, чтобы увидеть, были ли сохранены какие-либо значения. В противном случае 50000 и 400000 устанавливаются по умолчанию. Если есть значение, оно будет загружено как в ползунок, так и в область отображения. Отказ от модели формы даст вам дополнительную безопасность. Меньше шансов, что кто-то введет свои собственные значения, если вручную включить текстовое поле.

Когда пользователь перемещает ползунок, отображение обновляется. Когда они stop, он обновляет localStorage. Это гарантирует, что если они обновят sh страницу или вернутся позже, ползунок вспомнит их выбор.

При нажатии кнопки поиска выполняется сообщение AJAX, которое отправляет данные на PHP и ожидает, что некоторые результаты будут переданы обратно. Я предполагаю, что эти результаты будут добавлены на страницу.

Обновление

Новый пример для PHP: https://jsfiddle.net/Twisty/e28pqhy9/20/

Если вы хотите отобразить значения PHP, вы можете это сделать, вам просто нужно настроить JS, чтобы искать эти значения.

HTML

<form>
  <fieldset class="ui-widget">
    <legend>Price Range</legend>
    <div class="content">
      <div id="slider-range"></div>
      <div class="amount-display"></div>
      <input type="hidden" id="amount" value="<?php echo $price_l . ',' . $price_h ?>" />
      <button type="submit">Search</button>
    </div>
  </fieldset>
</form>

JavaScript

$(function() {
  function getValues() {
    return $("#amount").val().split(",");
  }

  function setValues(v) {
    $("#amount").val(v.join(","));
  }

  function showRange(tObj, v) {
    tObj.html("$" + v[0] + " - $" + v[1]);
  }

  function siteSliderRange(tObj) {
    tObj.slider({
      range: true,
      min: 5000,
      max: 450000,
      step: 5000,
      values: getValues(),
      slide: function(event, ui) {
        showRange($(this).next(), ui.values);
      },
      stop: function(e, ui) {
        setValues($(this).attr("id"), ui.values);
      }
    });
  }

  function init() {
    var cVal = getValues();
    showRange($(".amount-display"), cVal);
    siteSliderRange($("#slider-range"));
  }

  init();
});

Когда форма отправлена, $_POST['amount'] будет строкой, и вы можете использовать это для ее обратного преобразования:

PHP

$amounts = explode(",", $_POST['amount']);
$price_l = (int)$amounts[0];
$price_h = (int)$amounts[1];
...