2

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!

3
  • Did you take a look at the ajax call in firebug? Is the response correct?
    – naugtur
    Mar 31, 2011 at 10:02
  • 1
    Also: make sure you use JQMalpha3 and jquery 1.5.1
    – naugtur
    Mar 31, 2011 at 10:14
  • The AJAX call works in the browser and responds with the right document, but it's never loaded in. I've edited the question to include new information given that.
    – Matt
    Mar 31, 2011 at 13:45

1 Answer 1

1

I was doing something similar:

2
  • Hmm...I don't really think either of those apply in this situation. How did you figure out to complete it via jQuery Mobile?
    – Matt
    Mar 31, 2011 at 13:55
  • so I'm using the multi-page layout and the page I transition to does an ajax call to get the page content. Then I just refresh the page. I will update my answer to provide those links as well Mar 31, 2011 at 14:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.