Div not showing after being hidden JQuery
Question
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?
3 answers
solution1
5 ACCPTED 2013-07-20 16:32:17
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.
solution2
2 2013-07-20 16:33:17
You can put show statement in window.load instead of DOM ready so that it is executed after admin.js is loaded
$(window).load(function() {
$('#aubd').show();
});
As TJ Crowder pointed out there is race condition in event that could be avoided using setTimeout.
$(window).load(function() {
setTimeout(function() {
$('#aubd').show();
}, 1);
});
solution3
1 2013-07-20 16:37:33
My suggestion, which might fix your problem is to have it hidded in CSS.
Using #aubd {display:none;} then the element is hidden already when the page loads, avoiding sometimes showing up and being hidden flashing.
This fixes it and I think it's a better way to code. The answer "why" it doesn't work I think TJ Crowder answered.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.