AJAX loader, request result and jQuery fold/unfold animation

General PHP
1

Hi there,

I have a div in my view which first contains loading animation and then is changed with AJAX request result. It is described in details in this post.

Div’s width remains the same, while heights differs - contents are much higher (a long table) than loader animation, upon success and much shorter (one line error message) that animation, in case of error.

What is the best approach or quickest solution for introducing basic jQuery (not jQuery UI!) fold/unfold animation? So, in case of success, div would became larger with slow growing animation, and upon error it would get smaller, also with slow animation?

I’m using jQuery toggle with animation like that:


    	$('#help-button').click(function()

    	{

            	$('.help-text').animate({height: 'toggle'}, 700);

            	return false;

    	});

but have no idea, how to combine it with AJAX request and its results? I can’t toggle div holding result because I don’t want to show or hide it - it is visible all the time and I only want to change its height with animation.

2

Well… I was able to achieve something similar to what I want with following code:


<script type="text/javascript">

$(function()

{

    	<?php

            	echo(CHtml::ajax(array

            	(

                    	'url'=>array('zlecenia/ajaxgetparams'),

                    	'success'=>'function(html){jQuery("#section_2_div").slideUp(function(){jQuery("#section_2_div").html(html).slideDown()})}',

            	)));

    	?>

});

</script>

But this first hides slowly (slideUp) contents still containing loader, then shows slowly (slideDown) contents already containing AJAX request results.

What I want to have is that upon AJAX response contents of div slides down toward required height (or up if this is one-line error message) and then loader is being replaced with AJAX response contents. But I have no idea how to achieve it? :\

3

You (or better jQuery) don’t know the target height as long as you don’t put inside the div the returned data…

4

Well… Then the solution would be to put AJAX result to some invisible, temporal div, slide down current one to the same width as that temporal one and then paste copy contents of temporal div to the right one.

Hm… this seems to be a really hard and most important - kind of unnecessary work. I think I’ll pass on this one, although effect could be interesting.

And here is an updated version with proper handling of both success and error results - if someone would find it useful:


<script type="text/javascript">

$(function()

{

    	function showAJAXResult(div, msg)

    	{

            	jQuery(div).slideUp(function(){jQuery(div).html(msg).slideDown()});

    	}


    	<?php

            	echo(CHtml::ajax(array

            	(

                    	'url'=>array('zlecenia/ajaxgetparams'),

                    	'success'=>'function(html){showAJAXResult("#section_2_div", html)}',

                    	'error'=>'function(xhr, desc, er){showAJAXResult("#section_2_div", xhr.responseText)}'

            	)));

    	?>

});

</script>