AnimatedCollapse Dynamic Divs

[VB_Gone-Wild]

First I wanted to say hello, I just signed up to the forums. Secondly I have been using the animatedcollapse jquery add on from this site for awhile:
http://www.dynamicdrive.com/dynamici...edcollapse.htm

This works great for everything so far, but admittedly I am an extream jquery/javascript novice. I use asp and code in C# for the most part.

The problem I have is that I am attempting to use this in a repeater were I dynamicaly create divs for each record being displayed. I dont have a problem with making each div have a unique ID but what I dont quite grasp is how to make jquery work with this. The example given for this has predefined divs named in the head of the document. This obviously will not work for my situation were I have no idea how many divs will be produced. So I was wondering if there was a better way to do this and still be able to use this addon? Is there a way to create my divs dynamicaly and somehow have the jquery addon know what these divs are or even possibly a way to create the javascript inline with each div?

[jscheuer1]

Well, if you repeater is writing something like so several times, each with a unique id and presumably unique content:

<div id="<% someid[i] %>" 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>

It could just as easily write something like this:

<script type="text/javascript">
animatedcollapse.addDiv('<% someid[i] %>', 'fade=1,height=80px')
</script>
<div id="<% someid[i] %>" 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>

Then after all of that's done, have:

<script type="text/javascript">
animatedcollapse.init();
</script>

[VB_Gone-Wild]

I seem to still be having issues making this work, below is my output being supplied by a couple functions:

<a href='javascript:animatedcollapse.toggle('ticketID290')'>Testing</a>
<div id="moreInfo">
<script type='text/javascript'>animatedcollapse.addDiv('ticketID290', 'fade=0,speed=400,group=pets,hide=1')</script>
<div id='ticketID290' 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>
</div>

I have this at the top of the page which may be incorrect but when I moved it to the body it still dident work:

<script type="text/javascript">
animatedcollapse.init();
</script>

For each item being displayed in the repeater I supply the id to the div and link and script, it is produced ok but when click the link i get an onpage java error

[jscheuer1]

This:

<script type="text/javascript">
animatedcollapse.init();
</script>

should only be on the page once, and should go after the section where all:

<script type='text/javascript'>animatedcollapse.addDiv('ticketID290', 'fade=0,speed=400,group=pets,hide=1')</script>

are written. If there's any doubt, put it as the last thing before your closing </body> tag.

One other thing I notice that's a potential problem, though it may just get ignored is that in addDiv call, you have the group defined as pets, do you have a pets group, any group? Read over the documentation for more info on how groups are used and defined in the markup, and on the fact that they are not required.

[VB_Gone-Wild]

I took out the pets, it must of been part of the code I kept in from the example on the dowload page. Moved the init to directly below the script and then to the bottom of the body on the page and still have the same error.

[jscheuer1]

Please post a link to the page on your site that contains the problematic code so we can check it out.

[VB_Gone-Wild]

Unfortunatly I cannot do that, its an intranet site for my company on a secure network. But I will be more then willing to supply code.

[VB_Gone-Wild]

ASP side, well as much as needed for this, the page is entirely to long to show everything but this should be enough for this end of it:

<a href='<%# fillLnkID(Convert.ToString(Eval("TicketID"))) %>'>Testing</a>
<div id="moreInfo">
<%# fillJavaStuff(Convert.ToString(Eval("TicketID"))) %>
<script type="text/javascript">
animatedcollapse.init();
</script>

<div id='<%# fillExpando(Convert.ToString(Eval("TicketID"))) %>' 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>
</div>

C# codebehind associated with thous functions in the asp:

public string fillExpando(string TicketID)
{
return "ticketID" + TicketID;
}


public string fillJavaStuff(string TicketID)
{
string javastuff = "<script type='text/javascript'>";
javastuff += "animatedcollapse.addDiv('";
javastuff += "ticketID" + TicketID;
javastuff += "', 'fade=0,speed=400,hide=1')";
javastuff += "</script>";
return javastuff;
}

public string fillLnkID(string TicketID)
{
string lnkID = "javascript:animatedcollapse.toggle('ticketID" + TicketID + "')";
return lnkID;
}

Im sure there is a better way of doing this but this is the only way I could think of off hand.

[jscheuer1]

As I say, this should only appear once and only once in the served code of the page:

<script type="text/javascript">
animatedcollapse.init();
</script>

If you are having trouble deciding where, put it just before your closing </body> tag.

If there are other problems, I would need to see the served code.

[VB_Gone-Wild]

I moved the init to right before the closing body tag, and still the same. Above I posted the server side code. Could this possibly be something to do with when items are being created on the page? Can I set the init to run once the page is entirely loaded or would that be to late?

Thanks a ton for your help so far I really appreciate it.