CODEWITHSUNDEEP
javascriptjqueryajaxfullcalendar
Maychell Alcorin
Maychell Alcorin

Reputation: 838

fullcalendar read ajax last

Im trying to use fullcalendar. I tried to save the event before it drag. But ajax read last. Below is my code:

$('#event_add').unbind('click').click(function() {
                title = $('#event_title').val();
                event_url = $('#event_url').val();
                stime = $('#event_stime_hr').val() + ':' + $('#event_stime_min').val();
                etime = $('#event_etime_hr').val() + ':' + $('#event_etime_min').val();
                allday = $('#chkallday').val();
                eventTime = '';
                if(stime.length > 1){
                    stime = stime + ' ' + $('#optstime').val();
                    eventTime = stime;
                    if(etime.length > 1){
                        etime = etime + ' ' + $('#optetime').val();
                        eventTime = eventTime + ' to ' + etime;
                    }
                }

                if(title.length===0){
                    $('#erreventtitle').html('Event title is required');
                }else{
                    $('#erreventtitle').html('');
                    var eventDetails = eventTime + ' ' + title;
                    var eventid = null;
                    $.ajax ({
                        type: "GET",
                        url: "calendar/save?",
                        data: 'title='+title+'&stime='+stime+'&etime='+etime+'&allday='+allday+'&bgcolor=&url='+event_url,
                        cache: false,
                        success: function(data){
                            eventid = data;
                            console.log(data);
                            console.log('savedata');
                        }
                    });
                    console.log('add event');
                    addEvent(eventDetails, eventid);
                }

            });

the output in the console.

add event
save data

I wonder why the ajax code read last. Thank you for the help.

Upvotes: 0

Views: 181

Answers (3)

ADyson
ADyson

Reputation: 62074

Ajax calls run asynchronously, so they execute in parallel to other script on your page. When you call the $.ajax command, it sets off a separate thread of code to make the call and wait for the response. In the meantime, the rest of your outer function continues to execute.

Therefore, given that calling a server and receiving a response generally involves a time delay, however small, it's extremely likely that the lines of code immediately following the $.ajax command (in this case console.log('add event'); addEvent(eventDetails, eventid); will execute before the ajax "success" callback runs, because this only happens once the server returns a response.

This will give you a problem, because you're relying on receiving the eventid variable coming from the server in order to pass it to your addEvent() method. The way the code is now, eventid is 99.99% certain to be undefined when you run addEvent().

The simple solution is to move these lines of code inside your "success" function, so you can guarantee that they do not execute until there is a successful response from the server.

$.ajax ({
  type: "GET",
  url: "calendar/save?",
  data: { "title": title, "stime": stime, "etime", etime, "allday": allday, "bgcolor": bgcolor, "url": event_url },
  cache: false,
  success: function(data){
    var eventid = data;
    console.log(data);
    console.log('savedata');
    console.log('add event');
    addEvent(eventDetails, eventid);
  }
});

Design note 1: I've also altered your data option to pass an object, so jQuery can do the heavy lifting of encoding your variables appropriately. You don't have to do this but it's more reliable.

Design note 2: It's unconventional to use a GET for sending data to the server like this (the clue's in the method name, the idea is for it to fetch data), normal convention would be to use a POST or even a PUT. But that's a design choice for you.

Design note 3: You may also want to consider handling any errors from the server by adding an "error" callback as per the jQuery ajax documentation, then you can show a user-friendly message in case of any network issues or data validation errors (you are validating your data on the server, right? If not you really should, to guard against malicious or simply invalid input.). It can also help if you need to do anything similar in case of error that you might normally do after a successful response, e.g. closing a modal, or updating some UI or whatever. See http://api.jquery.com/jQuery.ajax/

Design note 4: .unbind() was replaced by the superior .off() (and its twin, .bind() was replaced by .on() method way back in jQuery 1.7. As of jQuery 3.0 it's officially deprecated, so you can expect it to be removed in future. I would switch to using .off() (and .on() if required) as soon as you can. See http://api.jquery.com/unbind/

Upvotes: 1

erdem
erdem

Reputation: 51

                $.ajax ({
                    type: "GET",
                    url: "calendar/save?",
                    data: 'title='+title+'&stime='+stime+'&etime='+etime+'&allday='+allday+'&bgcolor=&url='+event_url,
                    cache: false,
                    success: function(data){
                        eventid = data;
                        console.log(data);
                        console.log('savedata');
                        addEvent(eventDetails, eventid);
                    }
                });

           });

Upvotes: 0

huydq5000
huydq5000

Reputation: 284

Ajax call is asynchronous so when it is executing, the following lines of code are also executing.

Depend on the response speed of server side, "save data" will be printed when it's done.

Upvotes: 1

Related Questions