1

jQuery Mobile 用のレンジ スライダーがあります。オートコンプリートの結果と 2 つのスライダーの値を組み合わせたいのですが、スライダーから現在選択している値ではなく、スライダーから定義済みの 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>

問題は

間隔: $("#range-1a").val()
#range-1a が最初から設定されているため、値 20 のみが返されます。私は新しい価値を得ることはありません。何か案は？

4

2 に答える 2

0

SUBMIT または GO ボタンと関連する onClick ハンドラを追加する必要があります。

投稿されたコードの問題は次のとおりです。ページの読み込み時に一度だけ実行されます。これには ajax リクエストが含まれます。ページの読み込み時に一度実行されます。

そのため、サーバーの応答は初期設定に対応しています。Web ブラウザーは、新しい要求または更新された要求に対応する情報をフェッチするように指示されることはありません。

スライダーへの変更を検出し、ajax と応答ハンドラーを再送信するイベント ハンドラーが必要です。したがって、標準の jQuery $('selector').on('change', callbackFunction)(ドキュメント: 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);
});
于 2013-06-27T06:50:29.023 に答える
0

あなたがしていることは私には正しいように見えます。Web インスペクター / 開発者ツールバーを起動して実行してみてください

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

jQuery が目的の結果を正しく返していることを確認します。$('#yourID').val() が AJAX リクエストの外部で機能していることを確認します。

于 2013-06-27T05:58:43.080 に答える