Question

I know the question seems impossible. but I’m sure somebody can help me!

I have a div with options and a button, the users selects an option and clicks the ‘Next’ button.

What I want to happen is, the div with the options in, needs to animate to 0px height, load new content using ajax, then the div needs to re-animate to the new height of the contents…

So basically the div is shrinking, and then growing, but inbetween, the innerHtml is changing!

The code i have so far is:

function load_form( form_name ){
    var form_cont_elem = $("#form_container");
    var collapse_elem = $("#collapsable");

    // animate collapsable div to 0, callback ajax fetch
    collapse_elem.animate({height: "0px"}, 500, function(){

        $.get('/ajax/contact_form/' + form_name + '.html', function(data){
            // hide form container
            form_cont_elem.css({display: ""});
            // load data into form container
            form_cont_elem.html(data);
        });

    });

    // get new height of form
    var height_var = form_cont_elem.outerHeight();
    // remove display:none
    form_cont_elem.css({display: ""});
    // re-animate collapsable div to new height
    collapse_elem.animate({height: height_var}, 500);

}

the before the button click is:

<div id="collapsable">
    <div id="form_container">
        <p>What is the Nature of your Question?</p>
        <hr />
        <ul>
            <li><a>Quote</a></li>
            <li><a>Feedback</a></li>
            <li><a>Enquiry</a></li>
            <li><a>Complaint</a></li>
        </ul>
        <button class="blue">Next</button>
        <div class="clear"></div>
    </div>
</div>

the html after the button click is:

<div id="collapsable">
    <div id="form_container">
        <form method="post" action="/php/mailer.php">
            <fieldset>
                <input type="hidden" name="quote" />
                <label>Name</label>
                <input type="text" name="name" size="30" maxlength="30" />
                <label>Telephone Contact</label>
                <input type="text" name="telephone" size="30" maxlength="30" />
                <label>Email Address</label>
                <input type="text" name="email" size="30" maxlength="100" />
                <input class="orange" type="submit" name="submit" value="submit!" />
            </fieldset>
        </form>
    </div>
</div>

Now this javascript code works fine…

However, when I’m getting the NEW height of the #form_container, it returns the OLD height… now I’m assuming this is because the new information hasnt been drawn in the browser yet… So how do i overcome this?

Answer 1

I posted too early…

What’s happening is, its fetching the ajax, but while its waiting for the ajax response, its running the code below! the:

var height_var = form_cont_elem.outerHeight();
form_cont_elem.css({display: ""});
collapse_elem.animate({height: height_var}, 500);

So I just put that code inside the ajax call like so

var form_elem = $("#form_container");
var coll_elem = $("#collapsable");

coll_elem.animate({height: "0px"}, 500, function(){
    $.get('/ajax/contact_form/' + form_name.toLowerCase() + '.html', function(data){
        form_elem.css({display: "none"});
        form_elem.html(data);

        var height_var = form_elem.outerHeight();
        $("#collapsable").animate({height: height_var}, 500);
        form_elem.css({display: ""});
    });
});