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

你正在做什么看起来对我来说。尝试启动Web检查器/开发人员工具栏并运行

$（ “＃范围-1A”）VAL（）;

验证jQuery是否正确返回您所追求的结果。确认$（'＃yourid'）。val（）在AJAX请求之外工作。

Answer 2

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

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

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

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

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

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

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

2 个答案: