evibesmusic
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:
Here is my "mobile_apps.php" code:
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>
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> </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>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER