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

Door G Jansma op 04-04-2020 08:22 gewijzigd op 04-04-2020 08:29

2.389 views

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:

$("#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

<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

<?php

print_r($_POST);

?>

Frank Nietbelangrijk

04-04-2020 09:27

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

04-04-2020 10:12

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

04-04-2020 10:25

>> $("#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:


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

04-04-2020 11:32

Het is gelukt, bedankt voor je hulp!

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];});

Reageren

Inloggen om te reageren