?
Solved

PHP redirect not working when using jQuery mobile?

Posted on 2013-11-07
2
Medium Priority
?
1,455 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to implement server side field validation and display customized error messages to the client.
There are times when I have encountered the need to decompress a response from a PHP request. This is how it's done, but you must have control of the request and you can set the Accept-Encoding header.
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.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

801 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