ajaxSuccess/ajaxComplete not working

ajaxSuccess/ajaxComplete not working

Hi there everybody,

as you will guess, I am new to Ajax so would appreciate a little help if possible. I have a JQuery function which sets the width of a div within a table row and then animates the contents to slide up for pagination effect like so:

<script type="text/javascript">
    $(document).ready (function () {
        $('.change').each(function () {
            if ($('.p p', this).height() > $('.time').height() || $('.p p', this).height() == ($('.time').height() * 2)) {
                $(this).css({ 'height': $('.time').height() + "px" });
                $('.p', this).addClass('slide-upTwoLines');
            }
            else if ($('.p p', this).height() > $('.time').height() || $('.p p', this).height() > ($('.time').height() * 2)) {
                $(this).css({ 'height': $('.time').height() + "px" });
                $('.p', this).addClass('slide-upThreeLines');
            }
        })
    })
</script>

 However, the div in which the table sits, needs to reload every 30 seconds. I achieved that through using:

<script> @*Displays/hides the red panel on top of rail frame which enables the user to reset the values in form.*@
    $(document).ready(function () {
        $('html').click(function () {
            $('#back').toggle();
        })
    });
</script>

However after the reload my rows go to normal height as the div has been reloaded.

I have tried the following:

1. apply the original JQuery to (document).load rather then (document).ready but this is not working as the whole document is not loading. I have also tried ('#railGenerated').load and ('#railGenerated').ready with same results.

2. I have then tried to utilise ajaxComplete and ajaxSuccess like so:

<script>
    $('#railGenerated').ajaxSuccess(function() {
        $('.change').each(function () {
            if ($('.p p', this).height() > $('.time').height() || $('.p p', this).height() == ($('.time').height() * 2)) {
                $(this).css({ 'height': $('.time').height() + "px" });
                $('.p', this).addClass('slide-upTwoLines');
            }
            else if ($('.p p', this).height() > $('.time').height() || $('.p p', this).height() > ($('.time').height() * 2)) {
                $(this).css({ 'height': $('.time').height() + "px" });
                $('.p', this).addClass('slide-upThreeLines');
            }
        });
    });
</script>

But still same result. The div reloads with new information but the JQuery does not set the height of the div.

Has anybody got any ideas? Thanks. And sorry for long post.