Clistview - Make An Animation Before Ajax Update


(Karim) #1

Hi everyone,

i want to make a js animation like fade or slidUp in the div that contain the Clistview content before it render the next/previous page.

Is that possible ?

I tried the beforeAjaxUpdate property but it gives me nothing, but it execute the function tat i give to it when loading the page.

exemple :




    <?php $this->widget('zii.widgets.CListView', array(

            ...........

            "beforeAjaxUpdate"=>"animation('yw0')"

            ..................

    ));

    ?>



animation(‘yw0’) is a js function tat contain the fade or slidup or anything else, the problem that this function is executed only when i load the page, and do not execute when i change the page from pager…


(L Jurgs) #2

It expects a javascript function, might seem unintuitive but you need to wrap it in a function to make it work:




    <?php $this->widget('zii.widgets.CListView', array(

            ...........

            "beforeAjaxUpdate"=>"function() { animation('yw0'); }"

            ..................

    ));

    ?>



This is because what you are setting is a function call not a function reference. Internally (in jQuery) it is doing something like:




  animation('yw0').apply(this, arguments);



So unless animation(‘yw0’) returns a function reference, not a lot will happen here.


(Karim) #3

Yeah ! tnx it works !

but a new problem apears here :

i put a slideUp animation in the “animation” function, but the ajax update don’t let the animation end, it just make the update on the content before even the content ends its sliding…

I can use the "beforeAjaxUpdate" and "afterAjaxUpdate" attributes to combine some animation to get my pursoe, but is there a way to sopt update until an event come to its end ?