1

私は現在、クライアントのためにこのサイトに取り組んでいますが、SQL クエリからの結果をフィルタリングするために jQuery スライダーから URL に現在の値を渡すことができないことがわかったとき、今日はレンガの壁にぶつかりました。

サイトのインターフェースから判断すると、私が達成したいことはかなり明確です。ユーザーは購入したい製品のタイプを選択できるはずです。これにより、現在ページが更新され、ボタンが押されたときに値が URL に渡されます。押した。

        <form name="pumpType" action="<?php echo $_SERVER['PHP_SELF']; ?>?s=<?php echo $pType ?>&p=<?php echo $pVal ?>&g=<?php echo $gVal ?>" method="get" align="center">
            <div class="btn-group" data-toggle="buttons-radio">
              <button type="submit" class="<?php if( $pType == 'intermittent' ){ echo 'active '; } ?>btn btn-primary waitingUiBut" id="but1" name="s" value="intermittent">INTERMITTENT</button>
              <button type="submit" class="<?php if( $pType == 'continuous' ){ echo 'active '; } ?>btn btn-primary waitingUiBut" id="but4" name="s" value="continuous">CONTINUOUS</button>  
            </div>
        </form>

私のクライアントは、カテゴリがフィルター処理された後、ユーザーがクエリ結果をさらに絞り込むことができるようにしたいと考えています。これを実現するためにスライダーを使用することにしました。スライダーの値が変更されたら、SQL クエリを実行して、常に結果セットを調整したいと思います (これを行うには AJAX を使用する必要があると思いますか? 間違っている場合は修正してください)。私が抱えている問題は、?s= 変数のみが URL に送信され、?p 変数と ?g 変数の両方が認識されないことです。

SQL クエリ -

$pType = $_GET['s'];

$pVal = $_GET['p'];
$gVal = $_GET['g'];


$sql = "SELECT * FROM pumps 
        WHERE pump_type='$pType'
        AND flow_psi <= '$pVal'
        AND flow_gpm <= '$gVal'
        AND high_psi <= '$pVal'
        AND high_gpm <= '$gVal'";

jQuery Ui スライダー マークアップ -

    <div align="center" class="productSlider">
        <form name="pumpSlider" action="?s=<?php echo $pType ?>&p=<?php echo $pVal ?>&g=<?php echo $gVal ?>" method="get">
            <p class="inlineLabel">PSI</p><div class="filterSlider" id="psiSlider" name="p" value="1000"></div>
            <p class="inlineLabel">GPM</p><div class="filterSlider" id="gpmSlider" name="g" value="1000"></div>
        </form>
    </div>

jQuery スライダー送信コード (最終的には AJAX によって処理される)

          $(document).ready(function() {
          $("#psiSlider" ).slider({
              // options
              start: function (event, ui) {
              },
              slide: function( event, ui ) {
                  var curValue = ui.value || initialValue;
                  var target = ui.handle || $('.ui-slider-handle');                                     
                  var tooltip = '<div class="tooltip"><div class="tooltip-inner">' + curValue + '</div><div class="tooltip-arrow"></div></div>';
                  $(target).html(tooltip);

              },
              change: function(event, ui) {
                 $('#pumpSlider').submit();
              }
          });

          $("#gpmSlider" ).slider({
              // options
              start: function (event, ui) {
              },
              slide: function( event, ui ) {
                  var curValue = ui.value || initialValue;
                  var target = ui.handle || $('.ui-slider-handle');                                     
                  var tooltip = '<div class="tooltip"><div class="tooltip-inner">' + curValue + '</div><div class="tooltip-arrow"></div></div>';
                  $(target).html(tooltip);

              },
              change: function(event, ui) {
                 $('#pumpSlider').submit();
              }
          });
      });

フォーム送信時に p 変数と g 変数がキャプチャされないのはなぜですか? どんな提案でも大歓迎です。

4

1 に答える 1

1

問題は、「p」と「g」の両方が div タグにあり、div タグに値属性がないことです。入力フィールドを使用して非表示にすると、これらの値を取得できます。

<p class="inlineLabel">PSI</p><div class="filterSlider" id="psiSlider"></div>
<p class="inlineLabel">GPM</p><div class="filterSlider" id="gpmSlider"></div>

<input type="hidden" name="p" value="1000" />
<input type="hidden" name="g" value="1000" />

次に、スライダーを動かしているときは、div の値を使用しようとするのではなく、入力の値を使用/置換していることを確認してください。

于 2013-08-15T19:33:39.577 に答える