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.
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/
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