Hoe kan ik de waarde uit dit object/event ophalen?
Ik ben bezig om een zoeksysteempje te maken met behulp van jQuery en Ajax. Ik ben niet heel geoefend met Javascript/jQuery maar heb het tot dusver zoals ik het wil hebben. Ik heb een mooie slider (rangeSlider) gevonden om te gebruiken voor het selecteren van een jaartal.
https://www.jqueryscript.net/form/range-slider-handles-labels-scales.html
--> Hier staat ook how to use it.
https://github.com/skinnynpale/rangeSlider.js
Het enige probleem waar ik tegenaanloop en wat ik maar niet voor elkaar krijg is om die waardes van de slider te bemachtigen. Hoe zorg ik ervoor dat ik die kan krijgen als variabel en kan verzenden via ajax in de function load_data()?
Ik zag wel de volgende code:
Code (php)
1
$("#example").rangeSlider("onChange", (event) => console.log(event.detail));
Op die manier wordt het Object bij wijziging als event wel weergegeven in de console.log. Maar hoe kan ik aan die waardes komen als er niks wordt gewijzigd aan de slider?
Alvast bedankt voor de hulp.
Ik heb twee pagina's:
ajax.php
Code (php)
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
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
<html>
<head>
<link rel="stylesheet" href="https://www.jqueryscript.net/demo/range-slider-handles-labels-scales/rangeSlider.css" />
<script src='//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src="https://www.jqueryscript.net/demo/range-slider-handles-labels-scales/rangeSlider.js"></script>
<script>
$(document).ready(function(){
load_data();
$('#search_text').keyup(function(){
if($(this).val() != ''){load_data();} else {load_data();}
$('#example').rangeSlider({}, {values: [1940, 1945]});
});
$("input[type='checkbox']").on('change', function() {
load_data();
});
$('#example').rangeSlider(
{
// or 'vertical'
direction: "horizontal",
// 'single' or 'interval'
type: "interval",
// 'green' or 'red'
skin: "red",
// shows settings panel
settings: false,
// shows range bar
bar: true,
// shows labels
tip: true,
// shows scales
scale: false
},
{
// min value
min: 1890,
// max value
max: 2020,
// step size
step: 1,
// predefined range
values: [1970, 2004]
}
);
$("#example").rangeSlider("onChange", () => {load_data();});
function load_data(){
var search = $('#search_text').val();
if ($('#checkbox1').is(":checked")) {var check1 = 1;} else {var check1 = 0;}
if ($('#checkbox2').is(":checked")) {var check2 = 1;} else {var check2 = 0;}
$.ajax({
url:"ajax2.php",
method:"POST",
data:{search: search, check1: check1, check2: check2},
dataType:"text",
success:function(data)
{
$('#result').html(data);
}
});
}
});
</script>
</head>
<body>
<div>
<input id="search_text" class="search_text mb-4" autocomplete="off" style="width: 100%; height: 36px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; font-size: 14px;" type="search" name="search" placeholder="Search">
</div>
<div>
<input type="checkbox" id="checkbox1" name="m" value="Man" checked>
<input type="checkbox" id="checkbox2" name="w" value="Woman" checked>
</div>
<div id="example"></div>
<div id="result"></div>
</body>
</html>
<head>
<link rel="stylesheet" href="https://www.jqueryscript.net/demo/range-slider-handles-labels-scales/rangeSlider.css" />
<script src='//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src="https://www.jqueryscript.net/demo/range-slider-handles-labels-scales/rangeSlider.js"></script>
<script>
$(document).ready(function(){
load_data();
$('#search_text').keyup(function(){
if($(this).val() != ''){load_data();} else {load_data();}
$('#example').rangeSlider({}, {values: [1940, 1945]});
});
$("input[type='checkbox']").on('change', function() {
load_data();
});
$('#example').rangeSlider(
{
// or 'vertical'
direction: "horizontal",
// 'single' or 'interval'
type: "interval",
// 'green' or 'red'
skin: "red",
// shows settings panel
settings: false,
// shows range bar
bar: true,
// shows labels
tip: true,
// shows scales
scale: false
},
{
// min value
min: 1890,
// max value
max: 2020,
// step size
step: 1,
// predefined range
values: [1970, 2004]
}
);
$("#example").rangeSlider("onChange", () => {load_data();});
function load_data(){
var search = $('#search_text').val();
if ($('#checkbox1').is(":checked")) {var check1 = 1;} else {var check1 = 0;}
if ($('#checkbox2').is(":checked")) {var check2 = 1;} else {var check2 = 0;}
$.ajax({
url:"ajax2.php",
method:"POST",
data:{search: search, check1: check1, check2: check2},
dataType:"text",
success:function(data)
{
$('#result').html(data);
}
});
}
});
</script>
</head>
<body>
<div>
<input id="search_text" class="search_text mb-4" autocomplete="off" style="width: 100%; height: 36px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; font-size: 14px;" type="search" name="search" placeholder="Search">
</div>
<div>
<input type="checkbox" id="checkbox1" name="m" value="Man" checked>
<input type="checkbox" id="checkbox2" name="w" value="Woman" checked>
</div>
<div id="example"></div>
<div id="result"></div>
</body>
</html>
ajax2.php
Gewijzigd op 04/04/2020 08:29:59 door G Jansma
Ik heb zelf ooit deze gebruikt:
https://github.com/seiyria/bootstrap-slider
Werkt makkelijk goed en heeft vele opties. Even doorscrollen naar beneden naar de readme en als je even de tijd neemt om het te lezen zie je ook een linkje naar de voorbeelden
Die link van jou ziet er ook wel goed uit, met goede documentatie.
Maar toch nog even vragen, is het mogelijk om die gegevens op te halen in de load_data functie?
Er moet dus iets in je console te zien zijn. Waarschijnlijk een object.
Je kan met bovenstaand event net zo goed dit object in een 'eigen' variabele kopiëren.
Deze variabele moet je dan wel even aan het begin van je script declareren.
Je krijgt dan iets als:
Code (php)
1
2
3
2
3
var sliderData = {};
$("#example").rangeSlider("onChange", (event) => sliderData = event.detail);
$("#example").rangeSlider("onChange", (event) => sliderData = event.detail);
Maar je zult vooral moeten kijken naar wat er in het object voor informatie te lezen valt.
Code (php)
1
2
3
4
5
6
2
3
4
5
6
var jaar1 = 1920;
var jaar2 = 1950;
var sliderData = {};
$("#example").rangeSlider("onChange", (event) => {sliderData = event.detail; load_data(); jaar1 = sliderData.values[0]; jaar2 = sliderData.values[1];});
var jaar2 = 1950;
var sliderData = {};
$("#example").rangeSlider("onChange", (event) => {sliderData = event.detail; load_data(); jaar1 = sliderData.values[0]; jaar2 = sliderData.values[1];});