Prijsslider gegevens naar mysql versturen

Door Jaimy A op 28-07-2014 11:12

1.672 views

Hey,

Had graag iemand die wat wegwijs is met ajax, jquery, php & mysql naar mijn code laten kijken.

Ik ben bezig met een webshopje te maken om de verschillende codeer talen een beetje te leren kennen.
Ik ben momenteel toch al een paar dagen bezig met het proberen mijn priceslider aan de praat te krijgen.

Het lukt me maar niet wanneer je de price slider beweegt en dan los laat op een bepaalt bedrag deze te laten filteren in mysql zodat enkel de fietsen die tussen het bedrag (bijvoorbeeld: € 100 - € 500) te laten zien en de geen die er onder of er boven zit weg te filteren.

Index.php

<?
include '../AdminPanel/Data.php';
require_once 'submit.php';

	$sql = "SELECT MIN(Adviesprijs) AS minprijs, MAX(Adviesprijs) AS maxprijs FROM Fietsen";
	$results = $pdo->query($sql);
	
	foreach($results as $row) {  
	$minprijs = $row['minprijs'];
	$maxprijs = $row['maxprijs'];
	}
?>

<!DOCTYPE HTML>

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<title>jSlider</title>
	
	<link rel="stylesheet" href="../prijsslider/jslider.css" type="text/css">

	<script type="text/javascript" src="../prijsslider/js/jquery-1.7.1.js"></script>
	<script type="text/javascript" src="../prijsslider/js/jshashtable-2.1_src.js"></script>
	<script type="text/javascript" src="../prijsslider/js/jquery.numberformatter-1.2.3.js"></script>
	<script type="text/javascript" src="../prijsslider/js/tmpl.js"></script>
	<script type="text/javascript" src="../prijsslider/js/jquery.dependClass-0.1.js"></script>
	<script type="text/javascript" src="../prijsslider/js/draggable-0.1.js"></script> 
	<script type="text/javascript" src="../prijsslider/js/jquery.slider.js"></script>
    
        <style>
      body {
        padding: 10px;
      }
 
      h1 {
          margin: 0 0 0.5em 0;
          color: #343434;
          font-weight: normal;
          font-family: 'Ultra', sans-serif;   
          font-size: 36px;
          line-height: 42px;
          text-transform: uppercase;
          text-shadow: 0 2px white, 0 3px #777;
      }
 
      h2 {
          margin: 1em 0 0.3em 0;
          color: #343434;
          font-weight: normal;
          font-size: 30px;
          line-height: 40px;
          font-family: 'Orienta', sans-serif;
      }
 
      #fietsen {
        font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
        font-size: 12px;
        background: #fff;
        margin: 15px 25px 0 0;
        border-collapse: collapse;
        text-align: center;
        float: left;
        width: 300px;
      }
 
      #fietsen th {
        font-size: 14px;
        font-weight: normal;
        color: #039;
        padding: 10px 8px;
        border-bottom: 2px solid #6678b1;
      }
 
      #fietsen td {
        border-bottom: 1px solid #ccc;
        color: #669;
        padding: 8px 10px;
      }
 
      #fietsen tbody tr:hover td {
        color: #009;
      }
 
      #filter {
        float:left;
      }
    </style>

</head>
  <body> 
    <h1>TEST DATABASE</h1>
 
    <table id="fietsen">
      <thead>
        <tr>
          <th>ID</th>
          <th>Soortfiets</th>
          <th>Model</th>
          <th>Adviesprijs</th>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
 
    <div id="filter">
      <h2>Filter opties</h2>
	<div>
  	<? if ($Kinder != '0'){?>
        <input type="checkbox" id="Kinder" >
		<label for="Kinder">Kinderfiets <? echo '('.$Kinder.')' ?></label>
    </div><div>
    <? } if ($Vouw != '0'){?>
        <input type="checkbox" id="Vouw" name="Vouw" >
		<label for="Vouw">Vouwfiets <? echo '('.$Vouw.')' ?></label>
    </div><div> 
    <? } if ($Stads != '0'){?>
        <input type="checkbox" id="Stads" name="Stads" >
		<label for="Stads">Stadsfiets <? echo '('.$Stads.')' ?></label>
    </div><div>
    <? } if ($Elektrische != '0'){?>
        <input type="checkbox" id="Elektrische" name="Elektrische" >
		<label for="Elektrische">Elektrischefiets <? echo '('.$Elektrische.')' ?></label>
    </div><div>
    <? } if ($Fitness != '0'){?>
        <input type="checkbox" id="Fitness" name="Fitness" >
		<label for="Fitness">Fitnessfiets <? echo '('.$Fitness.')' ?></label>
    </div><div>
    <? } if ($Hybride != '0'){?>
        <input type="checkbox" id="Hybride" name="Hybride" >
		<label for="Hybride">Hybridefiets <? echo '('.$Hybride.')' ?></label>
    </div><div>
     <? } if ($MTB != '0'){?>
        <input type="checkbox" id="MTB" name="MTB" >
		<label for="MTB">Mountainbike <? echo '('.$MTB.')' ?></label>
    </div><div>
     <? } if ($Koers != '0'){?>
        <input type="checkbox" id="Koers" name="Koers" >
		<label for="Koers">Koersfiets <? echo '('.$Koers.')' ?></label>
    <? } ?>
    </div>
    </div>

<div>
	<span style="display: inline-block; width: 400px; padding: 0 5px;">
    <input id="prijsslider" type="slider" name="price" value="<? echo $minprijs.';'.$maxprijs;?>" /></span>
	<script type="text/javascript" charset="utf-8">
	jQuery("#prijsslider").slider(
	{ from: <? echo $minprijs; ?>, to: <? echo $maxprijs; ?>, step: 10, smooth: true, round: 0, dimension: "&nbsp;€", skin: "plastic" });
	</script>
    </div>

    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script>
      function makeTable(data){
        var tbl_body = "";
        $.each(data, function() {
          var tbl_row = "",
              currRecord = this;

          $.each(this, function(k , v) {
            if(k==='model'){
              v = "<a href='content.php?id=" + currRecord['id'] +"'>" + v + "</a>";
            } else if (k==='Adviesprijs'){
              v = "<span class='Adviesprijs'>" + v + "</span>";
            }
            tbl_row += "<td>"+v+"</td>";
          })
          tbl_body += "<tr>"+tbl_row+"</tr>";
        })

        return tbl_body;
      }
 
      function getfietsFilterOptions(){
        var opts = [];
        $checkboxes.each(function(){
          if(this.checked){
            opts.push(this.id);
          }
        });
 
        return opts;
      }
 
      function updatefietsen(opts){
        if(!opts || !opts.length){
          opts = allemerken;
        }

        $.ajax({
          type: "POST",
          url: "submit.php",
          dataType : 'json',
          cache: false,
          data: {filterOpts: opts},
          success: function(records){
            $('#fietsen tbody').html(makeTable(records));
            updatePrijzen();
          }
        });
      }
      

      function updatePrijzen(){
        var subsidyTotal = Number($("#total").text());

        $(".Adviesprijs").each(function(){
          var origVal = Number($(this).text())
          $(this).text(origVal - subsidyTotal)
        })
      }

      var $checkboxes = $("input:checkbox");
      $checkboxes.on("change", function(){
        var opts = getfietsFilterOptions();
        updatefietsen(opts);
      });
      
      $("#remove").on("click", function(){
        $("#total").text("0");
        $(this).prop("disabled", true);
        $(this).prev().prop("disabled", false);

        $checkboxes.trigger("change");
      });

      var allemerken = [];
      $("input[type=checkbox]").each(function(){
        allemerken.push($(this)[0].id)
      })

      updatefietsen();
      updatePrijzen();
    </script> 
  </body> 
</html>

submit.php

 <?php 
 	include '../AdminPanel/Config.php';
	
	$opts = $_POST['filterOpts'];
	$qMarks = str_repeat('?,', count($opts) - 1) . '?';
	$statement = $pdo->prepare("SELECT Fietsen.id, Typefiets, Model, Adviesprijs 
	FROM Fietsen INNER JOIN Soortfiets ON Soortfiets_id = Soortfiets.id WHERE Typefiets IN ($qMarks)");
	$statement -> execute($opts);
	$results = $statement -> fetchAll(PDO::FETCH_ASSOC);
	$json = json_encode($results);
	echo($json);
  	 
?>