I have a need to manually trigger the change event on a menu. But then I need to wait until change event plete execution then I would perform action.

Here is what I am trying to do in code

$('#menu').change(function(){

  // do some work
  // make multiple AJAX calls....

});

$('#button').click(function(){

   $('#menu').val(5).change(); // once change is pleted I want to do some logic here.
});

This is what I tried but is does not seem to wait for the change() event to finish.

$('#button').click(function(){

   $('#menu').val(5).change().promise().done(function(){
      // do some work after the change() event is pleted..
   });
});

How can I correctly perform code until after the change event is pleted?

UPDATED

I tried the following, but still it does not seems to be working

$('#menu').change(function(){

     makeAjaxCalls($(this).val());

});


$('#button').click(function(){

   makeAjaxCalls(5, function(){
      // do some work after the makeAjaxCalls() is pleted..
   });
});

function makeAjaxCalls(id, callback) {
    var task = $.Deferred(function(){
         // Make all ajax calls here...
    });

    $.when(task).then(function() {
        if ($.isFunction(callback)) {
            callback();
        }
    }).catch(function (error) {
        console.log('something wrong... ', error);
    });
}

I have a need to manually trigger the change event on a menu. But then I need to wait until change event plete execution then I would perform action.

Here is what I am trying to do in code

$('#menu').change(function(){

  // do some work
  // make multiple AJAX calls....

});

$('#button').click(function(){

   $('#menu').val(5).change(); // once change is pleted I want to do some logic here.
});

This is what I tried but is does not seem to wait for the change() event to finish.

$('#button').click(function(){

   $('#menu').val(5).change().promise().done(function(){
      // do some work after the change() event is pleted..
   });
});

How can I correctly perform code until after the change event is pleted?

UPDATED

I tried the following, but still it does not seems to be working

$('#menu').change(function(){

     makeAjaxCalls($(this).val());

});


$('#button').click(function(){

   makeAjaxCalls(5, function(){
      // do some work after the makeAjaxCalls() is pleted..
   });
});

function makeAjaxCalls(id, callback) {
    var task = $.Deferred(function(){
         // Make all ajax calls here...
    });

    $.when(task).then(function() {
        if ($.isFunction(callback)) {
            callback();
        }
    }).catch(function (error) {
        console.log('something wrong... ', error);
    });
}

• javascript
• jquery
• promise

• Possible duplicate of jquery change event callback – Matthew Herbst Commented Sep 26, 2018 at 16:43
• 2 Do you really need to trigger the change event, instead of being able to simply call a mon function? – Bergi Commented Sep 26, 2018 at 16:44
• 3 Makes zero sense to call change. Put the logic in to a function and use a promise. – epascarello Commented Sep 26, 2018 at 16:44
• 1 @MatthewHerbst No, that doesn't seem to deal with async event handlers – Bergi Commented Sep 26, 2018 at 16:44
• 2 @MatthewHerbst the duplicate post you linked associates "plete" by the value of the element being changed. This question associates "plete" by all the asynchronous methods that happen inside the change handler being plete. Those are two pletely different cases. – Taplar Commented Sep 26, 2018 at 17:05

2 Answers 2

One potential way of doing this would be to provide the callback to the change event.

$('select').on('change', function(e, data){
  //mimic an async action
  setTimeout(function(){
    console.log('element changed');
    
    //if extra data was given, and one of them is a callback, use it
    if (data && typeof data.callback === 'function') {
      data.callback();
    }
  }, 2000);
});

$('button').on('click', function(){
  //trigger the change with extra data containing a callback
  $('select').val(2).trigger('change', { callback: function(){ console.log( 'weeee' ); } });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option></option>
  <option value="1">1</option>
  <option value="2">2</option>
</select>

<button>Click Me</button>

You want to call a function that makes asynchronous calls on both menu change and button click. There is a simple solution to this, make a function that reads value of menu and returns a promise and use it in both the events.

function makeAjaxCalls() {
    var menuValue = $('#menu').val();
    // Run some ajax calls based on menuValue and return the promise
    return Promise.resolve()
}

$('#menu').change(makeAjaxCalls);
$('#button').click(function(){
    $('#menu').val(5);
    makeAjaxCalls().then(function() {
        // Do something after ajax calls pleted
    });
});