how to call a variable in javascript

[sibelius]

This ultimately is a javascript question . . .

I'm trying to use the script at

http://www.dynamicdrive.com/dynamici...edcollapse.htm

It works great until I try to use it in a page where the content is coming from a database. I'd have one of these for each record so I need to be able to create a variable from the Main ID for each record to dynamically name the DIV and call it in the javascript.

            <% varMainID = oRs("main_id") %>
            
            <script language="javascript">
	var varJMainID;
	varJMainID = '<% =varMainID%>';
	</script>

I think I'm ok to this point. If I do a document.write on the javascript variable it writes the variable out. Here's where I think I have problems:

            
            <script type="text/javascript">

animatedcollapse.addDiv('varJMainID', 'fade=1')
animatedcollapse.ontoggle=function($, divobj, state)

animatedcollapse.init()

</script>
            
            <a href="javascript:animatedcollapse.toggle('varJMainID')">View Notes</a>

I'm betting the solution is simple but I'm a total novice at javascript. How do I call the variable varJMainID in the lines

<a href="javascript:animatedcollapse.toggle('varJMainID')">View Notes</a>
animatedcollapse.addDiv('varJMainID', 'fade=1')

[sniperman]

Your JavaScript code is declaring a JavaScript variable varJMainID.

 <% varMainID = oRs("main_id") %>
            
            <script language="javascript">
	var varJMainID;
	varJMainID = '<% =varMainID%>';
	</script>

And then it is initializing varJMainID with whatever is assigned to varMainID.

The line in the other JavaScript code only refers to a tag in HTML with an ID of varMainID, which could be confusing.

animatedcollapse.addDiv('varJMainID', 'fade=1')

The line of code above does not reference a JavaScript variable.

Also, try to make var varMainID a global variable incase it is not being referenced by the other function which it is required by as an argument.

[sibelius]

Sorry for the questions - I am a complete novice at javascript so I understood only about a third of what you said.

I'm declaring the variable varJMainID and making the variable whatever is in varMainID, which is the contents of the field oRs.("Main_ID") - that way, each time the query pulls up the next record in the recordset it recreates the variable with the next record's main_id content. That's what I'm trying to accomplish - so you're saying that part of my code is right?

The next part is where I think the problem is. In the line:
animatedcollapse.addDiv('varJMainID', 'fade=1')

I want it to insert the variable - if main_id for this record is cdm100 I want the line to read animatedcollapse.addDiv('cdm100', 'fade=1'). Same with the line <a href="javascript:animatedcollapse.toggle('varJMainID')">View Notes</a> - I would want it to be <a href="javascript:animatedcollapse.toggle('cdm100')">View Notes</a>.

That way, it goes through this record, uses the main_id as the variable. The next record in the record set is cdm101, and the same process then uses cdm101 as the variable so I have a unique name for the DIV for this record each time a new record is rolled out from the record set.

So my question is, what code should I use to get the script to replace the name varJMainID with the actual value of that variable to be used in those two lines

animatedcollapse.addDiv('varJMainID', 'fade=1')
<a href="javascript:animatedcollapse.toggle('varJMainID')">View Notes</a>

[sniperman]

Try to remove the single quotes '' from the first parameter of addDIV()

from this

animatedcollapse.addDiv('varJMainID', 'fade=1')
<a href="javascript:animatedcollapse.toggle('varJMainID')">View Notes</a>

to this

animatedcollapse.addDiv(varJMainID, 'fade=1')
<a href="javascript:animatedcollapse.toggle('varJMainID')">View Notes</a>

because you want JavaScript to reference the value(s) within the JavaScript variable varJMainID. What the code is doing now is assigning 'varJMainID' as a string. Remove the single quotes and you should be closer to making it work.

And try to differentiate the varJMainID in JavaScript from the HTML ID reference.

[sibelius]

If I pull out the single quotes from the first parameter only, I get the error:

Message: 'this.divholders[...].$divref' is null or not an object
Line: 54
Char: 2
Code: 0

If I pull out the single quotes from both lines, the javascript functions but it still uses the name of the variable rather than the value of the variable.

I believe the value of varJMainID needs to be the same as the ID for the DIV so the script expands or collapses the DIV when the link is clicked.

[sniperman]

I do a document.write on the javascript variable it writes the variable out.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.js">

/***********************************************
* Animated Collapsible DIV v2.4- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>
<script type="text/javascript">
var varJMainID;
	varJMainID = "jason";
	// varJMainID = "varMainID" + Math.floor(Math.random()*11);
	alert(varJMainID);

</script>

<script type="text/javascript">

animatedcollapse.addDiv('jason', 'fade=1,height=80px')
animatedcollapse.addDiv('kelly', 'fade=1,height=100px')
animatedcollapse.addDiv('michael', 'fade=1,height=120px')

animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted

}

animatedcollapse.init()

</script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>

<body>
<b><a href="javascript:animatedcollapse.show(['jason', 'kelly', 'michael'])">Show Examples 1, 2, 3</a> | <a href="javascript:animatedcollapse.hide(['jason', 'kelly', 'michael'])">Hide Examples 1, 2, 3</a></b>

<p><b>Example 1 (individual):</b></p>

<a href="javascript:animatedcollapse.toggle('jason')"><img src="toggle.jpg" border="0" /></a> <a href="javascript:animatedcollapse.show('jason')">Slide Down</a> || <a href="javascript:animatedcollapse.hide('jason')">Slide Up</a>

<div id="jason" style="width: 300px; background: #FFFFCC; display:none">
<b>Content inside DIV!</b><br />
<b>Note: Fade effect enabled. Height programmically defined. DIV hidden using inline CSS.</b><br />
</div>


<p><b>Example 2 (individual):</b></p>

<a href="javascript:animatedcollapse.toggle('kelly')"><img src="toggle.jpg" border="0" /></a> <a href="javascript:animatedcollapse.show('kelly')">Slide Down</a> || <a href="javascript:animatedcollapse.hide('kelly')">Slide Up</a>

<div id="kelly" style="width: 300px; background: #D2FBFF; display:none">
<b>Content inside DIV!</b><br />
<b>Note: Fade effect enabled. Height programmically defined. DIV hidden using inline CSS.</b><br />
</div>



<p><b>Example 3 (individual):</b></p>

<a href="javascript:animatedcollapse.toggle('michael')"><img src="toggle.jpg" border="0" /></a> <a href="javascript:animatedcollapse.show('michael')">Slide Down</a> || <a href="javascript:animatedcollapse.hide('michael')">Slide Up</a>

<div id="michael" style="width: 300px; background: #E7FFCC; display:none">
<b>Content inside DIV!</b><br />
<b>Note: Fade effect enabled. Height programmically defined. DIV hidden using inline CSS.</b><br />
</div>




</body>
</html>

When I add a version of your code to execute before the animated collapse script it works fine as a simulation. In theory it should work for dynamically generated content.

that's essentially how you call a variable in JavaScript, as the title implies.

Message: 'this.divholders[...].$divref' is null or not an object

This happens because it cannot find a DIV tag with the ID used to reference the DIV. Try to place any custom script above other scripts which need to execute first, and you may also want to fire the scripts onload so the DOM is ready.

[sibelius]

I've done some testing with what you wrote, and I've got it to the point where it is cycling through the recordset and assigning a new value to the variable for each record. I think the problem I've come up against, and it may not be solveable, is this:

If your recordset has five records it will assign the javascript variable 5 times, assigning a new value (from the record's MainID) to the variable each time. So, by the end of the page, the value of the javascript variable equals the the 5th, or last, MainID from the recordset.

So . . . when you try to execute the javascript by clicking the link, it automatically uses the value of the last time the variable was declared, or the last record. The result is that no matter what link you click it will always open the last record's div.

You can see an example of what I'm describing here:

http://www.hulcher.com/contracting/test.asp

I've put the code for this page below. After I connect to the database and run the query, here is the page code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/contracting/media/animatedcollapse.js">

/***********************************************
* Animated Collapsible DIV v2.4- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>

<body>

<% WHILE NOT oRs.EOF  %> 
<p><b>Example <% response.write oRs("main_id") %>:</b></p>

<% 
	varASPMainID = oRs("main_id")
	response.write varASPMainID 
%>
            

<script type="text/javascript">
var varJMainID;
	varJMainID = '<% =varASPMainID%>';
	// varJMainID = "varMainID" + Math.floor(Math.random()*11);
	// alert(varJMainID);

</script>

<script type="text/javascript">

animatedcollapse.addDiv(varJMainID, 'fade=1,height=80px')

animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted

}

animatedcollapse.init()

</script>

<a href="javascript:animatedcollapse.toggle(varJMainID)">Toggle the DIV</a> 

<div id="<% response.write varASPMainID %>" style="width: 300px; background: #FFFFCC; display:none">
<b>This is the right one</b><br />
<b>Note: Fade effect enabled. Height programmically defined. DIV hidden using inline CSS.</b><br />
</div>

<BR />----------------------------------------

<% oRs.MoveNext%> <% WEND  %>

Because the javascript writes the variable name JMainID each time rather than the value of JMainID each time, it always goes to the last value defined.

I don't know if there is any way around this unless you can define the value of the variable, and then have the variable's value written into the script rather than the variable's name. The only way I could think of is if you could dump the javascript variable entirely and just call the ASP's variable in the javascript code like this

animatedcollapse.addDiv(<% varASPMainID %>, 'fade=1,height=80px')

That doesn't seem to work though.

[sibelius]

Holy cow, that may have worked!!! I swapped out the javascript variable JMainID with <% response.write varASPMainID %> within the javascript and it appears to be working!

http://www.hulcher.com/contracting/test2.asp

I'll try this in the actual page I'm trying to incorporate this and see if it works. Thanks for your help!

[sniperman]

Glad you found a solution