Menu
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?
532
The onload event happens very late in the page load cycle. jQuery's ready callback happens much earlier (normally). So what's happening is that your show call is happening before your hide call.
The best fix is to not use onload. Instead, just output the div hidden:
<div id="aubd" style="display: none">....
Or in your CSS:
#aubd {
display: none;
}
Then your ready handler will show it just fine.
If you can't change the onload, you can change admin.js so it calls show later:
$(window).load(function() {
setTimeout(function() {
$('#aubd').show();
}, 0);
});
The setTimeout with the very, very short timeout value is there to avoid race conditions with the load event handlers. (jQuery hooks up the handler via addEventListener / attachEvent. Some browsers fire the onload handler first, and then the addEventListener / attachEvent handlers. Others do it the other way around.) But again, it's best to avoid this entirely by hiding the div differently in the first place.
88
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
