473,725 Members | 2,118 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

How to call javascript function from different<div> ?

40 New Member
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 20190
acoder
16,027 Recognized Expert Moderator MVP
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
saadkhan
40 New Member
but how will i call it?
plz tell me this as well
Oct 1 '08 #3
acoder
16,027 Recognized Expert Moderator MVP
Pass the ID to the function when calling:
Expand|Select|Wrap|Line Numbers
  1. onclick="doToggle('cpe')"
Oct 1 '08 #4
saadkhan
40 New Member
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 'CollapsiblePan elExtender' 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,658 Recognized Expert Moderator Expert
if you use element.addEven tListener() / element.attachE vent() you can refer to the element's id with this.id

regards
Oct 2 '08 #6
gits
5,390 Recognized Expert Moderator Expert
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 Recognized Expert Moderator MVP
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
saadkhan
40 New Member
[HTML]<%@ Page Language="C#" AutoEventWireup ="true" CodeFile="Panel .aspx.cs" Inherits="Defau lt2" %>

<%@ Register assembly="AjaxC ontrolToolkit" namespace="Ajax ControlToolkit" tagprefix="cc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Welcom e</title>
<link href="UserStyle Sheet.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_Collap sed())
{
cpe._doOpen();
}
else
{
cpe._doClose();
}
}
</script>
</head>

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

<!---------------------------------------------!-->
<asp:ScriptMana ger ID="ScriptManag er" runat="server">
</asp:ScriptManag er>
<!---------------------------------------------!-->

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

<div id="Head1" onclick="doTogg le();">
HEADER <asp:Label ID="lbl1" runat="server"> </asp:Label>
</div>
<asp:Panel ID="Panel1" runat="server" CssClass="Conte nt">
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="doTogg le();">
HEADER <asp:Label ID="lbl2" runat="server"> </asp:Label>
</div>
<asp:Panel ID="Panel2" runat="server" CssClass="Conte nt">
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:Collapsibl ePanelExtender ID="cpe" runat="server"
TargetControlID ="Panel1" CollapsedSize=" 0" SuppressPostBac k="True"
CollapsedText=" ↓" ExpandedText="↑ " TextLabelID="lb l"></cc1:Collapsible PanelExtender>
<!---------------------------------------------!-->

</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 CollapsiblePane lExtender remains same, which is causing only one div (Head1) to get slided.
Oct 3 '08 #9
Rsmastermind
93 New Member
You can give same name to all divs.But different ids.Now call this function on onclick of every div as oncllick="doTog gle(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

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

Similar topics

55
7294
by: Ton den Hartog | last post by:
Stupid basic question but I find it horribly imposible to find the answer elsewhere... :-( I want to have a piece of text in my HTML page and want to be able to change it in a Javascript function that is called from a button. I think I can use a <div id="t"></div> for this ? Something like
61
24492
by: Toby Austin | last post by:
I'm trying to replace <table>s with <div>s as much as possible. However, I can't figure out how to do the following… <table> <tr> <td valign="top" width="100%">some data that will 'stretch'</td> <td valign="top" width="300">some data that won't 'stetch'</td> </tr> </table>
2
12189
by: MOHSEN KASHANI | last post by:
Hi, I am trying to hide some form elements in a form by default and show/hide depending on which radio button is clicked. This is what I have but it is not working: <head> <style> ..noshow { display: none; }
2
1428
by: ad | last post by:
When we create a new aspx in VS.Net, it will insert <div> tag inside <form> tag, like below. What is the function of <div> do? ---------------------------------------------------------------------------- ------------------------------------------ <form id="form1" runat="server"> <div> </div> </form>
3
3811
by: Josef K. | last post by:
Asp.net generates the following html when producing RadioButton lists: <td><input id="RadioButtonList_3" type="radio" name="MyRadioButtonList" value="644" onclick="__doPostBack('SitesRadioButtonList_3','')" language="javascript" />
7
2460
by: simchajoy2000 | last post by:
Hi, I am just a javascript beginner so maybe this is a simple problem but I am trying to do some rollovers on images in a separate <div>. Here is the relevent piece of my code: <html> <head> <script type="text/javascript"> if (document.images) {
4
4028
by: joe | last post by:
Hi, I defined: <div id="abc"> </div> in my .html file, after an Ajax query my weberserver sends: <script language="JavaScript"> alert('Hello World!"); </script>
1
1848
by: saadkhan | last post by:
I`v made the following code: <div id="Panels" style="width: 28%;"> <asp:Panel ID="one" runat="server" CssClass="Panel"> <div id="Head" onclick="doToggle();"> HEADER </div> </asp:Panel> <asp:Panel ID="two" runat="server" CssClass="Content"> abcdefghijklmnopqrstuvwxyz
8
10047
prino
by: prino | last post by:
Hi all, I've written code (in REXX) that takes files in legacy languages (PL/I, COBOL, z/OS assembler, etc) and converts them into HTML in a format similar to what's displayed in the z/OS ISPF editor. A fellow member of the PCG has helped me by creating a bit of Javascript to emulate the scrolling and using Google I've now gotten it into a state where it almost passes the W3C Markup Validation Service. However, the one error, Error Line 166,...
0
8888
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9401
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
9113
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
1
6702
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
4519
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
4784
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
3221
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
2635
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2157
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.