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

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

• javascript
• jquery
• events
• callback

• 1 Do you really need to trigger the change event? Can you not just refactor the code in your change handler into a separate function that you can just call? – Matt Burland Commented Feb 5, 2013 at 16:39
• Where does get_id_from_id come from? – ROY Finley Commented Feb 5, 2013 at 16:39
• @ROYFinley I was expecting this question. It is such a socifisticated function that nobody will ever try to use it with this name. – user1377911 Commented Feb 5, 2013 at 16:48
• 1 Not a solution, but an explanation for what you're seeing now: The callback function you have passed to .done is executed as soon as the function you've passed to .when is executed. That means that the .done callback is executed after the "change" event has been fired, but before it's handlers have been called and so of course before your call to $.post is executed, much less before the post has completed and returned. – dgvid Commented Feb 5, 2013 at 16:50

4 Answers 4

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);
});

Return the promise object from your event handler:

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

and then use triggerHandler() instead.

var promise = $('#type_rank_field').triggerHandler('change');
promise && promise.done(function(){
    // do stuff
});

Here's a simple example showing the functionality being used: http://jsfiddle.net/WQPXt/

I think we have to add callback after posted

$('#type_rank_field').on('change', function(ev, cb){
    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);
        // add after callback to make sure that html is inserted
        if(typeof cb == "function"){
           cb.apply($(this)) // this apply with the jq object context or another context u want
        }
 });

the trigger change will look like this

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

.live has been deprecated in jQuery since v1.7, and has been removed in v1.9.

You should replace it with .on().

.on has 2 signatures for binding elements, whereas .live only had 1.

If the element exists at the time you are binding, you do it like this:

$('.element').on('click', function(){
  .......
});

You can even use the shorthand:

$('.element').click(function(){
  .........
});

If the element does not exist at the time, or new ones will be added (which is what .live was normally used for), you need to use "event delegation":

$(document).on('click', '.element', function(){
  ........
});

NOTE: You want to bind to the closest static element, not always document.

In the meantime, the jQuery Migrate plugin can be used to restore the .live() functionality if you upgrade your jQuery to the newest version.