Hey,
I’m using PhoneGap + jQueryMobile to create a web app, which uses the mobile scheduler and I have it working how I want it to, except when it comes to reloading data.
When the app loads I call a javascript function called load_scheduler, which makes an ajax call to a small web service I’ve written. When that ajax call successfully returns json I create the mobile scheduler and parse the json. Here’s that code:
function load_scheduler () {
var method = “agenda”;
jQuery.ajax({
url:‘http://’ + window.url + ‘webservice.php’,
type: ‘post’,
data: ({method: method, authenticated: window.authenticated, firstname: window.firstname, lastname: window.lastname, role: window.role, group: window.group, id: window.user_id, organisation_id: window.organisation_id}),
success:function(data){
$(document).ready(function () {
scheduler.config.readonly = true;
scheduler.config.header_date = “%M %j, %Y”;
scheduler.config.item_date = “%l %F %j, %Y”;
scheduler.config.hour_date = “%h:%i%a”;
scheduler.config.scale_hour = “%h”;
//scheduler.config.prevent_cache = true;
//scheduler.config.details_on_create = true;
dhx.ready(function(){
dhx.ui({
view: “scheduler”,
container: “content”,
id: “scheduler”
});
$$(“scheduler”).parse(data, “json”);
$$(“scheduler”).$$(“dayList”).scrollTo(0,31*8);
$$(“scheduler”).$$(“buttons”).setValue(“day”);
$$(“scheduler”).$$(“day”).show();
scheduler_size();
});
$(document).bind("orientationchange", function () {
scheduler_size();
});
function scheduler_size () {
var width = $("html").width();
var height = $("html").height() - 90;
$("#content").css("height", height);
$$("scheduler").define("width", width);
$$("scheduler").define("height", height);
$$("scheduler").resize();
$(".dhx_dayevents_scale_event").css("width", width - 45);
$(".dhx_dayevents_scale_event").children("div").each(function () {
$(this).css("width", width - 44);
});
}
});
}
});
}
So when the “agenda” page of the app is revisited any new data needs to be loaded into the scheduler, so I have this function:
function scheduler_update () {
var method = “agenda”;
jQuery.ajax({
url:‘http://’ + window.url + ‘entrada-mobile/api/entrada_mobile.api.php’,
type: ‘post’,
data: ({method: method, authenticated: window.authenticated, firstname: window.firstname, lastname: window.lastname, role: window.role, group: window.group, id: window.user_id, organisation_id: window.organisation_id}),
success:function(data){
$$(“scheduler”).parse(data);
$$(“scheduler”).refresh(“scheduler”);
}
});
}
This works pretty well. The problem is when scheduler_update () fires the data is loaded into the scheduler but if the current view is day view then you can see every event returned from the server in the day view, when it should only show the events for that day. If I move to the next day and then back the proper events are loaded.
How can I refresh the day view when data is reloaded?