從更新的範圍滑塊獲取價值？

我有一個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，因爲這是＃範圍-1A設爲從一開始就。我從來沒有獲得新的價值。有任何想法嗎？

來源

2013-06-27 Erik Blomqvist

您可以複製此上的jsfiddle的代碼？ – Paul

當然：http://jsfiddle.net/erikblomqvist/aVMtQ/ 不知道如何正確包含Ajax自動完成的XML文件。 –

您需要添加一個SUBMIT或GO按鈕以及相關的onClick處理程序。

以下是發佈代碼的問題：它只在頁面加載時執行一次。這包括ajax請求。它在頁面加載時執行一次。

這就是服務器響應對應於初始設置的原因。 Web瀏覽器永遠不會被告知獲取對應於任何新的或更新的請求的信息。

您需要事件處理程序來檢測對滑塊的更改，然後重新提交ajax和響應處理程序。所以看起來標準jQuery $('selector').on('change', callbackFunction)（文檔：http://api.jquery.com/on/）在這裏工作。

這是一個調試原型。您將看到它現在會在您移動任一滑塊時在控制檯日誌上打印左滑塊設置。阿賈克斯被禁用，但保存在一個函數中。您可以將更改處理函數設置爲調用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-27 06:50:29 Paul

你是老闆，保羅！感謝您的澄清！ –

你在做什麼看起來很適合我。嘗試提出一個網絡檢查員/開發人員工具欄，並運行

$（「＃range-1a」）。val（）;

來驗證jQuery是否正確地返回你之後的結果。確認$（'＃yourID'）。val（）在AJAX請求之外工作。

來源

2013-06-27 05:58:43

我從AJAX請求的外部實際獲得了它。這很奇怪（但很好）。 –

從更新的範圍滑塊獲取價值？

回答

相關問題