PDA

View Full Version : Animated Collapsable Div does not work inside a div populated by ajax responseText



libertyct
09-12-2008, 06:18 PM
1) Script Title: Animated Collapsible DIV v2.01

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...edcollapse.htm

3) Describe problem:


i cant get this script to work once i have it inside a div that i populate using ajax. The script works fine if i have it in a plain html page but if i have a div that i populate using ajax(prototype) the div's do not collapse.

example

<div "collapsableDivsArea" ></div>

once i populate this div with the script using ajax, it does not work, i get an error that says this:

isTypeError: this.divholders[divid] is undefined



thanx!

ddadmin
09-13-2008, 01:23 AM
Try delaying the call of the initialization code until after your ajax request has been successfully completed. That is, something like:


if (ajaxrequest.complete){
animatedcollapse.addDiv('jason', 'fade=1,height=80px')
animatedcollapse.addDiv('kelly', 'fade=1,height=100px')
animatedcollapse.addDiv('michael', 'fade=1,height=120px')
animatedcollapse.init()
}

libertyct
09-13-2008, 11:00 PM
Try delaying the call of the initialization code until after your ajax request has been successfully completed. That is, something like:


if (ajaxrequest.complete){
animatedcollapse.addDiv('jason', 'fade=1,height=80px')
animatedcollapse.addDiv('kelly', 'fade=1,height=100px')
animatedcollapse.addDiv('michael', 'fade=1,height=120px')
animatedcollapse.init()
}

thnx ddadmin,

now i got it to work but it only works in IE and not FF, is there a known bug for the script in FF?

here is a link to the updated script. any ideas why its behaving differently in FF?

http://cduncanlaw.com/dorna/collapsablediv/index(ajax).php


thnx

ddadmin
09-14-2008, 05:25 AM
Hmm since I can't actually see the output of the POST request right now, it's hard to say. But try this nonetheless: inside the .js file, comment out these two lines, and add to it the line in red:


//jQuery(document).ready(function($){
var $=jQuery
"
"
"
//}) //end doc.ready()

In other words, remove the outermost jQuery(document).ready() enclosing braces.

libertyct
09-14-2008, 06:23 AM
thnx. i tried it and it fixes it perfectly. wow its 2:19 am right now, i couldnt sleep without fixing this so thnx again :-)

i also had made some changes in the process, i am now using jquery for all the ajax requests instead of prototype, as i thought maybe the conflict was coming from the 2 different frameworks.

so how does this change to jQuery(document).ready(function($) work? is it a hack? just curious

ddadmin
09-14-2008, 07:10 AM
You're welcome. :) Those lines caused the containing code to be executed when the DOM of the page has loaded (similar to when the page has loaded). That should include when you put the code in a function and explicitly invoke it, but apparently different browsers have different ideas on this.

macieq
11-01-2008, 12:43 AM
Nice shot and it is working but, I have a such problem:

How to do ajax query in ajax returned data?
My situation:

I'm calling by the ajax for the table of contents. Each content ("row") have some data and the form with input text to add another data.

How to do this thing?

Each form must send ID of content(row)(to identify the row in database) where it is store, plus some text to database (of course ajax).

Hm?

ddadmin
11-01-2008, 09:07 PM
Hi Macleq:
I think what you're asking is probably beyond the scoop of what we can help with. You'll need to first narrow down the problem first, and if there's something between your Ajax set up and Animated Collapsible DIV that doesn't work, post what you have so far and what the issue is.