jquery - jQuery UI スライダーの変更後にページ コンテンツを更新する

Question

私は web プロジェクトに jquery Ui スライダーを使用していますが、小さな問題があります。スライダーの値が変更された後にページのコンテンツを更新する必要があります。私は ajax に慣れていないので、その例を教えてください、新しいデータを使用して、サーバーに投稿要求を送信する必要があると思います

私のhtmlコード

<div>
<p class='stops_air'>Price</p>  
<input type="text" id="price_option_right" style="border:0; color:#f6931f; font-weight:bold;" />
<div id="slider-range"></div><br />
<input type="button" value="More Filters" class="more_filters_right_option">
</div>

Answer 1

あなたはそのようにすることができます：

$('yoursliderselector').change(function(){
    $.ajax({
        type : 'post',
        url : 'yoururl',
        data : {yourdata},
        success : function(data){
            // process to update here
        }
    });
});

編集 ：

あらゆる種類の入力に対して

$('input').change(function(){
    $.ajax({
        type : 'post',
        url : 'yoururl',
        data : $(this).val(),
        success : function(data){
            // process to update here
        }
    });
});

Answer 2

サンプルコード...

$("#elementid").slider({
    range: true,
    min: 0,
    max: 100,
    slide: function (event, ui) {
        // write your jQuery post code here
        $.post("url", function(data){
           // write your page update code here
        });
    }
});