Support for page redirection in Jquery mobile using Ajax calls


Looks like this would be a better solution - from the jQuery Mobile demos.

Basically you set a http header in your redirect and look for it on pagecontainerload. This should avoid weirdness with browser history.

Here's a a href to get to the page

<a href="redirect.php?to=redirect-target.html" 
   data-role="button" data-inline="true">Redirect</a>

In PHP you do this

// ************************************************************************
// The two-second sleep simulates network delays, hopefully causing a
// loading indicator message to appear on the client side.
// ************************************************************************

$dst = ( isset( $_GET[ "to" ] )
    ? $_GET[ "to" ]
    : ( isset( $_POST[ "to" ] )
        ? $_POST[ "to" ]
        : false ) );
if ( $dst ) {
    // **********************************************************************
    // The crucial line: Issue a custom header with the location to which the
    // redirect should happen. For simplicity, we simply redirect to whatever
    // location was specified in the request's "to" parameter, but real-world
    // scripts can compute the destination based on server-side state.
    // NB: This is not a HTTP redirect. As far as HTTP is concerned, this is
    // a normal request/response cycle with a status code of 200.
    // **********************************************************************
    header( "X-Redirect: " . $dst );

Then in your javascript you do this to intercept the URL and reset it.

$( document ).bind( "pagecontainerload", function( e, triggerData ) {

        // We can use this event to recognize that this is a redirect. The event is
        // triggered when jQuery Mobile has finished loading a page and inserting
        // it into the DOM, but before it has altered the browser history. In this
        // example the server helpfully returns a custom header. However, if you
        // don't have access to the server side, you can still examine
        //, which contains the page that was loaded, but which
        // has not yet been displayed or even recorded in the browser history. You
        // can also examine triggerData.xhr which contains the full XMLHTTPRequest.
        // If there is a way to recognize that this is not the expected page, you
        // can discard it and issue a second load() call for the page that really
        // needs to be displayed to the user, reusing the options from the overall
        // page change process.

        var redirect = triggerData.xhr.getResponseHeader( "X-Redirect" );
        if ( redirect ) {

            // We have identified that this page is really a redirect. Thus, we load
            // the real page instead, reusing the options passed in. It is important
            // to reuse the options, because they contain the deferred governing this
            // page change process. We must also prevent the default on this event so
            // that the page change process continues with the desired page.
            $( ).pagecontainer( "load", redirect, triggerData.options );

Note: at time of writing there was a broken link on the jquery demos page for this demo so I had to find it on github

The demo for 1.3 is still working


I am building a JQuery Mobile application based on a MVC framework.

My problem is that I cannot send "redirect" directives (either HTTP, Javascript, META-refresh) to the browser.

It results in the browser displaying a single line : "undefined".

Here is the code for the redirect on the server side :


I know that I can fix the problem by using data-ajax=false, but i don't want that since :

  • I want nice Jquery mobile transitions
  • This is much faster in Ajax
  • I don't want to wonder for each link whenever the framework might send a redirect

Is there a way to make JQuery Mobile handle correctly one kind of redirect ? either HTTP, HTML META or Javascript ?