Get value from updated range slider?

问题:

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?

回答1:

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

回答2:

What you're doing looks right to me. Try bringing up a web inspector / developer tool bar and running just

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

to verify that jQuery is correctly returning the results you are after. Confirm that $('#yourID').val() is working outside of the AJAX request.