#1
  1. Imagination = Limitation
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2002
    Location
    Orlando, FL
    Posts
    62
    Rep Power
    13

    Question 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
  2. #2
  3. garish grotesque gargoyle
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Mar 2006
    Location
    gracing gargantuan gothic gateways
    Posts
    1,337
    Rep Power
    1037
    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!

    "Human history becomes more and more a race between education and catastrophe." (H.G. Wells)
    "Giving me a new idea is like handing a cretin a loaded gun, but I do thank you anyhow, bang, bang." (Philip K. D!ck)
  4. #3
  5. Imagination = Limitation
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2002
    Location
    Orlando, FL
    Posts
    62
    Rep Power
    13

    Red face


    Originally Posted by derelict
    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?
  6. #4
  7. Imagination = Limitation
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2002
    Location
    Orlando, FL
    Posts
    62
    Rep Power
    13

    Question Live versions of files uploaded


    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.
  8. #5
  9. garish grotesque gargoyle
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Mar 2006
    Location
    gracing gargantuan gothic gateways
    Posts
    1,337
    Rep Power
    1037
    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!

    "Human history becomes more and more a race between education and catastrophe." (H.G. Wells)
    "Giving me a new idea is like handing a cretin a loaded gun, but I do thank you anyhow, bang, bang." (Philip K. D!ck)
  10. #6
  11. Imagination = Limitation
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2002
    Location
    Orlando, FL
    Posts
    62
    Rep Power
    13

    Thumbs up


    Originally Posted by derelict
    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!

IMN logo majestic logo threadwatch logo seochat tools logo