CODEWITHSUNDEEP
phpjqueryhttp-redirectheader
user1794239
user1794239

Reputation: 13

Combining PHP and Jquery Mobile redirect returns to earlier page

In a mobile web app that I'm building I keep getting the same problem over and over again. In my index.php I redirect to the login.php if no value in my session is set. After the user logs in I redirect back to index.php. I've tried this with a header redirection via PHP as well as via a $.mobile.changePage() method from JQuery.

What happens with both ways Is that at first the page division of #home loads. When I use my Navbar to change to a new page division in the same multi-page it loads the login.php again.

index.php 

session_start();
require "init.inc"; 
$email = $_SESSION['email'];
if(!isset($email)){header("Location: login.html");}
else{
    echo
    '<!DOCTYPE hmtl>
    <html lang="en">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
            <meta name="apple-mobile-web-app-capable" content="yes">
            <meta name="apple-mobile=web-a-status-bar-style" content="black">

            <!-- link naar icons-->
            <link rel="apple-touch-icon" sizes="114x114" hrf="apple-touch-icon.png"/>

            <title>Loyalty Barcode</title>

            <!-- link naar stylesheet -->
            <link rel="stylesheet" href="css/mobile.css" />
            <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css"/>
            <link rel="stylesheet" href="css/themes/loyalty.css" />

            <!-- link naar de jquery en javascript -->
            <script src="/js/functions.js"></script>
            <script src="/js/Jquery.loadphp.js"></script>
            <script src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
            <script src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>
        </head>
        <body>

        <!--/////////////////////////////////// #home (barcode) \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\-->
        <div data-role="page" id="home">    
            <!-- header -->
            <header data-role="header" data-theme="a">
                <h1>Loyalty Home</h1>
                <a href="#instellingen" data-role="button" data-mini="true" data-theme="b" data-inline="true" data-iconpos="notext" data-icon="gear" class="ui-btn-right"></a>
            </header>
            <!-- einde header -->

            <article id="barcode">
                <!-- Content -->
                <div class="content">
                    <p>Hier vind u, uw Loyalty barcode. Met deze barcode kunt u de passen die u van winkels heeft gekregen aanmelden.</p>
                    <br/>
                    <img src="images/barcode.png" height="150px" width="200px"/>
                </div>
                <!-- Einde Content -->
                <article id="leeg">
                </article>
                <!-- Footer -->
                <footer data-role="footer">
                    <nav data-role="navbar">
                        <ul>
                            <li><a href="#kortingen-algemeen" data-icon="star" data-theme="b" >Kortingen</a></li>
                            <li><a href="#barcode" class="ui-btn-active ui-btn-persistent" data-icon="home" data-theme="b">Barcode</a></li>
                            <li><a href="#boodschappen-lijstje" data-icon="grid" data-theme="b">Boodschappen</a></li>
                        </ul>
                    </nav>
                </footer>
                <!-- Einde footer -->
            </article>
        </div>
    <!--\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ Einde van #home /////////////////////////////////////-->

    <!--/////////////////////////////////// #kortingen-algemeen \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\-->
            <div data-role="page" id="kortingen-algemeen">
            <!-- header -->
            <header data-role="header" data-theme="a">
                <a data-rel="back" data-role="button" data-theme="b" data-inline="true" data-iconpos="notext" data-icon="arrow-l" class="ui-btn-left"></a>
                <h1>Loyalty Kortingen</h1>
                <a href="#instellingen" data-role="button" data-theme="b" data-inline="true" data-iconpos="notext" data-icon="gear" class="ui-btn-right"></a>
            </header>
            <!-- einde header -->
            <article id="kortingen">
            <!-- Content -->
                <div class="content">
                    <div data-role="collapsible-set" data-theme="b" data-content-theme="d" data-inset="true">   

                        <ul data-role="listview" data-split-icon="plus" data-split-theme="c" data-inline="true">
                            <li>
                                <img src="images/ah-logo.png" />
                                <h3>Albert Heijn</h3>
                            </li>
                        </ul>
                        <ul data-role="listview" data-split-icon="plus" data-split-theme="c" data-inline="true">
                            <li>
                                <img src="images/ah-komkommers.jpg" />
                                <h3>Komkommers, 0,39 cent</h3>
                            </li>
                        </ul>
                    </div>
                </div>
            <!-- Einde content -->
                <article id="leeg">
                </article>
            <!-- Footer -->
                <footer data-role="footer">
                    <nav data-role="navbar">
                        <ul>
                            <li><a href="#kortingen-algemeen" class="ui-btn-active ui-btn-persistent" data-icon="grid" data-theme="a">Algemeen</a></li>
                            <li><a href="#kortingen-persoonlijk" data-icon="check" data-theme="a">Persoonlijk</a></li>
                        </ul>
                    </nav>
                </footer>
            </article>
            <!-- Einde footer -->
            </div>
            <!--\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ Einde van #kortingen-algemeen /////////////////////////////////////-->

                <!-- ***********************************  #kortingen-persoonlijk ************************************* -->
                <div data-role="page" id="kortingen-persoonlijk">
                    <!-- header -->
                    <header data-role="header" data-theme="b">
                        <a data-rel="back" data-role="button" data-theme="b" data-inline="true" data-iconpos="notext" data-icon="arrow-l" class="ui-btn-left">Terug</a>
                        <h1>Loyalty Kortingen</h1>
                        <a href="#instellingen" data-role="button" data-theme="b" data-inline="true" data-iconpos="notext" data-icon="gear" class="ui-btn-right">Instellingen</a>
                    </header>
                    <!-- einde header -->
                    <article id="kortingen">
                    <!-- Content -->
                        <div class="content">
                        Hier komen de verschillende persoonlijke kortingen te staan.
                        </div>
                    <!-- Einde content -->
                        <article id="leeg">
                        </article>
                    <!-- Footer -->
                        <footer data-role="footer">
                            <nav data-role="navbar">
                                <ul>
                                    <li><a href="#kortingen-algemeen" data-icon="grid" data-theme="a">Algemeen</a></li>
                                    <li><a href="#kortingen-persoonlijk" class="ui-btn-active ui-btn-persistent" data-icon="check" data-theme="a">Persoonlijk</a></li>
                                </ul>
                            </nav>
                        </footer>
                    </article>
                    <!-- Einde footer -->
                </div>
<!--*********************************** Einde #kortingen-persoonlijk *********************************** -->
                           </body>  
   </html>   
?>

login.php

session_start();
require "init.inc";

$email=$_POST['email']; 
$wachtwoord=$_POST['wachtwoord']; 

    if (($email&&$wachtwoord) && (isset($_POST['wachtwoord'])))
{
$query = mysql_query("SELECT * FROM user WHERE email='$email'");
$numrows = mysql_num_rows($query);
if ($numrows!=0)//als het aantal rijen niet 0 is
    {
        while($row = mysql_fetch_assoc($query))//zolang er rijen zijn
        {
            $dbid = $row['userId'];
            $dbemail = $row['email']; /
            $dbwachtwoord = $row['wachtwoord']; 
        }

        if ($email==$dbemail&&$wachtwoord==$dbwachtwoord)
        {

                $_SESSION['email']=$dbemail;
                echo'
                    <header><link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css"/></header>
                    <body><script>$.mobile.changePage( "index.php");</script></body>
                ';
                exit;
        }
        else 
        {
            echo"Verkeerd wachtwoord ingevuld. Probeer het opnieuw a.u.b.";
        }   
    }
}

Upvotes: 1

Views: 1866

Answers (1)

Zebaz
Zebaz

Reputation: 1563

There are multiple problems with the code you've posted here. So excuse me if I'm stating the obvious here.

First of all, you are redirecting to login.html whereas you mention login.php.

Change

if(!isset($email)){header("Location: login.html");}

To

if(!isset($email)){header("Location: login.php");}

Secondly, don't forget to remove the "/" typo in login.php:

 $dbemail = $row['email']; /

By the way, it's best practice not to echo all of your HTML layout code, I see you're using that in index.php.

Finally: You can use 

header("Location: index.php");

To navigate between your login and index page without any problems. I've modified your code, it's currently live at the following URL: click here for a demo

For your reference, find my (working) modified login.php code below:

Login.php

NOTE: I've added a form to demonstrate the functionality

<?php
session_start();
require "init.inc";
if(isset($email)){header( "Location: index.php" ); }
$email=$_POST['email']; 
$wachtwoord=$_POST['wachtwoord']; 

/*****************************************************************************************************
 * 2-11-2012 Shinigami: I'm checking only if the session variable "email" and "wachtwoord" is set,   *
 * I'm not using any database verification at the moment, you should implement that further yourself *
 * Uncommenting the code below should work for you I suppose                                         *
 *****************************************************************************************************/
if (($email&&$wachtwoord))
{



/*
$query = mysql_query("SELECT * FROM user WHERE email='$email'");
$numrows = mysql_num_rows($query);
if ($numrows!=0)//als het aantal rijen niet 0 is
    {
        while($row = mysql_fetch_assoc($query))//zolang er rijen zijn
        {
            $dbid = $row['userId'];
            $dbemail = $row['email']; 
            $dbwachtwoord = $row['wachtwoord']; 
        }

        if ($email==$dbemail&&$wachtwoord==$dbwachtwoord)
        {


    if ($email){ //not neccessary
                */

                /*******************************************************
                * 2-11-2012 Shinigami: This is where the magic happens *
                ********************************************************/
                $_SESSION['email']=$email;
                header( "Location: index.php" );

            /*  

                }
        }
      else 
       {
         echo"Verkeerd wachtwoord ingevuld. Probeer het opnieuw a.u.b.";
       }  */ 
    //}
}

?>
<html>
<head>
<title>Login page</title>
</head>
<body>
<form method="post" action="login.php">
<input type="text" name="email"></input>
<input type="text" name="wachtwoord"></input>
<input type="submit">
</form>
</body>
</html>

Upvotes: 1

Related Questions