JavaScript - show hide divs

sabecs
sabecs used Ask the Experts™
on

Hi,
I have some code below which works fine if I have just one show_BlockUser div on the page, but how can I alter it to work for multiple divs?

I was thinking of using my_id in the div id, something like id="show_BlockUser[6786]" or id="show_BlockUser_6786" but can't work out how to modify the code below to include my_id?

I hope this makes sense.

show_BlockUser.style.display = "none";
show_UnBlockUser.style.display = "block";


//Starts the AJAX request.
function BlockUser(my_id, members_id,members_name){      

      if (interestReq.readyState == 4 || interestReq.readyState == 0) {

               show_BlockUser.style.display = "none";
               show_UnBlockUser.style.display = "block";
               interestReq.open("GET", 'ajax/block_user.php?block_user=Y&my_id=' + my_id + '&members_id=' + members_id + '&members_name=' + members_name, true);
               interestReq.onreadystatechange = getinterestsResponse;
               interestReq.send(null);


      }            
}


//I use PHP to loop through and create divs below
<div id="show_UnBlockUser" >
<a class="main_menu2" href="javascript:void(0)" onClick="javascript:UnBlockUser('<?php echo $id; ?>','<?php echo $user_id; ?>','<?php echo $friends_name; ?>')" title="UnBlock User">UnBlock User</a>
</div>

<div id="show_BlockUser" style="display:none">
<a class="main_menu2" href="javascript:void(0)" onClick="javascript:BlockUser('6786','17','kateanad')" title="Block User">Block User</a>
</div>

<div id="show_UnBlockUser" style="display:none">
<a class="main_menu2" href="javascript:void(0)" onClick="javascript:UnBlockUser('6786','17','kateanad')" title="Block User">Block User</a>
</div>

<div id="show_BlockUser" style="display:none">
<a class="main_menu2" href="javascript:void(0)" onClick="javascript:BlockUser('454','17','kateanad')" title="Block User">Block User</a>
</div>

<div id="show_UnBlockUser" style="display:none">
<a class="main_menu2" href="javascript:void(0)" onClick="javascript:UnBlockUser('454','17','kateanad')" title="Block User">Block User</a>
</div>
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
leakim971Multitechnician
Top Expert 2014
Commented:
Using :
<div class="user">
    SABECS
    <a class="main_menu2" href="javascript:void(0)" onClick="xBlockUser(this,'6786','17','sabecs')" title="Block User">Block User</a>
</div>

<div class="user">
    LEAKIM971
    <a class="main_menu2" href="javascript:void(0)" onClick="xBlockUser(this,'6786','18','leakim971')" title="Block User">Block User</a>
</div>

Open in new window

Check this :
function xBlockUser(linkRef, my_id, members_id, members_name) {
    if (interestReq.readyState == 4 || interestReq.readyState == 0) {
        if(linkRef == "Block User") {
            linkRef.innerHTML = "UnBlock User";
            var operation = 'N';
        }
        else {
            linkRef.innerHTML ="Block User";
            var operation = 'Y';
        }
        interestReq.open("GET", 'ajax/block_user.php?block_user=' + operation + '&my_id=' + my_id + '&members_id=' + members_id + '&members_name=' + members_name, true);
        interestReq.onreadystatechange = getinterestsResponse; 
        interestReq.send(null);
    }    
}

Open in new window


http://www.quirksmode.org/js/this.html

Author

Commented:
Thanks leakim971 for your help, but is it possible to just update the ajax to include my_id to keep things simple?
 
<div id="show_BlockUser_6786" style="display:none">
<a class="main_menu2" href="javascript:void(0)" onClick="javascript:BlockUser('6786','17','kateanad')" title="Block User">Block User</a>
</div>

//Starts the AJAX request.
function BlockUser(my_id, members_id,members_name){      

      if (interestReq.readyState == 4 || interestReq.readyState == 0) {

               show_BlockUser+my_id+.style.display = "none";
               show_UnBlockUser+my_id+.style.display = "block";
               interestReq.open("GET", 'ajax/block_user.php?block_user=Y&my_id=' + my_id + '&members_id=' + members_id + '&members_name=' + members_name, true);
               interestReq.onreadystatechange = getinterestsResponse;
               interestReq.send(null);


      }            
}
leakim971Multitechnician
Top Expert 2014

Commented:
we still use my_id and the others params in my example, there's just an additional param : a ref on the link we clicked, depend the content/text of the link we decide the new text and the operation (block_use set to Y or N)
Amazon Web Services

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

Author

Commented:
Thanks again leakim971, I can do it your way, but it involves more code changes from my end, just wondering why this won't work?

//Starts the AJAX request.
function BlockUser(my_id, members_id,members_name){      

      if (interestReq.readyState == 4 || interestReq.readyState == 0) {

               showblock_id = 'show_BlockUser_' + my_id + '.style.display = "none"';
               unshowblock_id = 'show_UnBlockUser_' + my_id + '.style.display = "block"';
               showblock_id;
               unshowblock_id;
               interestReq.open("GET", 'ajax/block_user.php?block_user=Y&my_id=' + my_id + '&members_id=' + members_id + '&members_name=' + members_name, true);
               interestReq.onreadystatechange = getinterestsResponse;
               interestReq.send(null);


      }            
}

 <div id="show_UnBlockUser_<?php echo $id; ?>" <?php if($blocked_count > 0){ echo 'style="display:block"' ;} else { echo 'style="display:none"'; } ?>>
<a class="main_menu2" href="javascript:void(0)" onClick="javascript:UnBlockUser('<?php echo $id; ?>','<?php echo $user_id; ?>','<?php echo $friends_name; ?>')" title="UnBlock User">UnBlock User</a>
</div>
Sandeep KothariProject Lead

Commented:
well... the above code won't work for the simple reason that onclick you are calling UnBlockUser function and the function you have defined is named BlockUser ....

Author

Commented:
Sorry, that should have been

<div id="show_BlockUser_<?php echo $id; ?>" ><a class="main_menu2" href="javascript:void(0)" onClick="javascript:BlockUser('<?php echo $id; ?>','<?php echo $user_id; ?>','<?php echo $friends_name; ?>')" title="Block User">Block User</a>
</div>
Sandeep KothariProject Lead

Commented:
Ok.. in that case it should work all fine... can you try alerting the id in the function and check if you are receiving it properly ? ...

Author

Commented:
Yes,I have tried alert which displays -- > show_BlockUser_3626.style.display = "none"
But for some reason the code is not executed?

<div id="show_BlockUser_3626" style="display:block" >
<a class="main_menu2" href="javascript:void(0)" onClick="javascript:BlockUser('3626','17','SEER')" title="Block User">Block User</a>
</div>


leakim971Multitechnician
Top Expert 2014

Commented:
>But for some reason the code is not executed?

please provide a link to see your page or right click on it, locate the part where you've your DIVs

because, there's no error here : http://jsfiddle.net/UAZpC/

Author

Commented:
Please see code attached, I want to initially display the block button, then toggle to unblock if clicked on.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">

a.main_menu2, a.main_menu2:visited, div.main_menu2{
	display: block;
	float:left;
	claer:left;
	margin-right:10px;
	height: 30px;
	color: #FFF;
	width: 114px;
	text-align: center;
	font-family: Tahoma, Arial, Helvetica-Normal, sans-serif;
	font-size: 14px;
	font-weight: normal;
	text-decoration: none;
	background-color: #F30;
	background-position: center;
	line-height: 30px;
}

a.main_menu2:hover{
	color: #FFFFFF;
	background-color: #951E00;
}

</style>
 
  <script type='text/javascript'>
 
function BlockUser(my_id, members_id,members_name){      
    alert("myid : " + my_id + "\nmembersid : " + members_id + "\nmembers_name : " + members_name )
               showblock_id = 'show_BlockUser_' + my_id + '.style.display = "none"';
               unshowblock_id = 'show_UnBlockUser_' + my_id + '.style.display = "block"';
               showblock_id;
               unshowblock_id;
			   //this code below works but I can't hard code it as id changes?
			   show_BlockUser_3626.style.display = "none";
			   show_UnBlockUser_3626.style.display = "block";
}

function UnBlockUser(my_id, members_id,members_name){      
    alert("myid : " + my_id + "\nmembersid : " + members_id + "\nmembers_name : " + members_name )
               showblock_id = 'show_BlockUser_' + my_id + '.style.display = "block"';
               unshowblock_id = 'show_UnBlockUser_' + my_id + '.style.display = "none"';
               showblock_id;
               unshowblock_id;
			   //this code below works but I can't hard code it as id changes?
			   show_BlockUser_3626.style.display = "block";
			   show_UnBlockUser_3626.style.display = "none";
}
</script>
</head>
<body>
<div style="clear:both">User 3626</div>
  <div id="show_BlockUser_3626" style="display:block" >
    <a class="main_menu2" href="javascript:void(0)" onClick="javascript:BlockUser('3626','17','SEER')" title="Block User">Block User</a>
</div>
  <div id="show_UnBlockUser_3626" style="display:none" >
    <a class="main_menu2" href="javascript:void(0)" onClick="javascript:UnBlockUser('3626','17','SEER')" title="Un Block User">Un Block User</a>
</div>
  
<div style="clear:both">User 454</div>
  <div id="show_BlockUser_454" style="display:block" >
    <a class="main_menu2" href="javascript:void(0)" onClick="javascript:BlockUser('454','17','ttt')" title="Block User">Block User</a>
</div>
  <div id="show_UnBlockUser_454" style="display:none" >
    <a class="main_menu2" href="javascript:void(0)" onClick="javascript:UnBlockUser('454','17','ttt')" title="Un Block User">Un Block User</a>
</div>
  
</body>
</html>

Open in new window

Project Lead
Commented:
try this...
 showblock_id = 'show_BlockUser_' + my_id;
document.getElementById(showblock_id ).style.display = 'none';
 instead of  showblock_id = 'show_BlockUser_' + my_id + '.style.display = "none"';

Author

Commented:
Thanks for your help.
leakim971Multitechnician
Top Expert 2014

Commented:
sabecs I don't know the environment of your application but it look like you're using the user_id to unlock/lock accounts
Just for your information, using javascript someone may be able to unlock/lock account without permission just by using random id (my_id)

if you've time : http://www.sitepoint.com/users-php-sessions-mysql/

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial