6 Replies - 9579 Views - Last Post: 03 August 2010 - 12:41 AM

#1 babysitter  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 47
  • Joined: 06-August 09

show/hide div using javascript(with asp.net)

Posted 02 August 2010 - 01:27 AM

Hi,people.

I'm currently struggling with some javascript to show/hide div based on the value get from database.Here's the code:

<script type="text/javascript">
<!--
                            function toggle_visibility(id) {
                                var e = document.getElementById(id);
                                if (e.style.display == 'block')
                                    e.style.display = 'none';
                                else
                                    e.style.display = 'block';
                            }
//-->
</script>


<table>
<tr>
<td>
                            <a href="#?<%=prop.PropertyId %>" onclick="toggle_visibility('view');">
                              View Images
                            </a>

                        </td>
                    </tr>

                </table>
                
                <%_propertyImages = PropertyServices.GetPropertyImages(prop.PropertyId)%>
                <div id="view">
                <div>        
                        <%If _propertyImages.Count > 1 Then%>
                            
                           <%For Each propertyImage In _propertyImages%>
                            
                            <%If Not propertyImage.PropertyImageId.Equals(prop.MainImageId) Then%>
                                <a href="<%=PropertyHelper.PropertyImageUrl(prop.PropertyId, propertyImage.Filename, "s") %>"  rel="enlargeimage" rev="targetdiv:loadarea">
                                    <img src="<%=PropertyHelper.PropertyImageUrl(prop.PropertyId, propertyImage.Filename, "t") %>" 
                                        alt=""
                                        style="width: 35px; height: 25px;" />
                                        
                                </a>                          
                            
                            <% End If%>
                                                        
                            <% Next%>    
                            
                        <%Else%>
                        
                            Not Available
                            
                        <%End If%>
                        </div>
                </div>



The show/hide works fine.Only that it only show/hide the top row.Meaning to say,even if I click on the links in other rows,it will still show/hide the top row output.

Please help.TIA

Is This A Good Question/Topic? 0
  • +

Replies To: show/hide div using javascript(with asp.net)

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3512
  • View blog
  • Posts: 10,137
  • Joined: 08-June 10

Re: show/hide div using javascript(with asp.net)

Posted 02 August 2010 - 01:38 AM

it would help to see the according HTML code, but from what I see, the function is only called on one element, thus only that one element can be toggled.
Was This Post Helpful? 0
  • +
  • -

#3 babysitter  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 47
  • Joined: 06-August 09

Re: show/hide div using javascript(with asp.net)

Posted 02 August 2010 - 02:04 AM

View PostDormilich, on 02 August 2010 - 12:38 AM, said:

it would help to see the according HTML code, but from what I see, the function is only called on one element, thus only that one element can be toggled.



the code is very lengthy,that's why i just gave related portion of what i'm asking.
I don't really understand what you mean by

Quote

...the function is only called on one element, thus only that one element can be toggled.
.Can you please explain further?
Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3512
  • View blog
  • Posts: 10,137
  • Joined: 08-June 10

Re: show/hide div using javascript(with asp.net)

Posted 02 August 2010 - 02:06 AM

<a href="#?<%=prop.PropertyId %>" onclick="toggle_visibility('view');">

there is only the one element with the ID "view" enabled for toggling.
Was This Post Helpful? 1
  • +
  • -

#5 babysitter  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 47
  • Joined: 06-August 09

Re: show/hide div using javascript(with asp.net)

Posted 02 August 2010 - 07:08 PM

View PostDormilich, on 02 August 2010 - 01:06 AM, said:

<a href="#?<%=prop.PropertyId %>" onclick="toggle_visibility('view');">

there is only the one element with the ID "view" enabled for toggling.


Oh,I see.So what would you suggest?I don't think using array is the solution,coz I need to pull the data from database.
Was This Post Helpful? 0
  • +
  • -

#6 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3512
  • View blog
  • Posts: 10,137
  • Joined: 08-June 10

Re: show/hide div using javascript(with asp.net)

Posted 03 August 2010 - 12:07 AM

as I donít know ASP, I would need to have a look at the generated HTML to tell more.
Was This Post Helpful? 0
  • +
  • -

#7 babysitter  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 47
  • Joined: 06-August 09

Re: show/hide div using javascript(with asp.net)

Posted 03 August 2010 - 12:41 AM

It's okay..I've already found the solution.I should just bind the <%=prop.PropertyId%> to the <div> id.Like this:

<script type="text/javascript">

                                  function toggle_visibility(id) {
                                      var e = document.getElementById(id);
                                      if (e.style.display == 'block')
                                          e.style.display = 'none';
                                      else
                                          e.style.display = 'block';
                                  }

                        </script>

<a href="#" onclick="toggle_visibility(<%=prop.PropertyId %>);">
                              View Images
                            </a>

<%_propertyImages = PropertyServices.GetPropertyImages(prop.PropertyId)%>
                
                <div>   <div id="<%=prop.PropertyId %>" style="display:none">

     
                        <%If _propertyImages.Count > 1 Then%>
                            
                           <%For Each propertyImage In _propertyImages%>
                            
                            <%If Not propertyImage.PropertyImageId.Equals(prop.MainImageId) Then%>
                            
                                <a href="<%=PropertyHelper.PropertyImageUrl(prop.PropertyId, propertyImage.Filename, "s") %>"  rel="enlargeimage" rev="targetdiv:loadarea">
                                    <img src="<%=PropertyHelper.PropertyImageUrl(prop.PropertyId, propertyImage.Filename, "t") %>" 
                                        alt=""
                                        style="width: 35px; height: 25px;" />
                                        
                                </a>                          
                            
                            <% End If%>
                                                        
                            <% Next%>    
                            
                        <%Else%>
                        
                            Not Available
                            
                        <%End If%>
                        </div>
                </div>




Damn!I wish I knew earlier.Anyway,thanks a lot for your replies.It really helps me identifying the error. :)

reference: 4GUys from rolla

This post has been edited by babysitter: 03 August 2010 - 02:11 AM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1