从更新的范围滑块获取价值？ [英] Get value from updated range slider?
问题描述
我为jQuery Mobile提供了一个范围滑块。我想结合自动完成和两个滑块值的结果，但我似乎只从滑块中获取预定义的HTML值，而不是我目前选择滑动它的那个。
这是JS：
$（function（）{
function log（message） {
$（< div />）。text（message）.prependTo（＃log）;
$（＃log）。attr（scrollTop，0） ;
$ b $ .ajax（{
url：drycker.xml，
dataType：xml，
success：function（xmlResponse ）{
var data = $（artikel，xmlResponse）.map（function（）{
return {
value：$（Namn，this）.text（），
id：$（Artikelid，this）.text（），
price：$（Prisinklmoms，this）.text（），
interval：$（＃range-1a ）.val（）
};
}）。get（）;
$（＃birds）。autocomplete（{
源：data，
minLength：0，
select：function（event，ui）{
log（ui.item？
Vald produkt：+ ui.item.value +，artikel-ID：+ ui.item.id +，pris：+ ui.item.price +，prisintervall vald：+ ui .item.interval：
Ingen vald produkt，sökningenvar+ this.value）;
}
}）;
}
}）;
}）;
以及所需的HTML：
< div data-role =rangeslider>
< label for =range-1a> Prisintervall：< / label>
< input name =range-1aid =range-1amin =0max =500value =20type =range>
< label for =range-1b> Prisintervall：< / label>
< input name =range-1bid =range-1bmin =0max =500value =200type =range>
< / div>
所以问题在于
interval：$（＃range-1a ）.val（）
仅给出值20，因为这是＃range-1a从一开始就设置的值。我从来没有获得新的价值。任何想法？
您需要添加一个SUBMIT或GO按钮和相关的onClick处理程序。
以下是发布代码的问题：它只在页面加载时执行一次。
包含ajax请求。它在页面加载时执行一次。
这就是服务器响应对应于初始设置的原因。 Web浏览器永远不会被告知获取对应于任何新的或更新的请求的信息。
您需要事件处理程序来检测对滑块的更改，然后重新提交ajax和响应处理程序。所以看起来标准的jQuery $（'selector'）。on（'change'，callbackFunction）（docs： http://api.jquery.com/on/ ）在这里工作。
这是一个调试原型。您将看到它现在会在您移动任一滑块时在控制台日志上打印左滑块设置。阿贾克斯被禁用，但保存在一个函数中。您可以将更改处理函数设置为调用ajax函数，但在拖动滑块时会频繁触发，因此您需要将其反弹。让他们按下一个按钮（您需要添加）来发送请求，这会更容易，并且可能会是更好的用户体验。在这种情况下，您需要将按钮的onClick函数绑定到调用ajax并更新页面的函数。当你满意后，你会想要移除window.setTimeout和reporter（）函数，你知道它是如何工作的。
以下是 http://jsfiddle.net / FnrcR / 1 /
函数reporter（）{
console.log（range-1a ）;
console.log（$（＃range-1a）。val（））;
// window.setTimeout（记者，5000）;
函数doAjaxRequest（）{
$ .ajax（{
url：http://erikblomqvist.com/sandbox/dryck/drycker.xml ，
dataType：xml，
success：function（xmlResponse）{
var data = $（artikel，xmlResponse）.map（function（）{
return {
value：$（Namn，this）.text（），
id：$（Artikelid，this）.text（），
price：$（Prisinklmoms， this）.text（），
interval：$（＃range-1a）。val（）
};
}）。get（）;
$（ （$ {
source：data，
minLength：0，
select：function（event，ui）{
log（ui.item？
Vald produkt：+ ui.item.value +，artikel-ID：+ ui.item.id +，pris：+ ui.item.price +，pris intervall vald：+ ui.item.interval：
Ingen vald produkt，sökningenvar+ this.value）;
}
}）;
}
}）;
$（< div />）。text（message）。 prependTo（＃log）;
$（＃log）。attr（scrollTop，0）;
}
// window.setTimeout（reporter，1000）;
$（＃myRange）。on（change，记者）;
}）;
I've got a range slider for jQuery Mobile. I want to combine the result from an autocomplete and the two slider values, but I only seem to get the predefined HTML value from the slider, instead of the one I'm currently choosing from sliding it.
Here's the JS:
$(function() {
function log(message) {
$("<div/>").text(message).prependTo("#log");
$("#log").attr("scrollTop", 0);
}
$.ajax({
url: "drycker.xml",
dataType: "xml",
success: function(xmlResponse) {
var data = $("artikel", xmlResponse).map(function() {
return {
value: $("Namn", this).text(),
id: $("Artikelid", this).text(),
price: $("Prisinklmoms", this).text(),
interval: $("#range-1a").val()
};
}).get();
$("#birds").autocomplete({
source: data,
minLength: 0,
select: function(event, ui) {
log(ui.item ?
"Vald produkt: " + ui.item.value + ", artikel-ID: " + ui.item.id + ", pris: " + ui.item.price + ", prisintervall vald:" + ui.item.interval:
"Ingen vald produkt, sökningen var " + this.value);
}
});
}
});
});
and the needed HTML:
<div data-role="rangeslider">
<label for="range-1a">Prisintervall:</label>
<input name="range-1a" id="range-1a" min="0" max="500" value="20" type="range">
<label for="range-1b">Prisintervall:</label>
<input name="range-1b" id="range-1b" min="0" max="500" value="200" type="range">
</div>
So, the problem is that
interval: $("#range-1a").val()only gives me the value 20 because that's what #range-1a is set to from the beginning. I'm never getting the new value. Any ideas?
You need to add a SUBMIT or GO button and the related onClick handler.
Here is the problem with the posted code: it only gets executed once, at page load. That includes the ajax request. It is executed once, at page load.
That's why the server response corresponds to the initial settings. The web browser is never told to fetch the information corresponding to any new or updated request.
You need event handlers that detect changes to the slider, and resubmit the ajax and response handler. So it appears that the standard jQuery $('selector').on('change', callbackFunction) (docs: http://api.jquery.com/on/) works here.
Here's a debugging prototype. You'll see it now prints the left slider setting on the console log whenever you move either slider. The ajax was disabled but saved in a function. You could set the change handling function to call the ajax function, but it fires quite frequently as the slider is dragged and so you would need to be debounce it. It is easier and might be a better user experience to have them push a button (that you'll need to add) to send a request. In that case you'll need to bind the button's onClick function to the function that calls the ajax and updates the page. Also you'll want to remove the window.setTimeout and reporter() function after you are satisfied you know how it works.
Here's the code for http://jsfiddle.net/FnrcR/1/
function reporter(){
console.log("range-1a");
console.log($("#range-1a").val());
// window.setTimeout(reporter, 5000);
}
function doAjaxRequest(){
$.ajax({
url: "http://erikblomqvist.com/sandbox/dryck/drycker.xml",
dataType: "xml",
success: function(xmlResponse) {
var data = $("artikel", xmlResponse).map(function() {
return {
value: $("Namn", this).text(),
id: $("Artikelid", this).text(),
price: $("Prisinklmoms", this).text(),
interval: $("#range-1a").val()
};
}).get();
$("#birds").autocomplete({
source: data,
minLength: 0,
select: function(event, ui) {
log(ui.item ?
"Vald produkt: " + ui.item.value + ", artikel-ID: " + ui.item.id + ", pris: " + ui.item.price + ", prisintervall vald:" + ui.item.interval:
"Ingen vald produkt, sökningen var " + this.value);
}
});
}
});
}
$(function() {
function log(message) {
$("<div/>").text(message).prependTo("#log");
$("#log").attr("scrollTop", 0);
}
// window.setTimeout(reporter, 1000);
$("#myRange").on("change", reporter);
});
这篇关于从更新的范围滑块获取价值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
