CODEWITHSUNDEEP
javascriptjqueryajaxjquery-mobile
Matt
Matt

Reputation: 155

jQuery Mobile - Transitions and Page Changes

I'm trying to have jQuery mobile realize that when I click a certain link, call the server 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!

Upvotes: 2

Views: 2213

Answers (1)

Phill Pafford
Phill Pafford

Reputation: 85378

I was doing something similar:

Upvotes: 1

Related Questions