在ajax表单发送后刷新/重置jquery变量

Question

I am having trouble figuring this one out, can anyone help please?

I'm not sure if it's even possible, I need to refresh/reset the variable as I need to keep it's scope for other functions, so it can be used globally.

I have this variable near the top of my jquery goodness...

var heightOne = $panelOne.height();

and I'm trying to refresh it when my ajax gravity form sends.

I have this binded function which will fire when the form has fulled reloaded, So I guess I can put my variable refresh/reset script inside here...

$(document).bind('gform_post_render', function(){

    // variable refresh code in here...     

    $slidePane.css({ 'height' : heightOne + 'px' }); // then this will follow and use new height taken from $panelOne updated variable  

});

But I'm struggling to find out where to start. Any help would be awesome thanks.

---

UPDATE

This is my script in full, to show you what I'm trying achieve.

$(window).load(function(){

    var $slidePane  = $("#sliding-pane"),

         $stageOne  = $("#nav-stage-1"),
         $stageTwo  = $("#nav-stage-2"),
         $stageThree = $("#nav-stage-3"),

         heightOne  = $("#panel-stage-1").height(),
         heightTwo  = $("#panel-stage-2").height(),
         heightThree = $("#panel-stage-3").height();

    $slidePane.css({ 'height' : heightOne + 'px' });

    $.fn.slideThree = function() {

        $slidePane.stop().animate({
                left : "0px",
                height : heightOne + 'px'
        }, 300);

        FB.Canvas.scrollTo(0, 510);

    };

    $.fn.slideThree = function() {

        $slidePane.stop().animate({
                left : "-680px",
                height : heightTwo + 'px'
        }, 300);

        FB.Canvas.scrollTo(0, 510);

    };

    $.fn.slideThree = function() {

        $slidePane.stop().animate({
                left : "-1360px",
                height : heightThree + 'px'
        }, 300);

        FB.Canvas.scrollTo(0, 510);

    };

    $stageOne.on('click', function () {

        $(this).slideOne();

    });

    $stageTwo.on('click', function () {

        $(this).slideTwo();

    });

    $stageThree.on('click', function () {

        $(this).slideThree();

    });

    $(document).bind('gform_post_render', function(){

        $slidePane.css({ 'height' : heightThree + 'px' });

    });

});  

Answer 1

I'd recommend you put overflow:hidden in the css of the slidePane; that way the dimensions will resize automatically. You shouldn't need jquery for this.

Answer 2

var $slidePane  = $("#sliding-pane"),
    /* ...other vars... */
    heightThree = $("#panel-stage-3").height();

    // Cache the height
    $('#panel-stage-3').data('origHeight', heightThree);


$(document).bind('gform_post_render', function(){
    $slidePane.css({ 'height' : $('#panel-stage-3').data('origHeight') + 'px' });
});