0

Ajax/jQuery 的新手。到目前为止我尝试过的一切都失败了。如果登录和未登录，我有一个用于显示链接的动态标题。

使用简单的 php if else 来显示链接。

登录下拉，提交时调用 jQuery/Ajax 函数。成功后，我希望 LoggedOut 隐藏它所做的事情。但是 LoggedIn 拒绝显示自己。

我不能在 css 中使用 display: none 因为这个标题和链接应该始终存在。

请帮助我，这样我就可以停止皱眉和挠头:) 非常感谢。

success: function(data) {

        $("#statusLogin").hide();

        if(data.success == true){

            $('#loggedIn').show();  //GAAAAAAAAAAAH!!!!!
            $('#loginContent').slideToggle();
            $('#loggedOut').hide();

        }else{
           // alert("data.message... " + data.message);//undefined
            $("#error").show().html(data.message);
        }

    },

编辑：大量 HTML

    <?php if($general->loggedIn()){ ?>

<nav class = "memberHeaderArea" id="loggedIn">
    <ul>
        <li>
            <a href="userProfile.php?username=<?php echo $user['username'];?>">Profile<span class="user icon"></span></a>
        </li>
        <li>
            <a href="userLogout.php">Log out<span class="lock icon"> </span></a>
        </li>
    </ul>
</nav>

<?php
     //toplinks for when not logged in
 }else{ ?>

<nav class = "memberHeaderArea" id ="loggedOut">
    <ul>
        <li id="login">
            <a id="loginTrigger" href="#">Login<span class="unlock icon"></span></a>

            <div id="loginContent">

                <form method="post" action="" id="ourLoginFormID_JS">
                    <div id="error"></div>
                    <div class="ourContactFormElement2">
                        <label for="username">Username:</label>
                        <input type="text" id="username"  name="username" autocomplete="off" class="required" value="<?php if(isset($_POST['username'])) echo htmlentities($_POST['username']); ?>"  />
                    </div>

                    <div class="ourContactFormElement2">
                        <label for="password">Password:</label>
                        <input type="password" id="password" name="password" autocomplete="off" class="required"/>
                    </div>

                    <div class="ourContactFormElement2">
                        <label> &nbsp; </label>
                        <input type="submit" name="loginButton" id="loginButton" value="Login!" onclick="validLogin(); return false;"/>
                    </div>

                    <div id="statusLogin"></div>
                </form>

            </div>
        </li>

        <li>
            <a href="userRegister.php">Register<span class="adduser icon"></span></a>
        </li>


    </ul>
</nav>

 <?php
 }
 ?>
4

2 回答 2

1

I suspect this is the problem:

<?php if($general->loggedIn()){ ?>

<nav class = "memberHeaderArea" id="loggedIn">

The user isn't logged in when the page is initially sent, so there's no loggedIn element in the DOM. When you login via AJAX, that doesn't change what's in the DOM. So there's nothing to show.

You should send this HTML unconditionally, and just use CSS and JS to hide and show it.

To get the initial state into jQuery, you can do this:

$(function() {
    var loggedIn = <?php echo json_encode($general->loggedIn()); ?>;
    $("#loggedIn").toggle(loggedIn);
    $("#loggedOut").toggle(!loggedIn);
});

Another way you can do it is like this:

<nav class = "memberHeaderArea" id="loggedIn" <?php if (!$general->loggedIn()) echo 'style="display: none;"'; ?> >

...

<nav class = "memberHeaderArea" id="loggedOut" <?php if ($general->loggedIn()) echo 'style="display: none;"'; ?> >
于 2013-07-21T10:49:08.523 回答
0

The problem is that your initial page load doesn't include the loggedIn elements. You've got server-side code:

    <?php if($general->loggedIn()){ ?>

...that doesn't send those fields in the first place. Then you use an Ajax call to do the login, and that doesn't load any new content into the page, so then your jQuery $('#loggedIn') doesn't find the element because it doesn't exist. (You can confirm this by clicking your browser's "View Page Source" option (or equivalent) - you won't see that element).

You can fix this by either sending all of the HTML up front and then show or hide it as appropriate, and set the user name to display via jQuery/JS too, or by changing your Ajax to return the relevant HTML to be shown after logging in.

于 2013-07-21T10:48:42.523 回答