Solved

PHP redirect not working when using jQuery mobile?

Posted on 2013-11-07
2
1,344 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Echo vs ?><?php  html code 4 45
Should I use subdomains or addon domains? 3 33
Error in script 11 45
jquery - show / hide div depending on day and time 19 26
In this article we will discuss all things related to StageFright bug, the most vulnerable bug of android devices.
Since pre-biblical times, humans have sought ways to keep secrets, and share the secrets selectively.  This article explores the ways PHP can be used to hide and encrypt information.
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…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

911 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

19 Experts available now in Live!

Get 1:1 Help Now