callback after jQuery.trigger() function

Question

i have got a little problem here. I have to trigger an event which contains $.post() to load a form and assign it to a DOM. After this is done, i have edit the fields of the form.

I tried:

$.when(function(){
    $('#type_rank_field').trigger('change'); //calls the $.post() to load the form
})
 .done(function(){
    $('#quest_'+questions[i].split('|')[1]).children('option[value="'+questions[i].split('|')[0]+'"]').attr('selected',true);
});

Unfortunately this doesnt work and if i leave it just like that:

$('#type_rank_field').trigger('change');
$('#quest_'+questions[i].split('|')[1]).children('option[value="'+questions[i].split('|')[0]+'"]').attr('selected',true);

The change even looks like this:

        $('#type_rank_field').live('change',function(){
        var id = $(this).children('option:selected').attr('id');
        var id_edited = get_id_from_id(id);
        $.post('ajax/load_questions_of_rank.ajax.php',{id: id_edited},function(data){
            //alert(data);
            $('#rank_fields').html(data);
        });
    });

Then the form editation is executed before the form is properly loaded and attached to DOM. This might be a stupid question for JavaScript guys, but i am mainly a PHP guy so dont be cruel :-)

Thanks

Answer 1

Can separate out your change handler code? Something like this:

$('#type_rank_field').on('change',function(){
    handleChange($(this));
});

function handleChange(elem, callback) {
    var id = elem.children('option:selected').attr('id');
    var id_edited = get_id_from_id(id);
    $.post('ajax/load_questions_of_rank.ajax.php',{id: id_edited},function(data){
        //alert(data);
        $('#rank_fields').html(data);
        if (typeof callback === "function") {
            callback(data);
        }
    });
};

Then instead of triggering the change you can just call handleChange passing a callback to execute when the AJAX call is complete:

handleChange($("#type_rank_field"), function(data) {
    $('#quest_'+questions[i].split('|')[1])
        .children('option[value="'+questions[i].split('|')[0]+'"]')
        .attr('selected',true);
});