Link to home
Start Free TrialLog in
Avatar of evibesmusic
evibesmusicFlag for United States of America

asked on

PHP redirect not working when using jQuery mobile?

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

ASKER CERTIFIED SOLUTION
Avatar of evibesmusic
evibesmusic
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of evibesmusic

ASKER

See answer above for solution.