代码之家 › 专栏 › 技术社区 › Patrick

带有慢速ajax的jquery点击功能

out-of-band callback asynchronous ajax jquery

Patrick · 技术社区 · 12 年前

我有一个绑定到单选按钮列表的点击处理程序。

当有人点击这些按钮中的任何一个时,都会执行ajax请求,该请求会发送到服务器,然后返回一些数据,这些数据会注入到页面中。

    $('ul#tag_picker').find('input').click(function(e){
    var type = ($(this).attr('type') == 'radio') ? 'radio' : 'checkbox';
    if($('ul#tag_picker input[type="radio"]:checked').length < 1 && type === 'checkbox'){   
        e.preventDefault();
        return false;
    }
    var value = $(this).val();
    var word = $(this).siblings('label').text();
    tag = {};
    tag.tag_id = value;
    tag.tag_word = word;
    tag.jumper = di.tags.jumpers[0];
    //tag.privilege = ui.item.privilege;
    args = {};
    args['jumper']  = di.tags.jumpers[0];
    args['name'] = 'selected_tags[]';
    //args['class'] = 'tag genre_tag';
    tag.privilege = 'genre';

    if (type === 'radio'){
        args['main_tag'] = true;
    }
    else if ( $(this).siblings('input[type="radio"]:first').is(':checked') ){
        $(this).attr('checked','checked');
        return false;                                   
    }
    action = ($(this).is(':checked')) ? 'add' : 'remove';
    user_select_tag(tag, action, args);  // <<< This is the ajax request.       
})

这个ajax请求可能需要一些时间(2-3秒)才能完成。

在请求过程中,单选按钮保持在“按下”状态。从远程服务器返回数据后,页面将更新,并且按钮显示为已选中。

我想让按钮看起来是选中的,并执行“带外”的ajax请求。

我一直在想我应该使用“递延”方法,或者回调,但我不确定如何做到这一点。

任何关于我如何让请求更加“带外”的建议都将是很棒的! 我将jquery ajax选项“async”设置为true。

编辑后在此处添加ajax请求:

function user_select_tag(tag, operation, overrides) {
var args = [];
args['tag_box'] = 'ul#user_selected_tags';
if ($(args['tag_box']).length < 1 && $('ul#selected_tags').length > 0){
    args['tag_box'] = 'ul#selected_tags';
}
args['name'] = '';
args['class'] = 'tag';
args['jumper'] = false;
args['main_tag'] = false;
args['getSuggestedTags'] = 1;
if(typeof di.tags.max_tags !== 'undefined'){
    args['max_tags'] = parseInt(di.tags.max_tags);
}
else{
    args['max_tags'] = 5;   
}
args['privilege'] = false;
var main_tag_attr = '';
var main_tag_class = '';
var append = 'append';
var tag_privilege = '';
var tag_picker = false
if ($('ul#tag_picker').length>0){
    tag_picker=$('ul#tag_picker');    
}
if (typeof(overrides) === 'object') {
    $.each(overrides,
    function(index, value) {
        if ($.inArray(index, args)) {
            args[index] = value;
        }
    });
}
if (args['jumper'] === false && operation === 'select') {
    log('This jumper was called without a jumper, is cold, and will now exit.');
    return false;
}
var j_id = tag.jumper.id;
var jumper = di.tags.jumpers[j_id];
var tag_box = $(args['tag_box']);
var tag_array = jumper.pre_selected_tags;
var tag_ref = 'ust_' + j_id + '_' + tag.tag_id;
if (operation == 'add') {
    if ($.inArray(tag.tag_id, tag_array) != -1 && args['main_tag'] == false) {
        log('The tag was already selected, so I\'m returning.');
        return false;
    }
    if (tag_array.length + 1 > args['max_tags'] && args['main_tag'] == false && !admin()) {
        alert(args['max_tags'] + ' tags are already selected. Please remove a tag if you would like to replace it with this one.');
        return false;
    }
    if (args['main_tag'] !== false) {
        console.log('main tag was not false ',args,'jumper id is: ',j_id);
        var append = 'prepend';
        $('.main_tag[data-jumper_id="' + j_id + '"]').each(function() {
            var removetag = {};
            removetag.tag_id = $(this).attr('data-tag_id');
            removetag.tag_word = $(this).text();
            removetag.jumper = di.tags.jumpers[j_id];
            var rtargs = {};
            rtargs['jumper'] = di.tags.jumpers[j_id];
            rtargs['getSuggestedTags'] = 0;
            //rtargs['main_tag']  = true;
            console.log('removing ',$(this),' tag',rtargs);
            user_select_tag(removetag, 'remove', rtargs);
            if(admin()){
                removetag['privilege'] = 'genre';
                user_select_tag(removetag, 'add', rtargs);
            }
        });
        //user_select_tag(tag,'remove');
        $('.' + tag_ref).remove();
        main_tag_attr = 'data-main_tag="true"';
        main_tag_class = 'main_tag';
    }
    tag_array.push(tag.tag_id);
    if (typeof  tag.privilege != 'undefined') {
        args['class'] += ' ' + tag.privilege + '_tag';
        tag_privilege = 'data-tag_privilege="' + tag.privilege + '"';
    }
    tag_box[append]('<li id="' + tag_ref + '" name="' + args['name'] + '" class="' + args['class'] + ' ' + main_tag_class + ' ' + tag_ref + '" data-tag_id="' + tag.tag_id + '" data-jumper_id="' + j_id + '"' + main_tag_attr + ' ' + tag_privilege + '><span class="tag_word">' + tag.tag_word + ' </span><img id="x_ust_' + tag.tag_id + '" class="x_ust" src="http://www.dailyinfo.co.uk/dimages/remove_tag.gif" alt="Remove this tag"></li>');
    if (tag_picker){
        tag_picker.find('input[type="checkbox"][value="'+tag.tag_id+'"]').attr('checked','checked');
    }
    var hidden_input = '<input type="hidden" name="' + args['name'] + '" class="' + tag_ref + '" value="' + tag.tag_id + '" />';
    if (jumper.form.length > 0) {
        $(hidden_input).appendTo(jumper.form);
    } else {
        $(hidden_input).appendTo(tag_box);
    }
    if (args['getSuggestedTags'] == 1){
        console.log('getting suggested tags',args)
        getSuggestedTags();   
    }
    else{
        console.log('not getting suggested tags',args)
    }
} else {
    // operation assumed to be remove
    $('.' + tag_ref).remove();
    if (tag_picker){
        tag_picker.find('input[type="checkbox"][value="'+tag.tag_id+'"]').attr('checked','');           
    }
    if (tag_array.length > 0) {

        }
    tag_array.splice($.inArray(tag.tag_id, tag_array), 1);
}
// copy the contents of the tag_box into the tag section of the live event preview
var tag_html = $(args['tag_box']).html();  
if (tag_html.length < 1) {
    tag_html = 'not tagged yet';
}
$('p.event_live_preview[data-handle="tags"]').html(tag_html);
return true;

}

function getSuggestedTags(overrides) {
var args = {};
args['jumper_id'] = 0;
if (typeof(overrides) === 'object') {
    $.each(overrides,
    function(index, value) {
        if ($.inArray(index, args)) {
            args[index] = value;
        }
    });
}
var json = {};
json.action = 'getSuggestedTags';
json.arguments = {};
var options = {};
options['chosen_tags'] = di.tags.jumpers[args['jumper_id']].pre_selected_tags;
options['return'] = 'id_key_word';
options['aliases'] = true;
options['related'] = true;
options['text'] = '';
options['location'] = null;
var det_names = ['name', 'description'];
var det_arr = [];
$('.evt_text').each(function() {
    var v = $(this).val();
    if (v.length > 0) {
        det_arr.push(v);
    }
});
if (typeof di.event.defaults.free === 'boolean' && di.event.defaults.free){
    det_arr.push($('input#di_cal_event_times_prices_window_prices').val());
}
if (det_arr.length > 0) {
    options['text'] = det_arr.join(' ');
}
var hid = $('input#hidden_venue_id');
var cv = $('input#custom_venue');
if (hid.length > 0 && cv.length > 0) {
    if (hid.val().length > 0 && cv.val().length < 1) {
        options['location'] = hid.val();
    }
}
json.arguments = options;
var a = ajax_request({
    url: '/ajax/get_suggested_tags.php',
    async: false,
    dataType: 'html',
    data: {
        json: JSON.stringify(json)
    },
    success: function(data) {
        if (data.length > 0) {
            $('ul#suggested_tags').replaceWith(data);
        }
    },
    type: 'GET'
});

}

ajax_request是一个包装器:

function ajax_request(override_options){
var options={
    "async":true,
    "cache":false,
    //"data":{Xaction and Xquery/Xcode},
    "dataType":"json",
    "error":errorCallback,
    "success":function (data,textStatus){
        //alert("A specific success callback was not specified!\n"+data+"\n"+textStatus)
    },
    "timeout":9000,
    "type":"POST"
}
var option_name
for(option_name in override_options){
    options[option_name]=override_options[option_name]
}
return jQuery.ajax(options)

}

帕特里克

2 回复 | 直到 12 年前

bpeterson76 12 年前

只要点击一下,对你的按钮做点什么。我设置了使用jQuery UI按钮(这很好),所以在我的应用程序中,我只将attr设置为禁用。。。。你可以随心所欲地处理这个细节。

接下来,在ajax成功的情况下,只需更改您最初设置的按钮状态。在顶部添加一个加载器通知并在此处将其删除也有帮助。Jquery的对话框和ajaxload.info的动画gif非常完美。

顺便说一句,jQuery的ajax函数默认情况下是异步的,不需要定义它。

bpeterson76 12 年前

我确实需要查看您的ajax代码,但默认情况下,它应该是异步的。不过,下面是给你的101回电话:

顺便说一句,这采用了jQuery语法。如果你需要其他格式的,请告诉我。

$.ajax({
    type: 'POST',
    url: yourUrl,
    async: true, //not necessary -- its the default behavior, but I put it in there in case you had it set to false currently
    //here are your callbacks: success will be called when your ajax function returns, and error will be called if any errors are thrown
    success: function(results) {                   
             //do something with your results       
             }                                    
    error: function(e) {
             //do something with your error
           }
});