Hoe kan ik de waarde uit dit object/event ophalen?

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Java Developer / Overheid / Complexiteit

Functieomschrijving Wil jij als Java Developer een bijdrage leveren aan een veiliger Nederland en je als Java Developer bezig houden met zeer complexe bedrijfskritische applicaties? Lees dan snel verder! Doorontwikkelen bedrijfskritische applicaties; Aanpassingen maken in de bestaande applicatie; Vertalen van jouw visie op continuous integration en continuous delivery; Debuggen van de applicatie; In gesprek gaan met eindgebruikers om verbetervoorstellen op te halen. Functie-eisen Minimaal HBO-werk en denkniveau; Minimaal 5 jaar werkervaring als Java Developer; Je bent minimaal OCP-Java SE 6 gercertificeerd; Je hebt kennis van Webservices en Continuous Integration; Je bent analytisch sterk en zowel klant- als resultaatgericht. Bedrijfsomschrijving Binnen

Bekijk vacature »

G Jansma

G Jansma

04/04/2020 08:22:17
Quote Anchor link
Hallo,

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)
PHP script in nieuw venster Selecteer het PHP script
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)
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
<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
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
<?php

print_r($_POST);

?>
Gewijzigd op 04/04/2020 08:29:59 door G Jansma
 
PHP hulp

PHP hulp

26/05/2020 12:31:39
 
Frank Nietbelangrijk

Frank Nietbelangrijk

04/04/2020 09:27:39
Quote Anchor link
Sorry hoor maar dat lijkt mij een ding van niets... kan niet slepen en ook niet klikken op de slider zelf. Alleen maar op de labels. Je gebruikers zullen snel afhaken. Bovendien is mijn Grieks? niet zo best :]

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

G Jansma

04/04/2020 10:12:29
Quote Anchor link
Ik had de Github versie gedownload, daarin heb je wel die functionaliteiten van slepen en klikken. Ik had even de .js in mijn code vervangen door die .js uit de demo, maar kennelijk is die wat ouder. Had ik niet op gelet. En mijn Google Translate in Chrome zei dat het Russisch was.

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?
 
Frank Nietbelangrijk

Frank Nietbelangrijk

04/04/2020 10:25:58
Quote Anchor link
>> $("#example").rangeSlider("onChange", (event) => console.log(event.detail));

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)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
var sliderData = {};

$("#example").rangeSlider("onChange", (event) => sliderData = event.detail);


Maar je zult vooral moeten kijken naar wat er in het object voor informatie te lezen valt.
 
G Jansma

G Jansma

04/04/2020 11:32:25
Quote Anchor link
Het is gelukt, bedankt voor je hulp!

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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];});
 



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.