Im not too good at coding unfortunately but I am still trying to do my best. I recently started using the jquery ui slider with ajax to update from my DB.
My problem is that I have the slider to change one parameter but I also need a drop down box with a second parameter. I dont know how to implement the drop down box with the existing jquery slider code.
I want to use ajax so that the DB updates automatically BOTH if I drag the slider (which works) and if I change in the drop down (right now I can collect the value from the drop down but i cant make it update automatically with ajax, it only changes once i also drag the slider).
If someone could give me an example of how to write the code so that I can use both the slider and the drop down so that it updates automatically onchange that would be amazing! Thanks.
My slider works with jquery. The function I have for this (value2 is where I have collected the value from the drop down right now, but obviously I need a function for this):
$(function slider() {
$.ui.slider.prototype.widgetEventPrefix = 'slider';
$( "#slider-range-max" ).slider({
range: "max",
min: 1,
max: 4,
step: 1,
value: 2,
stop: function( event, ui ) {
$( "#amount" ).val( ui.value );
var value1 = ui.value;
var value2 = document.getElementById("livebelopp").value
$.ajax({
type: "GET",
url: "/slider-results.php",
data: "loptid="+value1+"&belopp="+value2,
cache: false,
success: function(html){
$("#content_update").html(html);
}
});
}
});
});
The drop down is simple:
<form>
<select style="border-radius: 5px;" id="livebelopp">
<option value="500">500 kr</option>
<option value="1000">1 000 kr</option>
<option value="2000">2 000 kr</option>
<option value="3000" selected="selected">3 000 kr</option>
<option value="4000">4 000 kr</option>
<option value="5000">5 000 kr</option>
<option value="6000">6 000 kr</option>
<option value="7000">7 000 kr</option>
<option value="8000">8 000 kr</option>
<option value="9000">9 000 kr</option>
<option value="10000">10 000 kr</option>
</select>
</form>
I think this does it
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
var sliderValue = 2; // make sure this corresponds to the default
$(function slider() {
$.ui.slider.prototype.widgetEventPrefix = 'slider';
$("#slider-range-max").slider({
range: "max",
min: 1,
max: 4,
step: 1,
value: 2,
stop: function( event, ui ) {
sliderValue = ui.value; // easiest solution; keep the value somewhere; we read this variable just before sending the data.
send_update();
}
});
});
// onChange of the select
$('#livebelopp').change(function() {
send_update();
});
/**
* We let both the onChange of the <select> and the onStop of the slider trigger this function.
*/
function send_update() {
var value1 = sliderValue;
var value2 = $("#livebelopp").val();
$.ajax({
type: "GET",
url: "slider-results.php",
data: {loptid: value1, belopp: value2}, // object notation
cache: false,
success: function(html) {
$("#content_update").html(html);
}
});
}
});
</script>
</head>
<body>
<div id="slider-range-max"></div>
<form>
<select style="border-radius: 5px;" id="livebelopp">
<option value="500">500 kr</option>
<option value="1000">1 000 kr</option>
<option value="2000">2 000 kr</option>
<option value="3000" selected="selected">3 000 kr</option>
<option value="4000">4 000 kr</option>
<option value="5000">5 000 kr</option>
<option value="6000">6 000 kr</option>
<option value="7000">7 000 kr</option>
<option value="8000">8 000 kr</option>
<option value="9000">9 000 kr</option>
<option value="10000">10 000 kr</option>
</select>
</form>
<hr>
<div id="content_update"></div>
</body>
For debugging, I did this:
slider-results.php
<?php
echo 'Request: <pre>' . print_r($_GET, true) . '</pre>';
?>