callback after jQuery.trigger() function
Solution 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);
});
Solution 2
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/
Solution 3
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);
}]);
user1377911
Updated on February 07, 2020Comments
-
user1377911 about 4 years
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
-
user1377911 about 11 yearsThanks for your comment Roy. I will rewrite the .live() function to .on() but i think that doesnt help me with my problem. Is it understandable or should i just describe the problem more deep?
-
user1377911 about 11 yearsThis actually looks like a good idea! I will try it and I will let you know if the problem is solved or not :)
-
ROY Finley about 11 years@FelixKling Was try to figure out problem, but user never answered my question form above. Where does
get_id_from_id
come from? But looks like Matt has it all figured out. -
Felix Kling about 11 yearsWow... is this documented?
-
Kevin B about 11 yearsYes, it is documented, the last bullet in first section. api.jquery.com/triggerHandler
-
BLSully about 11 years@MattBurland: I only pointed that out as I use this exact pattern sometimes and I've shot myself in the foot before :D. If JS has taught me anything, it's don't rely on type coercion
-
Felix Kling about 11 yearsCool. A bit fragile (depends on the order of event handlers), but interesting.
-
ROY Finley about 11 yearsOkay Kevin B puts out an answer using the exact depreciated function
live()
and gets to upvotes. I place an answer that is telling you not to use this function as it could be part of your problem and I get downvoted. How does that work..... -1 -
Kevin B about 11 yearsThat could be fixed with a namespace in 1.9+, though previous versions handled namespaces inconsistently.
-
Kevin B about 11 yearsthe use of .live has nothing to do with this question.
-
Felix Kling about 11 years@ROY: You are correct,
.live
should not be used anymore, but not every correct fact answers every question. Your answer does not solve the problem. It's ok as a comment but not as an answer. -
ROY Finley about 11 yearsSo it is okay to give answers using depreciated and removed code as long as it works........ Not good form.
-
Kevin B about 11 yearsHow do you know he's not using jQuery 1.3.2? if he mentioned that he was using 1.7+ or was using a method implemented in 1.7+ i'd agree with changing that portion of the code in the answer. All we know is he is atleast using 1.5 due to the deferred usage.
-
ROY Finley about 11 yearsJquery Says :
Users of older versions of jQuery should use .delegate() in preference to .live().
.... :) -
user1377911 about 11 yearsThis looks ok, but doesnt work :-( I am using 1.8.2. it doesnt even load the form.