得到更新的范围滑块值？(Get value from updated range slider?)

我已经得到了jQuery Mobile的一系列滑块。我想要的结果，从自动完成和两个滑块值组合，但我只能似乎得到，而不是一个我目前正在从滑动选择从滑块预定义的HTML值。

这里的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);
                }
            });
        }
    });
});

和所需的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>

那么，问题是，

  间隔：$（ “＃范围-1A”）VAL（）

只给我值20，因为这是＃范围-1A是从一开始就设定。我从来没有获得新值。有任何想法吗？

Answer 1:

您需要添加一个提交或GO按钮和相关的onClick处理程序。

下面是与发布代码的问题：它只被执行一次，在页面加载。这包括AJAX请求。它被执行一次，在页面加载。

这就是为什么服务器响应对应于初始设置。 Web浏览器从来没有告诉获取对应于任何新的或更新请求中的信息。

你需要的事件处理程序检测更改滑块，并重新提交Ajax和响应处理。所以看来，标准的jQuery $('selector').on('change', callbackFunction)文档： http://api.jquery.com/on/ ）在这里工作。

这里有一个调试的原型。你会看到，现在打印左侧的滑块设置在控制台日志时，你要么移动滑块。阿贾克斯被禁用，但保存的功能。您可以设置的改变处理函数来调用Ajax的功能，但它相当频繁触发的滑块拖动，所以你将需要抖了。这是比较容易，可能是一个更好的用户体验，让他们按一下按钮（即你需要补充）发送一个请求。在这种情况下，你需要将按钮的onClick功能绑定到调用Ajax和更新页面的功能。您还需要去掉window.setTimeout和记者（）函数，你认为满意后，你知道它是如何工作的。

下面的代码为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);
});