Results 1 to 8 of 8

Thread: Animated Collapsable Div does not work inside a div populated by ajax responseText

  1. #1
    Join Date
    Sep 2008
    Posts
    3
    Thanks
    3
    Thanked 1 Time in 1 Post

    Default Animated Collapsable Div does not work inside a div populated by ajax responseText

    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!

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Try delaying the call of the initialization code until after your ajax request has been successfully completed. That is, something like:

    Code:
    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()
    }
    DD Admin

  3. The Following User Says Thank You to ddadmin For This Useful Post:

    libertyct (09-13-2008)

  4. #3
    Join Date
    Sep 2008
    Posts
    3
    Thanks
    3
    Thanked 1 Time in 1 Post

    Default

    Quote Originally Posted by ddadmin View Post
    Try delaying the call of the initialization code until after your ajax request has been successfully completed. That is, something like:

    Code:
    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/collapsa...ndex(ajax).php


    thnx
    Last edited by libertyct; 09-14-2008 at 12:35 AM. Reason: added more info

  5. #4
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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:

    Code:
    //jQuery(document).ready(function($){
    var $=jQuery
    "
    "
    "
    //}) //end doc.ready()
    In other words, remove the outermost jQuery(document).ready() enclosing braces.
    DD Admin

  6. The Following User Says Thank You to ddadmin For This Useful Post:

    libertyct (09-14-2008)

  7. #5
    Join Date
    Sep 2008
    Posts
    3
    Thanks
    3
    Thanked 1 Time in 1 Post

    Default

    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

  8. The Following User Says Thank You to libertyct For This Useful Post:

    macieq (11-01-2008)

  9. #6
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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.
    DD Admin

  10. The Following 2 Users Say Thank You to ddadmin For This Useful Post:

    libertyct (09-14-2008),macieq (11-01-2008)

  11. #7
    Join Date
    Oct 2008
    Location
    Warsaw, Poland
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Okey this is working but

    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?

  12. #8
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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.
    DD Admin

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •