4

I can't seem to make a div appear after making it invisible in onload in the body. This should be simple to fix, I just can't seem to figure it out.

PHP

<!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>
<?php include '/include/init.php'; ?>
<script type="text/javascript" src="/js/jqeury.js"> </script>
<script type="text/javascript" src="/js/accounts.js"> </script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="/css/style.css" />
<title>Accounts</title>
</head>

<body onload="hide_buttons()">
    <div class="accounts_headerDiv">
        <div class="ahd_left">
            <img src="/images/launcher2.png" class="accounts_logo"/>
            <p class="title_para"> Accounts </p>
        </div>
        <div class="ahd_right">
            <div class="searchDiv">
                <p class="searchPara"> Search </p>
                <input type="text" id="search_input" placeholder="search" class="search_input"/>
                <img src="/images/search_icon.png" class="search_icon"/>
            </div>
            <div class="userDiv">  
                <a href="#"><img src="/images/default-portrait-icon.jpg" align="right" class="user_picture"  /> </a>            
                <p class="userInfo"><?php username($db);?></p>
                <a href="/functions/logout.php"> Log out </a>                                              
            </div>
            <div class="adminUserButtonsDiv" id="aubd">
                <input id="createUser" name="createUser" value="Create" type="button" class="admin_button">
                <br />
                <input id="editUser" name="editUser" value="Edit" type="button" class="admin_button">
            </div>
        </div>
    </div>    
    <hr />
<?php if (is_admin($db) === 'true') { ?>    
    <script type="text/javascript" src="/js/admin.js"> </script>
<?php } ?>
</body>
</html>

The hide_buttons() function is in accounts.js here

function hide_buttons() {
    $('#aubd').hide();      
}

Then I want to make the div reappear when I call admin.js which holds this function

$(document).ready(function() {
    $('#aubd').show();
});

The overall goal here is to check if the user has the role of "admin" and hide or show the div and buttons contained within based on this check. So what am I doing wrong? Also is this the correct way or should I be using AJAX for this?

4

3 回答 3

7

该onload事件在页面加载周期的后期发生。jQuery 的ready回调发生得更早（通常）。所以发生的事情是您的show呼叫发生在您的hide呼叫之前。

最好的解决方法是不使用onload. 相反，只需输出隐藏的 div：

<div id="aubd" style="display: none">....

或者在你的 CSS 中：

#aubd {
    display: none;
}

然后您的ready处理程序将显示它就好了。

如果您无法更改onload，则可以更改admin.js以便show稍后调用：

$(window).load(function() {
    setTimeout(function() {
        $('#aubd').show();
    }, 0);
});

具有setTimeout非常非常短的超时值是为了避免与load事件处理程序的竞争条件。（jQuery 通过addEventListener/连接处理程序attachEvent。一些浏览器首先触发onload处理程序，然后addEventListener/attachEvent处理程序。其他人则以相反的方式执行此操作。）但是，最好首先通过不同的方式隐藏 div 来完全避免这种情况。

于 2013-07-20T16:32:17.053 回答
2

您可以将 show 语句放入 window.load 而不是 DOM 就绪，以便在加载 admin.js 后执行它

$(window).load(function() {
    $('#aubd').show();
});

正如TJ Crowder指出的那样，使用 setTimeout 可以避免事件中的竞争条件。

$(window).load(function() {
    setTimeout(function() {
        $('#aubd').show();
    }, 1);
});
于 2013-07-20T16:33:17.677 回答
1

我的建议（可能会解决您的问题）是将其隐藏在 CSS 中。

使用#aubd {display:none;}then 元素在页面加载时已经隐藏，避免有时显示和隐藏闪烁。

这解决了它，我认为这是一种更好的编码方式。答案“为什么”它不起作用我认为TJ Crowder回答了。

于 2013-07-20T16:37:33.517 回答