search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

Can't Seem to dynamically load on scroll

Asked by Cory
3 years ago.

For some reason I cant get the events to load from my PHP backend. I've posted the code below, it seems everything is exactly the same as the examples, i just cant figure it out. I've messed with dates and having it create the events through a loop and none of it it showing, not sure what I'm missing. Any help would be appreciated. The data does return the information in properly formatted JSON like it should.

//JS Code
var dp = new DayPilot.Scheduler('schedule');
dp.cellDuration = 15;
dp.cellWidth = 15;
dp.days = '14';
dp.heightSpec = "Fixed";
dp.height = 650;
// dp.autoScroll = 'Always';
dp.resources = drivers;
dp.timeHeaders = [
{groupBy: 'Week'},
{groupBy: 'Day'},
{groupBy: 'Hour'}
];
dp.scale = "CellDuration";
dp.eventDoubleClickHandling = 'Enabled';
dp.onEventDoubleClicked = function (args) {
getEdit(args.e.id());
};
dp.contextMenu = new DayPilot.Menu({
items: [
{
text: "Edit", onclick: function () {
getEdit(this.source.id());
}
},
{
text: "Delete", onclick: function () {
dp.events.remove(this.source)
}
}
]
});
dp.dynamicLoading = true;
dp.onScroll = function (args) {
args.async = true;
var start = args.viewport.start;
var end = args.viewport.end;

$.post('/schedule/scroll', {
start: start.toString(),
end: end.toString()
},
function (data) {
args.events = JSON.parse(data);
args.loaded();
})
};
dp.onEventDelete = function (args) {
$.post('/schedule/delete', {
event_id: args.e.id()
}, function (data) {

}
)
};
dp.onEventMoved = function(args){
if (external){
$.post('/schedule/create', {
event_id : args.e.id(),
start : args.newStart.toString(),
end: args.newEnd.toString(),
text: args.e.text(),
resource : args.e.resource()
})
}else{
postUpdate(args);
}
};
dp.onEventResized = function (args) {
postUpdate(args)
};

function postUpdate(args){
$.post('/schedule/update', {
event_id : args.e.id(),
start : args.newStart.toString(),
end: args.newEnd.toString(),
text: args.e.text(),
resource: args.e.resource()
})
}
dp.init();

//PHP Code

public function postScroll(Request $request) {
$temps = TempSchedule::where('end', '>', $request->start)->where('start', '<', $request->end)->get();
$events = array();

foreach ($temps as $temp){
$e = new \stdClass();
$e->id = $temp->event_id;
$start = new \DateTime($temp->start);
$end = new \DateTime($temp->end);
$e->start = $start->format('c');
$e->end = $end->format('c');
$e->text = $temp->text;
$e->resource = $temp->resource;
$events[] = $e;
}
header('Content-Type: application/json');
echo json_encode($events);
}

Comment posted by Dan Letecky [DayPilot]
3 years ago.

Your code seems to be fine.

There is a sample PHP project available for download:
https://code.daypilot.org/85715/html5-scheduler-with-dynamic-event-loading

Does that work as expected?

I would try checking the following:
1. Does onScroll event get fired?
2. Are the start and end values correct?
3. Does the '/scheduler/scroll' endpoint return correct values?
4. After args.loaded() is called, are the new events visible in dp.events.list array?

You can also try forcing a refresh using dp.update() after args.loaded() - but that shouldn't be necessary.

Comment posted by Cory
3 years ago.

Yes the demo works how I expected.

1. Yes the scroll event gets triggered and returns the proper values.
2. From what i can tell the dates seem to be correct unless there's something strange going on with the timezone part of the ISO formatted time stamps.
3. Yes these values are correct.
4. Yes the events are in the list.

If i add dp.update() anywhere in the function it seems to call the scroll function constantly, every half second or so. Still does not show the events though.

Comment posted by Dan Letecky [DayPilot]
3 years ago.

Just to make sure - if you load the same events using direct API, does it work?

// ...
dp.init();

$.post('/schedule/scroll', { 
    start: dp.visibleStart().toString(), 
    end: dp.visibleEnd().toString() 
  }, 
  function (data) { 
    dp.events.list = JSON.parse(data); 
    dp.update(); 
  });
Comment posted by Cory
3 years ago.

No, that did not work, and for some reason the dp.update(); at the end makes it so it calls the scroll constantly.

Comment posted by Dan Letecky [DayPilot]
3 years ago.

I mean: Can you try to call $.post('/schedule/scroll'..) right after .init() and not from onScroll event? That would test if the problem is with the data (or if the problem is with onScroll).

Comment posted by Cory
3 years ago.

That did not work either, still does not show the event.

This is the json string being returned if it helps:
[{"id":"152801","start":"2017-01-03T08:45:00","end":"2017-01-03T12:30:00","text":"Load #152794 - BALTIMORE, Maryland","resource":"198"}]

Comment posted by Dan Letecky [DayPilot]
3 years ago.

I assume the start and end dates are correct (the event must be in the visible range defined using .startDate and .days properties of the Scheduler). The problem might be with the resource id - it has to match the id of the resource exactly, including type (i.e. "198" !== 198). Can you check the .resources array (drivers)?

Answer posted by Cory
3 years ago.

That was it. I was storing the resource as a varchar originally. Switched this to an int in the database instead, problem solved.

Thanks for the help.

Comment posted by Dan Letecky [DayPilot]
3 years ago.

Great, thanks for the update!

This question is more than 3 months old and has been closed. Please create a new question if you have anything to add.