Prijsslider gegevens naar mysql versturen

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Jaimy A

Jaimy A

28/07/2014 11:12:16
Quote Anchor link
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
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
<?
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
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
<?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);
      
?>
 
PHP hulp

PHP hulp

30/11/2024 11:58:36
 
Frank Nietbelangrijk

Frank Nietbelangrijk

28/07/2014 18:43:59
Quote Anchor link
kun je een voorbeeldje laten zien van de slider met zo min mogelijk code? het liefst in http://codepen.io
 
Jaimy A

Jaimy A

28/07/2014 18:53:46
Quote Anchor link
http://tinyurl.com/n23rmaj
Is de pagina waar ik momenteel een beetje op aant prutsen ben

Alvast bedankt
Gewijzigd op 29/07/2014 22:31:51 door Jaimy A
 
Ger van Steenderen
Tutorial mod

Ger van Steenderen

29/07/2014 12:19:47
Quote Anchor link
Code (sql)
PHP script in nieuw venster Selecteer het PHP script
1
2
...
WHERE .... AND adviesprijs BETWEEN 100.00 AND 500.00


Overigens laadt je op regel 154 nogmaals jQuery.
Gewijzigd op 29/07/2014 12:20:33 door Ger van Steenderen
 
Jaimy A

Jaimy A

29/07/2014 14:49:29
Quote Anchor link
Ger van Steenderen op 29/07/2014 12:19:47:
Code (sql)
PHP script in nieuw venster Selecteer het PHP script
1
2
...
WHERE .... AND adviesprijs BETWEEN 100.00 AND 500.00


Overigens laadt je op regel 154 nogmaals jQuery.


is nog een overblijfsel van mijn testjes :p

ik weet enkel niet goed hoe ik in ajax/jquery een listner maak die luister wanneer ik mijn price slider verschuif en los laat en dan zeg op welk bedrag deze staat en deze dan door stuurt naar php zodat ik deze request kan versturen naar mysql
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.