CODEWITHSUNDEEP
phpjqueryjquery-ui
Halfpint
Halfpint

Reputation: 4077

jQuery UI slider won't allow me to pass its current value to the URL

I am currently working on this site for a client and I today hit a brick wall when I found I was unable to pass the current value from a jQuery slider to the URL in order to filter results from an SQL query.

Judging from the interface on the site it should be pretty clear what I want to accomplish, a user should be able to select what type of product they want to purchase, this currently refreshes the page and passes the value to the url when the button is pressed.

        <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>

My client wants the user to be able to further refine the query results once the category has been filtered, I chose to use sliders to accomplish this. When the sliders value changes I want my SQL query to run, constantly refining the result set ( I assume I will have to use AJAX to do this? Correct me if I am wrong ). The problem I am having is that only the ?s= variable is ever sent to the URL, both ?p and ?g variables do not get recognised.

SQL Query - 

$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 Slider Markup - 

    <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 slider submission code ( to eventually be handled by 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();
              }
          });
      });

Why are my p and g variables not being captured on the form submission? Any suggestions would be most appreciated.

Upvotes: 1

Views: 422

Answers (1)

Tricky12
Tricky12

Reputation: 6820

Your problem is that your 'p' and 'g' are both in div tags, and div tags do not have a value attribute. You can use input fields and make them hidden so that you can have values for these.

<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" />

Then when you are moving the slider, make sure it is using/replacing the values of the input instead of trying to use a value on the div.

Upvotes: 1

Related Questions