Geek Answers Handbook

Support for page redirection in jQuery mobile using Ajax calls

I am creating a jQuery Mobile application based on the MVC framework.

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

As a result, the browser displays one line: " undefined ".

Here is the server side redirect code:

<html><head> <script>location.href='$url'</script> </head></html>

I know that I can fix the problem using data-ajax=false , but I do not want this, since:

  • I need jQuery mobile transitions
  • It is much faster in Ajax.
  • I don’t want to be surprised at every link whenever the infrastructure can send a redirect

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

+7
source share
2 answers

Using the jQuery mobile community , I came up with an elegant solution that can handle both standard HTML redirection ( data-ajax="false" ) and JQM pages.

The trick is that when performing JQM transitions, JQM loads the HTML result with javascript; looks for the `data-role = 'page' page and replaces it in the DOM: ignores the HTML header.

Therefore, we need to put the standard Javascript redirect in the header and load the JQM page on the dummy page.

Here is the redirect method code in my MVC pattern:

 <html> <head> <!-- HTML reload (for data-ajax=false) --> <script> location.href='<?= $url ?>' </script> </head> <body> <!-- Change page : JQueryMobile redirect --> <div data-role="page" id="redirect"> <script> $.mobile.changePage('<?= $url ?>'); </script> </div> </body> </html>

I hope this helps someone.

+8
source

It seems like this would be the best solution - from the jQuery Mobile demos.

Basically you configure the http header in your redirect and watch it on pagecontainerload . This should avoid weirdness with browser history.

Here a a href to go to the page

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

In PHP you do it

 <?php // ************************************************************************ // The two-second sleep simulates network delays, hopefully causing a // loading indicator message to appear on the client side. // ************************************************************************ sleep(2); $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 "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 will 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 // triggerData.page, 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. $( e.target ).pagecontainer( "load", redirect, triggerData.options ); e.preventDefault(); } });

Note: at the time of writing this demo page, there was an incorrect link to the jquery demo page, so I had to find it on github

https://github.com/jquery/jquery-mobile/blob/master/demos/navigation-php-redirect/index.php https://github.com/jquery/jquery-mobile/blob/master/demos/navigation -php-redirect / redirect.php

The demo for 1.3 is still working http://demos.jquerymobile.com/1.3.0/docs/examples/redirect/

+1
source

More articles:


All Articles