从更新的范围滑块中获取价值？

Question

我有一个用于 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>

那么问题来了

interval: $("#range-1a").val()

只给我值 20 因为这是 #range-1a 从一开始就设置的值。我永远不会得到新的价值。有任何想法吗？

Answer 1

您需要添加一个 SUBMIT 或 GO 按钮以及相关的 onClick 处理程序。

这是发布代码的问题：它只在页面加载时执行一次。 这包括 ajax 请求。它在页面加载时执行一次。

这就是服务器响应与初始设置相对应的原因。网络浏览器永远不会被告知获取与任何新的或更新的请求相对应的信息。

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

这是一个调试原型。您将看到它现在在您移动任一滑块时在控制台日志上打印左侧滑块设置。 ajax 被禁用但保存在一个函数中。您可以将更改处理函数设置为调用 ajax 函数，但它会在拖动滑块时非常频繁地触发，因此您需要对其进行去抖动。让他们按下按钮（您需要添加）来发送请求会更容易并且可能是更好的用户体验。在这种情况下，您需要将按钮的 onClick 函数绑定到调用 ajax 并更新页面的函数。此外，在您知道它是如何工作的之后，您还需要删除 window.setTimeout 和 report() 函数。

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

Answer 2

在我看来，你正在做的事情是正确的。尝试调出网络检查器/开发人员工具栏并运行

$("#range-1a").val();

验证 jQuery 是否正确返回了您所追求的结果。确认 $('#yourID').val() 在 AJAX 请求之外工作。