Question

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
 }
 ?>

Answer 1

我怀疑这是问题所在：

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

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

最初发送页面时用户未登录，因此DOM中没有loggedIn元素。当您通过AJAX登录时，这不会改变DOM中的内容。所以没有什么可以展示的。

您应该无条件地发送此HTML，并使用CSS和JS来隐藏和显示它。

要将初始状态转换为jQuery，您可以执行以下操作：

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

你能做到的另一种方式是：

<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;"'; ?> >

Answer 2

问题是您的初始页面加载不包含loggedIn元素。你有服务器端代码：

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

...首先不发送这些字段。然后使用Ajax调用来执行登录，并且不会将任何新内容加载到页面中，因此您的jQuery $('#loggedIn')找不到该元素，因为它不存在。（您可以通过单击浏览器的“查看页面源”选项（或等效选项）来确认 - 您将看不到该元素。

您可以通过预先发送所有HTML然后根据需要显示或隐藏它来修复此问题，并将用户名设置为通过jQuery / JS显示，或者通过更改Ajax以返回相关的HTML登录后显示。

为什么我的div不会在Ajax调用后显示出来？

2 个答案: