Get javascript variable with ajax - php

Question

I'm trying to get a javascript variable with ajax (and eventually get it to php).
I've tried several things. I'm trying to get the values of a Jquery range slider as soon as the user changes it (to save the values later on). This is the javascript:
$("#slider").bind("userValuesChanged", function(e, data){
console.log( + data.values.min );
});
The log is outputting the right values as soon as I change the minimum slider.
Now I'm trying to get this userValuesChanged with ajax:
$.ajax({
type: "GET",
dataType: "json",
url: "test.php",
data: "{userValuesChanged}",
async: false,
success: function(data){
alert(data);
return true;
}
});
Well as this is my first time using ajax, this is not working. I'm not sure how to write the right value at the data tag. How to get the userValuesChanged? Or the specific + data.values.minv value?

Answer 1

In your ajax call, you're just sending the string "{userValuesChanged}".
If you want to send new values, you specify those in an object:
$("#slider").bind("userValuesChanged", function (e, data) {
$.ajax({
type: "GET",
dataType: "json",
url: "test.php",
data: { minValue: data.values.min },
async: false,
success: function (data) {
alert(data);
return true;
}
});
});
The key bit above is:
data: { minValue: data.values.min },
...which creates an object with a property called minValue which is set to the value of the data.values.min you receive from the scroller. Your server-side script would look for a field called minValue. (Naturally if you also want other values from data.values, you can include them as well.)
Doing that every time the slider changes may be a bit much, though. If the userValuesChanged event only fires once, when the values have stopped changing, then the above is absolutely fine. If it fires continually when the user is moving the scroller, that wouldn't be good, because you'd be triggering a lot of ajax calls.
If that's the case (that it fires repeatedly as the user changes the value), see if it offers a different event when the user stops making changes.
If it doesn't, you can rate-limit instead. Here's how to do that if necessary:
$("#slider").bind("userValuesChanged", function (e, data) {
saveNewValues(data.values.min);
});
var pendingSaveTimer = 0;
function saveNewValues(minValue) {
// cancel any previous save we have pending
clearTimeout(pendingSaveTimer);
pendingSaveTimer = 0;
// Schedule saving the new value in half a second
pendingTimer = setTimeout(function() {
// Clear our timer var
pendingTimer = 0;
// Do it
$.ajax({
type: "GET",
dataType: "json",
url: "test.php",
data: { minValue: minValue },
async: false,
success: function (data) {
// Do something here if needed
}
});
}, 500); // 500 = 500 milliseconds = half a second
}
That waits half a second before saving a value, and cancels that save if a new value comes in within that half a second.

Answer 2

Try like
$.ajax({
type: "GET",
dataType: "json",
url: "test.php",
data: {userValuesChanged:userValuesChanged},
async: false,
success: function(data){
alert(data);
return true;
}
});
The data should be like {key : value} format while you sending the data through ajax