By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,850 Members | 1,962 Online
Bytes IT Community

Home Questions Articles Browse Topics Latest Top Members FAQ

home > topics > javascript / ajax / dhtml > questions > how to call javascript function from different<div> ?
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,850 IT Pros & Developers. It's quick & easy.

How to call javascript function from different<div> ?

P: 40
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
Share this Question
Share on Google+
9 Replies
acoder
Expert Mod 15k+
P: 16,027
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
P: 40
but how will i call it?
plz tell me this as well
Oct 1 '08 #3
acoder
Expert Mod 15k+
P: 16,027
Pass the ID to the function when calling:
Expand|Select|Wrap|Line Numbers
  1. onclick="doToggle('cpe')"
Oct 1 '08 #4
P: 40
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
Expert Mod 5K+
P: 8,639
if you use element.addEventListener() / element.attachEvent() you can refer to the element's id with this.id

regards
Oct 2 '08 #6
gits
Expert Mod 5K+
P: 5,235
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
Expert Mod 15k+
P: 16,027
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
P: 40
[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
P: 93
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.

Question stats

  • viewed: 17662
  • replies: 9
  • date asked: Oct 1 '08
BYTES.COM © 2019 About Bytes | Advertise on Bytes | Privacy Policy | Manage Cookies
Sitemap | JavaScript / Ajax / DHTML Answers Sitemap | JavaScript / Ajax / DHTML Insights Sitemap

Follow us to get the Latest Bytes Updates