jQuery Mobile - Transitions and Page Changes

I'm trying to have jQuery mobile realize that when I click a certain link, call the serve开发者_StackOverflowr with the path /?date={n} where n is some number representing the days from today. The JS file so far looks like the following:

(function() {
  $(document).ready(function() {
    var 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;
      return $.mobile.changePage({
        url: '/',
        type: 'get',
        data: {"date": m}
      }, "slide", slide, false);
    };
  });
}).call(this);

As the docs mention, $.mobile.changePage takes a couple of parameters as the path it should check, animation, reverse, and changeHash. So while I believe that I'm making all the right moves, something isn't working.

On calling this function, it successfully makes the URL request, delivers the necessary HTML, but it doesn't get past the transition part. A small popup comes up saying "loading" but that's about it.

What am I missing here? What do I need to do in order to successfully complete the page transition?

Any help is greatly appreciated.

EDIT: So the document comes in and I can see that in the web inspector. But it's not being loaded, so I tried the following:

(function() {
  $(document).ready(function() {
    var 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;
      return $("body").load('/?date=' + m + 'main', $.mobile.changePage('/?date=' + m, "slide", slide, false));
    };
  });
}).call(this);

And this completes the call and transitions to the next page. However, there are caveats:

* The sliding animation doesn't take place. * The CSS stylesheets don't load on mobile and keep the "loading" box there. Yet it works in Webkit Nightly...

The structure of the layout looks like:

id=body data-role='page'
    data-role=header
    id=day_header data-role=header
    id=main data-role=content

Changing the 'load' method to a different selector doesn't work.

HALP!

I was doing something similar:

• Multiple AJAX requests functions combined into one?
• AJAX Request Help for next/previous page
• JQM (jQueryMobile) Dynamically added elements not displaying correctly and CSS is not applied
• JQM (jQueryMobile) Problem with AJAX content and focus()