如何在jQuery幻灯片更改上创建ajax调用?

时间:2011-09-26 16:32:09

标签: javascript jquery ajax jquery-ui

如何在jQuery幻灯片更改时调用此Jquery ajax调用?

function callpage() {
    $('#formcontent').empty().html('<p style="margin-top:20px;text-align:center;font-family:verdana;font-size:14px;">Vent venligst, henter webhosts.</p><p style="margin-top:20px;margin-bottom:20px;text-align:center;"><img src="../images/ajax.gif" /></p>');
    var form = $(this).closest('form');
    $.ajax({
        type: form.attr('method'),
        url: form.attr('action'),
        data: form.serialize(),
        success:function(msg){
            $('#formcontent').html(msg);
        }
    }

我的jQuery滑块代码:

$("#slider").slider({
    value:'',
    min: 0,
    max: 5000,
    step: 250,
    slide: function(event, ui) {
        if (ui.value == $(this).slider('option', 'max')) {
            $(ui.handle).html('Ubegrænset');
            $('#sliderValueplads').val('99999');
        } else {
            $(ui.handle).html(ui.value + ' MB');
            $('#sliderValueplads').val(ui.value);
        }
    }
}).find('a').html($('#slider').slider('value'));

$('#sliderValueplads').val($('#slider').slider('value'));

我的新滑块代码:

        $("#slider").slider({
    value:'',
    min: 0,
    max: 5000,
    step: 250,
    stop: function(_, ui){
    callpage();
},
    slide: function(event, ui) {
        if (ui.value == $(this).slider('option', 'max')) {
            $(ui.handle).html('Ubegrænset');
            $('#sliderValueplads').val('99999');
        } else {
            $(ui.handle).html(ui.value + ' MB');
            $('#sliderValueplads').val(ui.value);
        }
    }
}).find('a').html($('#slider').slider('value'));

问题是没有进行ajax调用,而是替换了HTML。这有点奇怪,因为我刚用这个$('#left input:checkbox').change(callpage);测试了电话页面,并且电话页确实按预期工作了

1 个答案:

答案 0 :(得分:2)

如果您的意思是当用户停止移动滑块然后将其绑定到构造函数中的stop事件。

stop: function(_, ui){
    callpage();
}