Appending to <body> doesn't work on Mobile
EDIT: See reply.
So here's what I'm trying to do - my Rails app is set up so that the root is a view that displays all events on the current day. Currently, my view has the following structure:
- body data-role=page
data-role=header
#day_header data-role=header
#main.nextDay data-role=content
And the day_header and everything within #main change depending on the day. So given this, I've set up the following javascript:
- (function() {
$(document).ready(function() {
var anotherDay, m, move;
m = parseInt($("#main")[0].getAttribute("data-message"));
$("a#m_previous").click(function() {
return move(-1, true);
});
$("a#m_next").click(function() {
return move(1, false);
});
return move = function(direction, slide) {
m += direction;
$.ajax({
url: '/',
data: {
"date": m
},
success: function(newDay) {
$.mobile.changePage($("[data-role='page']"), "slide", slide, false)
}
});
return false;
};
});
}).call(this);
Assuming that I'm handling the situation correctly, the $.mobile.changePage event fires correctly and then switches to the new page. Can anyone help me implement $.animationComplete or $.pageShow, whichever event is executed when the changePage function completes and then appending the newDay's content to the DOM without visibly seeing the old day?
I've been struggling with this for a couple of days and any help would be really appreciated.