jQuery - Uncaught TypeError: Cannot read property '$divref' of undefined

I have a page which has some content that is generated via an AJAX request and JSON. The content is shown and hidden by clicking on each row using the (Animated Collapsible DIV v2.4 script ). It works fine if I have the page as one static file (which I did for testing) showing the same content the AJAX pulls. But when I display the page with AJAX generated content it comes through and the source code is essentially the same but my show/hide effects are not working. I am getting an error when I troubleshoot using Google Chrome Developer Tools that says: Uncaught TypeError: Cannot read property '$divref' of undefined. I tried switching the order of the Javascript and HTML to see if that was the problem. But I think it has something to do with the way the page is loading in the AJAX based version. I looked into using the JQuery LiveQuery plugin but I could not figure out how to make it work with my code nor do I know if it is the fix I need anyways. Thanks in advance for your help. Here is my code:

indexgenerated.htm - static version of generated page with show/hide working

http://sshakir.pastebin.com/QtGbR1Bq

index.htm - ajax generated version of the page with show/hide not working

http://sshakir.pastebin.com/gzWEHpby

controlnewajax.js - javascript file that pulls JSON and creates final index.htm page

http://sshakir.pastebin.com/hp9fVDed

animatedcollapse.js -Collapsible DIV script from Dynamic Drive

http://sshakir.pastebin.com/J1TSB9UJ

custom.css - stylesheet that imports 960 grid system

http://sshakir.pastebin.com/jbzP2fce

micro-json-codeajax.js - JSON result set used for development of page

http://sshakir.pastebin.com/fD0ZM0RR

960 Grid System - css library used for layout

http://sshakir.pastebin.com/t202ruDY

what line in what file is the error reporting? Online I also saw recommendations to use Firebug in FF to further isolate the problem...

what is $divref and why would it be a property of another object? is $divref from your JS code or from your server side code?

the code files you posted are too much to look through and there's no functional/dysfunctional example to test with and debug -- start by finding which file/line is causing the problem (by adding alerts on every line, if you have to, if traditional debug won't get you the info) and try figuring out which function is bailing on which arguments, then trace that back to where it comes from, etc, etc, etc... what are the results of you trying to debug this based on the errors you are receiving? If you can narrow this down for us, it will make finding/fixing the problem much much easier... good luck!

Thank you for your reply Derelict. I really appreciate your help with this.


what line in what file is the error reporting? - line 48 of animatedcollapse.js (http://sshakir.pastebin.com/J1TSB9UJ )

what is $divref and why would it be a property of another object? - $divref is a variable referencing the DIV that needs to be toggled and it is the property of another object because its value should be set on line 48 of animatedcollapse.js (http://sshakir.pastebin.com/J1TSB9UJ ) from the function parameter divid passed from the toggle object on line 27 when the showhide function is called on line 30

is $divref from your JS code or from your server side code? - it is from my JS code

I think this is happening because the AJAX is returning the JSON and writing the HTML after the animatedcollapse.js is finished loading into the document. If that is any help?

I have uploaded the live working and non-working version of the files to the locations below:

Working static file: http://fltest.comeze.com/indexgenerated.htm

Non-working AJAX generated version: http://fltest.comeze.com/

Thank you.

yes that does help, and it makes a lot of sense... instead of initializing animatedcollapse.js with all the expected divs, can you use the 'animatedcollapse.addDiv' func to add the new content in when it gets added to the page with AJAX, and or re-run it's 'init' function after each AJAX page content add? You are exactly right about your problem -- the animatedcollapse.js can't prepare/run on dynamically added content since it sets all its markers during its 'init' function. I think your best bet may be to re-run 'animatedcollapse.init()' after each time you add content to the DOM. give it a shot and let us know what you get... good luck!

Great! Good to know that I am on the right track. Thank God. I think I have come up with another solution to this that seems to work. Instead of adding the animated collapse javascript using innerHTML I put the JS code into another function togglerLocal() [see line 112] of new controlnewajax.js (http://sshakir.pastebin.com/TXdaQugP ). Then I added a dynamic JQuery function (.append()) to "append" the JS to the head tag [line 108] after the parentRes div is populated [line 106]. It seems to work fine now. I just need to move it into our integration environment and see if it breaks!