Exibir gif ou texto Carregando enquanto espera carregar uma pagina via ajax link com Modal

International Portuguese
1

Bom dia Galera, possuo uma página em um sistema de tramitações, onde quando o usuário vai anexar ou responder a algum tramite ele clica em um botão e carrega uma nova página, até aí tudo certo. está exibindo tudo certinho, salvando e redirecionando inclusive para a aba correta.

Mas eu gostaria que quando o usuário clicasse no ícone de novo anexo ou nova tramitação exibisse aquela imagem de carregando, que é para o usuário não ficar na dúvida se realmente clicou no link ou se o link está com problemas.

segue abaixo o código do meu ajaxlink




<?echo CHtml::ajaxLink('<span class="icon-pencil" title="Editar Despacho"></span>',

      $this->createUrl('tramite/update&id='.$q[$index]['cd_tramite']),

        array(

          'success'=>'function(r){$("#juiDialog").html(r).dialog("open"); return false;}'

              ),

           array('id'=>'showJuiDialog00'.$index) // not very useful, but hey...

                 );?>

e aqui está o meu modal:


$this->beginWidget('zii.widgets.jui.CJuiDialog',array(

                                'id'=>'juiDialog',

                                'options'=>array(

                                    'autoOpen'=>false,

                                    'modal'=>true,

                                    'width'=>'800',

                                    'height'=>'500',

                                ),

                            ));

                            $this->endWidget();
2

No array onde está o success é para opções de ajax, adicione neste array beforeSend dentro do array:


echo CHtml::ajaxLink(

    'Testando o ajax',          // texto do botao

    array('urldoajax'), // url do ajax

    array( // opções de ajax jquery

        'success'=>'...',

        'beforeSend' => 'function() {           

           $("#iddobotao").addClass("loading"); // se tiver classe de load no botao

        }',

        'complete' => 'function() {

          $("#iddobotao").removeClass("removeload");

        }',        

    )

);