Solved

PHP redirect not working when using jQuery mobile?

Posted on 2013-11-07
2
1,311 Views
Last Modified: 2013-11-07
Experts,

I've used jQuery Mobile to create a landing page for my company (which is behind a firewall so I can not share - FYI). The page contains a series of links. One of these links is called "Mobile Apps" and it takes you to my page "mobile_apps.php".

Using the awesome php-mobile-detect script I am trying to determine if a mobile device is being used, and if so, which OS is being used (iOS or Android), then I am trying to redirect users to either iTunes or the Google Play store to download the appropriate app for their device.

The problem is that when I click on the "Mobile Apps" link on the landing page from my iPad, jQuery Mobile shows the standard "Error Loading Page" message. This leads me to believe that I am not using my PHP redirect correctly, or in a way that jQuery Mobile likes.

The odd thing here is that if I navigate directly to the "mobile_apps.php" page via my iPad, the redirect to the iTunes App stores works as intended.

This makes me pretty sure that I don't want to use the default AJAX method to call the "mobile_apps.php" page but, I am not sure how to remedy this or if this is the correct approach?

Can anyone assist?

Here is my landing page's code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<link rel="stylesheet" href="css/grid.css" />
<link rel="stylesheet" href="css/jqm_demos.css" />
<link rel="stylesheet" href="css/kp_custom.css" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body topmargin="0" class="background-image">
<!-- OUR FACILITY PAGE START -->
<div data-role="page" id="Our_Facility" data-title=""> 
	<!-- INCLUDE PANELS -->
	<?php include('scripts/panels.php'); ?>
    <!-- END INCLUDE PANELS --> 
    
    <div data-role="content">
        
        <ul data-role="listview" data-inset="true">
            <li>
                <a href="our_doctors.php">
                    <img src="images/tile_ourdoctors.png" alt="Our Doctors">
                    <h2>Meet Your Doctor</h2>
                    <p>Find your doctor online</p>
                </a>
            </li>
            <li>
                <a href="health_topics.php">
                    <img src="images/tile_healthtopics.png" alt="Health Topics">
                    <h2>Your Health</h2>
                    <p>Search for health topics and more</p>
                </a>
            </li>
            <li>
                <a href="mobile_apps.php">
                    <img src="images/tile_mobileapps.png" alt="Mobile Apps">
                    <h2>Mobile Apps</h2>
                    <p>Download mobile apps for Android and iPhone</p>
                </a>
            </li>            
        </ul>
    </div>       
        
	<!-- INCLUDE FOOTER -->
	<?php include('scripts/footer.php'); ?>
    <!-- END INCLUDE FOOTER -->
        
</div>
<!-- OUR FACILITY FINISH -->
</body>
</html>

Open in new window


Here is my "mobile_apps.php" code:

<?php
/**
 * MIT License
 * ===========
 *
 * Permission is hereby granted, free of charge, to any person obtaining
 * a copy of this software and associated documentation files (the
 * "Software"), to deal in the Software without restriction, including
 * without limitation the rights to use, copy, modify, merge, publish,
 * distribute, sublicense, and/or sell copies of the Software, and to
 * permit persons to whom the Software is furnished to do so, subject to
 * the following conditions:
 *
 * The above copyright notice and this permission notice shall be included
 * in all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
 * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
 * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
 * IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
 * CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
 * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 *
 * -----------------------------------------------------------------------
 * The demo is running all the Mobile_Detect's internal methods.
 * Here you can spot detections errors instantly.
 * -----------------------------------------------------------------------
 *
 * @author      Serban Ghita <serbanghita@gmail.com>
 * @license     MIT License https://github.com/serbanghita/Mobile-Detect/blob/master/LICENSE.txt
 *
 */

//REQUIRE MOBILE_DETECT.php SCRIPT
require('scripts/Mobile_Detect.php');
//CREATE A NEW INSTANCE OF Mobile_Detect
$detect = new Mobile_Detect;

//TEST TO SEE IF MOBILE DEVICE
$mobile_check = $detect->isMobile();
//TEST FOR OPERATING SYSTEM
$iOS_check = $detect->isiOS();
$Android_check = $detect->isAndroid();

//IF NOT A MOBILE DEVICE, SHOW STANDARD PAGE
if($mobile_check == false){}
//IF MOBILE DEVICE
else{
	//IF OS IS NEITHER iOS OR ANDROID SHOW STANDARD PAGE
	if($iOS_check == false && $Android_check == false){}
	//IF OS EQUALS iOS SEND TO iTUNES STORE FOR DOWNLOAD
	elseif($iOS_check == true){header('location: https://itunes.apple.com');}
	//IF OS EQUALS ANDROID SEND TO PLAY STORE FOR DOWNLOAD
	elseif($Android_check == true){header('location: https://play.google.com');}
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body topmargin="0">

<!-- MOBILE APPS PAGE START -->
<div data-role="page" id="Mobile_Apps" style="background-color:#efefef;">
	<!-- INCLUDE PANELS -->
	<?php include('scripts/panels.php'); ?>
    <!-- END INCLUDE PANELS -->
    
    <!-- HEADER -->
    <div data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false" style="background-image:none !important; background-color:#f6f6f6; border:none;">
        <h1>&nbsp;</h1>
        <a href="#rightpanel1" data-role="button" data-icon="bars">Menu</a>
    </div>
    <!-- END HEADER -->    

	<div style="background-color:#efefef;">
        <div data-role="content">
           SOME TEXT...
        </div>
        
	<!-- INCLUDE FOOTER -->
	<?php include('scripts/footer.php'); ?>
    <!-- END INCLUDE FOOTER -->
    
    </div>
</div>
<!-- MOBILE APPS FINISH -->
</body>
</html>

Open in new window

0
Comment
Question by:evibesmusic
  • 2
2 Comments
 

Accepted Solution

by:
evibesmusic earned 0 total points
ID: 39631932
@All:

Sometimes just posting the question then stepping away helps...all I had to do was disable page loads via AJAX.

Applied this code to all pages:

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).bind("mobileinit", function () {
    $.mobile.ajaxEnabled = false;
});
</script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
0
 

Author Closing Comment

by:evibesmusic
ID: 39631935
See answer above for solution.
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Recently, we decided that in order to stay competitive in today's IT world, we were going to have to develop and deploy a mobile app for our users and do it quickly. We felt that we were already behind the curve. Users of technology today are mov…
PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now