Multiple ajax calls in event function full calendar

Question

I am using fullcalendar jQuery plugin in our page for create/view meeting invitation.

And my new requirement is to show meetings created in outlook for that particular user in our page . My webservice(used to pull meetings from outlook) took min of 45 secs to send the reponse . I don't want the user to wait completely for 45 secs .(Performance Issue) So I just want to load events from db first and then i want to append events coming back as webservice response . Hence user couldn't feel that much delay.

So I just made two ajax calls to pull required details. One ajax call is to pull events from local database(SUCCESS) and another one is to call the webservice to pull events created in Outlook.

events: function(start, end, timezone,callback) {
            $.ajax({
                url:  // url hits db and gets meeting details in db
                dataType: 'json',

                success: function(response) {
                    var events = [];
               if(response != null){
                   alert("Success");
                    $.map(response ,function ( r ){
                       alert(r.title + " "  +  r.start + " " + r.end);

                      events.push({
                            title : r.title,
                            start : r.start,
                            end : r.end
                        });
                    });

               }    
               callback(events);
          }

          $.ajax({
                url:  // url calls webservice and gets meetings in Outlook
                dataType: 'json',

                success: function(response) {
                    var events = [];
               if(response != null){
                   alert("Success");
                    $.map(response ,function ( r ){
                       alert(r.title + " "  +  r.start + " " + r.end);

                      events.push({
                            title : r.title,
                            start : r.start,
                            end : r.end
                        });
                    });

               }    
               alert("External Events  "+ events.length);  //EXECUTED 

               callback(events);  //NOT EXECUTED
               }
        });
  }

And now the problem is ,

1 . First ajax call is working fine .

2 . Am getting proper response from Webservice but the response wasn't attached to calendar .

And my queries are ,

1. Can't we use callback(events) twice ?

2. Or else please suggest me the alternative solution for this ?

3. If am using two event function separately,only second event function will gets executed . Why first event function is not getting executed ?

Answer 1

A little old, but a way around for reference. In your first ajax call, instead of the callback, put in the second ajax call

$.ajax({
            url:  // url hits db and gets meeting details in db
            dataType: 'json',

            success: function(response) {
                var events = [];
           if(response != null){
               alert("Success");
                $.map(response ,function ( r ){
                   alert(r.title + " "  +  r.start + " " + r.end);

                  events.push({
                        title : r.title,
                        start : r.start,
                        end : r.end
                    });
                });

           }    
           //second call
           $.ajax({
            url:  // url calls webservice and gets meetings in Outlook
            dataType: 'json',

            success: function(response) {
                var events = [];
           if(response != null){
               alert("Success");
                $.map(response ,function ( r ){
                   alert(r.title + " "  +  r.start + " " + r.end);

                  events.push({
                        title : r.title,
                        start : r.start,
                        end : r.end
                    });
                });

           }    
           alert("External Events  "+ events.length); 

           callback(events); // return all results 
           }
         });
      }

Answer 2

Nothing is wrong with your code. Ensure the responses you're getting from your server is what you expect (response != null for instance).

https://jsfiddle.net/5ds8z06p/

var foo = function(callback) {
  $.ajax({
    url: '/echo/json',
    success: function() {
      callback('first');
    }
  });

  $.ajax({
    url: '/echo/json',
    success: function() {
      callback('second');
    }
  });
};

foo(function(bar) {
  console.log(bar);
});