Fullcalendar dynamic business hours onselect AJAX

Question

I need to set business hours based on a particular ID set by a select option. I am also using the same dropdown to update the events for that particular ID.

The AJAX is working fine however I can't set the options dynamically although the events are being rendered fine. Here's my code.

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

var events = {
    url: "cal/load.php",
    type: 'POST',
    data: {
        id: $(this).val()
    }
}
var bizHours = "";
$.ajax({
    type: 'POST',
    url: 'test.php',
    data: {id:$(this).val()},
    success: function(data)
    { 
      bizHours = data;
      }
  })

$('#calendar').fullCalendar('option', {
businessHours: bizHours

});

$('#calendar').fullCalendar('removeEventSource', events);
$('#calendar').fullCalendar('addEventSource', events);
$('#calendar').fullCalendar('refetchEvents');
}).change();

This is the return from the test.php:

[{"dow":"1","start":"10:00:00","end":"18:00:00"},
 {"dow":"2","start":"10:00:00","end":"18:00:00"},
 {"dow":"3","start":"10:00:00","end":"18:00:00"},
 {"dow":"4","start":"09:00:00","end":"17:00:00"},
 {"dow":"5","start":"09:00:00","end":"17:00:00"}]

If I set it manually like this:

$('#calendar').fullCalendar('option', {
businessHours: [{"dow":"1","start":"10:00:00","end":"18:00:00"}
.....
});

Then this is fine, I think the variable bizHours is not being set. How can I update my business hours based on that select?

Update: Having moved the the functions inside the success function due to the async nature of AJAX, it still has the same effect, the business hours are not updated.

Here's the updated code:

$('#learn-ins').change(function() {

var events = {
    url: "cal/load.php",
    type: 'POST',
    data: {
        id: $(this).val()
    }
}
bizHours = "";
$.ajax({
    type: 'POST',
    url: 'test.php',
    data: {id:$(this).val()},
    success: function(data)
    { 
      bizHours = data;
$('#calendar').fullCalendar('option', { businessHours: bizHours });
$('#calendar').fullCalendar('removeEventSource', events); 
$('#calendar').fullCalendar('addEventSource', events); 
$('#calendar').fullCalendar('refetchEvents');
      }
  });
});

The test.php returns the correct JSON, I have added it onto console to see the values.

for a start, move all of `$('#calendar').fullCalendar('option', { businessHours: bizHours }); $('#calendar').fullCalendar('removeEventSource', events); $('#calendar').fullCalendar('addEventSource', events); $('#calendar').fullCalendar('refetchEvents'); }).change(); ` inside the "success" function. Ajax calls are **asynchronous** - so your fullCalendar code is being run before the code which sets the bizHours value. — ADyson, Jan 09 '19 at 17:20
Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — ADyson, Jan 09 '19 at 17:20
Thanks for that I have updated the code but still having same problem. — Abu Nooh, Jan 09 '19 at 19:10
Is `data` definitely an actual object, and not just a string? I don't see anywhere where you parse it from JSON into an array — ADyson, Jan 09 '19 at 21:51
Nope you're right! I needed to parse it using json.parse! Thank you for helping me figure it out. — Abu Nooh, Jan 09 '19 at 22:18
Great. Just so you know, when you're using jquery's $.ajax, if you put `dataType: "json"` as one of the options in the call to the $.ajax method, jQuery will do the json.parse() for you automatically, and then the `data` which is delivered to the "success" function will already be a JSON object - just makes your code a bit neater, that's all. — ADyson, Jan 10 '19 at 09:01

Fullcalendar dynamic business hours onselect AJAX

0 Answers0