jQTouch and PHP Login Form

Question

I'm working on a web app for the iPhone using the jQTouch framework. I've found a similar example to how I want to setup my login page at:

http://www.golen.net/blog/2010/05/29/jqtouch-ajax-php-login-form/

And have downloaded the sample php files: http://www.golen.net/blog/wp-content/uploads/2010/05/jqtouch.zip

In video 3 that accompanies this blog it shows the login form does not appear unless you click the login link. However I've downloaded the files and uploaded them to 2 of my servers and the login form is always appearing, regardless of whether I've logged in or not. As far as I can tell the downloadable php files are the same as the content in the video but I can't prevent the login form from showing all the time.

Anyone have any ideas. Here's the index.php page which includes the login form as well:

<?php

$loggedIn = (isset($_COOKIE['loggedin']) && $_COOKIE['loggedin'] == 'true')?true:false; ?>

    <title>jQTouch &beta;</title>
    <style type="text/css" media="screen">@import "jqtouch/jqtouch.css";</style>
    <style type="text/css" media="screen">@import "themes/jqt/theme.css";</style>
    <script src="jqtouch/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="jqtouch/jqtouch.js" type="application/x-javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
        var jQT = new $.jQTouch({
            icon: 'jqtouch.png',
            addGlossToIcon: false,
            startupScreen: 'jqt_startup.png',
            statusBar: 'black',
            preloadImages: [
                'themes/jqt/img/back_button.png',
                'themes/jqt/img/back_button_clicked.png',
                'themes/jqt/img/button_clicked.png',
                'themes/jqt/img/grayButton.png',
                'themes/jqt/img/whiteButton.png',
                'themes/jqt/img/loading.gif'
                ]
        });
        // Some sample Javascript functions:
        $(function(){
        });
    </script>
</head>
<body>
    <div id="jqt">
        <div id="home">
            <div class="toolbar">
                <h1>Welcome</h1>
                <a class="back" href="#home">Home</a>
            </div>
            <?php if (!$loggedIn) {?>
            <ul class="rounded">
                <li class="forward"><a href="#login">Log In</a></li>
            </ul>
            <?php } else { ?>
            <ul class="rounded">
                <li class="forward"><a href="doLogoff.php" rel="external">Log off</a></li>
            </ul>
            <?php } ?>
        </div>
        <form id="login" action="doLogin.php" method="POST" class="form">
            <div class="toolbar">
                <h1>Login</h1>
                <a class="back" href="#">Back</a>
            </div>
            <ul class="rounded">
                <li><input type="text" name="username" value="" placeholder="Username" /></li>
                <li><input type="password" name="password" value="" placeholder="Password" /></li>
            </ul>
            <a style="margin:0 10px;color:rgba(0,0,0,.9)" href="#" class="submit whiteButton">Submit</a>
        </form>
    </div>
</body>

Answer 1

you just have to modify the code a bit... remove the jqt div, and put in a div id'ed "login... like this:

<body>

        <div id="home">
            <div class="toolbar">
                <h1>Welcome</h1>
                <a class="back" href="#home">Home</a>
            </div>
            <?php if (!$loggedIn) {?>
            <ul class="rounded">
                <li class="forward"><a href="#login">Log In</a></li>
            </ul>
            <?php } else { ?>
            <ul class="rounded">
                <li class="forward"><a href="doLogoff.php" rel="external">Log off</a></li>
            </ul>
            <?php } ?>
        </div>

     <div id="login">
        <form id="login" action="doLogin.php" method="POST" class="form">
            <div class="toolbar">
                <h1>Login</h1>
                <a class="back" href="#">Back</a>
            </div>
            <ul class="rounded">
                <li><input type="text" name="username" value="" placeholder="Username" /></li>
                <li><input type="password" name="password" value="" placeholder="Password" /></li>
            </ul>
            <a style="margin:0 10px;color:rgba(0,0,0,.9)" href="#" class="submit whiteButton">Submit</a>
        </form>
    </div>

</body>

Hope that helps you :-)

jQTouch and PHP Login Form

Question

1 answers

solution1
1 2011-02-02 22:50:50

jQTouch and PHP Login Form

Question

1 answers

solution1 1 2011-02-02 22:50:50

solution1
1 2011-02-02 22:50:50