469,356 Members | 2,656 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,356 developers. It's quick & easy.

How to call javascript function from different<div> ?

I`v made the following code:

Expand|Select|Wrap|Line Numbers
  1. <div id="Panels" style="width: 28%;">
  2.             <asp:Panel ID="one" runat="server" CssClass="Panel">
  3.                 <div id="Head" onclick="doToggle();">
  4.                     HEADER
  5.                 </div>
  6.             </asp:Panel>
  7.             <asp:Panel ID="two" runat="server" CssClass="Content">
  8.                     abcdefghijklmnopqrstuvwxyz
  9.            </asp:Panel>
  10.             <cc1:CollapsiblePanelExtender ID="cpe" runat="server"  TargetControlID="two"></cc1:CollapsiblePanelExtender>
  11. </div>
  12.  

and the function doToggle() is:
Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2.         function doToggle()
  3.         {
  4.             var cpe = $find("cpe");
  5.             //cpe._toggle();
  6.             if (cpe.get_Collapsed()) 
  7.             {   
  8.                 cpe._doOpen();
  9.             } 
  10.             else
  11.             {
  12.                 cpe._doClose();
  13.             }
  14.         }
  15.     </script>


But the problem is the if i want to have more div tags but use this same function for all just by calling it by giving the appropriate id?
Oct 1 '08 #1
9 19697
acoder
16,027 Expert Mod 8TB
Yes, just pass the ID as a parameter to the function:
Expand|Select|Wrap|Line Numbers
  1. function doToggle(id) {
  2.             var cpe = $find(id);
PS. please use code tags when posting code.
Oct 1 '08 #2
but how will i call it?
plz tell me this as well
Oct 1 '08 #3
acoder
16,027 Expert Mod 8TB
Pass the ID to the function when calling:
Expand|Select|Wrap|Line Numbers
  1. onclick="doToggle('cpe')"
Oct 1 '08 #4
I`v made the following code:

Expand|Select|Wrap|Line Numbers
  1. <div id="Panels" style="width: 28%;"> 
  2.             <asp:Panel ID="one" runat="server" CssClass="Panel"> 
  3.                 <div id="Head" onclick="doToggle();"> 
  4.                     HEADER 
  5.                 </div> 
  6.             </asp:Panel> 
  7.             <asp:Panel ID="two" runat="server" CssClass="Content"> 
  8.                     abcdefghijklmnopqrstuvwxyz 
  9.            </asp:Panel> 
  10.             <cc1:CollapsiblePanelExtender ID="cpe" runat="server"  TargetControlID="two"></cc1:CollapsiblePanelExtender> 
  11. </div> 


and the function doToggle() is:
Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript"> 
  2.         function doToggle() 
  3.         { 
  4.             var cpe = $find("cpe"); 
  5.  
  6.             if (cpe.get_Collapsed())  
  7.             {    
  8.                 cpe._doOpen(); 
  9.             }  
  10.             else 
  11.             { 
  12.                 cpe._doClose(); 
  13.             } 
  14.         } 
  15.     </script> 
Actually i want to use single 'CollapsiblePanelExtender' for many <div> tags, that is i just need to specify in function the targetId of div tags to act on everytime from where the function is called....
Oct 2 '08 #5
Dormilich
8,652 Expert Mod 8TB
if you use element.addEventListener() / element.attachEvent() you can refer to the element's id with this.id

regards
Oct 2 '08 #6
gits
5,390 Expert Mod 4TB
threads merged - please don't double post threads and keep all questions regarding one issue in one thread.

kind regards
MOD
Oct 2 '08 #7
acoder
16,027 Expert Mod 8TB
If the previous answers don't help solve the problem, post the client-side version of your code, i.e. how it appears in the browser (view source).

PS. please use code tags when posting code.

PPS. don't use the report link when you only mean to reply. Reply is on the right.
Oct 2 '08 #8
[HTML]<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Panel.aspx.cs" Inherits="Default2" %>

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>

<!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 runat="server">
<title>Welcome</title>
<link href="UserStyleSheet.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
function doToggle()
{
var cpe = $find("cpe");
cpe._animation._fps = 30;
cpe._animation._duration = 0.20;

if (cpe.get_Collapsed())
{
cpe._doOpen();
}
else
{
cpe._doClose();
}
}
</script>
</head>

<body>
<form id="form1" runat="server">

<!---------------------------------------------!-->
<asp:ScriptManager ID="ScriptManager" runat="server">
</asp:ScriptManager>
<!---------------------------------------------!-->

<div id="Panels" style="width: 28%;">

<div id="Head1" onclick="doToggle();">
HEADER <asp:Label ID="lbl1" runat="server"></asp:Label>
</div>
<asp:Panel ID="Panel1" runat="server" CssClass="Content">
ASP.NET AJAX is a free framework for quickly creating a new generation of more efficient,
more interactive and highly-personalized Web experiences that work across all the
most popular browsers.
</asp:Panel>

<!---------------------------!-->


<div id="Head2" onclick="doToggle();">
HEADER <asp:Label ID="lbl2" runat="server"></asp:Label>
</div>
<asp:Panel ID="Panel2" runat="server" CssClass="Content">
saadASP.NET AJAX is a free framework for quickly creating a new generation of more efficient,
more interactive and highly-personalized Web experiences that work across all the
most popular browsers.
</asp:Panel>

</div>
<cc1:CollapsiblePanelExtender ID="cpe" runat="server"
TargetControlID="Panel1" CollapsedSize="0" SuppressPostBack="True"
CollapsedText="↓" ExpandedText="↑" TextLabelID="lbl"></cc1:CollapsiblePanelExtender>
<!---------------------------------------------!-->

</form>
</body>


</html>[/HTML]



well heres my code, i want both div tags to call doToggle() onclick event which is working fine. But the target TargetControlID of CollapsiblePanelExtender remains same, which is causing only one div (Head1) to get slided.
Oct 3 '08 #9
You can give same name to all divs.But different ids.Now call this function on onclick of every div as oncllick="doToggle(this);" This is more than enough.Now you do not not need to call independant function for each div
Expand|Select|Wrap|Line Numbers
  1. function doToggle(that){
  2.  
  3. var divName=document.getElementsByName('Name of the div');
  4. var divLength=divName.length;
  5.  
  6. for(i=0;i<divLength;i++)
  7.  
  8.     {
  9.  
  10.     if(divName[i].id==that){alert('Hi Friend');}
  11.     else{alert('Bye Friend');}
  12.     }
  13. }
Hope this could be easy and efficient for you.
Oct 3 '08 #10

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

55 posts views Thread by Ton den Hartog | last post: by
61 posts views Thread by Toby Austin | last post: by
2 posts views Thread by MOHSEN KASHANI | last post: by
2 posts views Thread by ad | last post: by
3 posts views Thread by Josef K. | last post: by
7 posts views Thread by simchajoy2000 | last post: by
4 posts views Thread by joe | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by suresh191 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.