Индикатор загрузки в yii form submit

Question

В yii form submit Я хотел бы добавить индикатор загрузки до отправки формы. Теперь форма содержит поле файла и не может использовать кнопку ajaxsubmit. Как я могу добавить индикатор загрузки в обычную кнопку отправки формы? Благодаря

код формы

<div class="form"> 

<?php $form=$this->beginWidget('CActiveForm', array(
    'id'=>'master-form', 
    'enableAjaxValidation'=>false, 
     'htmlOptions' => array('enctype' => 'multipart/form-data'), 
)); ?> 

    <p class="note">Fields with <span class="required">*</span> are required.</p> 
<div id="AjaxLoader" style="display: none"><img src="<?php echo Yii::app()->request->baseUrl; ?>/images/spinner.gif"></img></div> 
<div id="ajaxs"></div> 
    <?php //echo $form->errorSummary($model); ?> 

     <div class="row"> 
     <?php echo $form->labelEx($model,'type'); ?> 
      <div id="select"> 
        <?php //echo $form->textField($model,'type'); 
         echo $form->dropDownList($model,'type',array('1'=>'one','2'=>'two','3'=>'three','4'=>'four','5'=>'five'),array('empty'=>'Select')); 
       ?></div> 
     <?php echo $form->error($model,'type'); ?> 
    </div> 

    <div class="row"> 
     <?php echo $form->labelEx($model,'name'); ?> 
     <?php echo $form->fileField($model,'name',array('size'=>60,'maxlength'=>100)); ?> 
     <?php echo $form->error($model,'name'); ?> 
    </div> 


    <div class="btn"> 
     <?php echo CHtml::submitButton('Submit',array(
'onSubmit'=>'js:function(){$("#ajaxs").addClass("loading");}', 
)); ?> 
    </div> 

<?php $this->endWidget(); ?> 

</div><!-- form --> 

Answer 1

Вы можете использовать просто добавить дополнительные JS для вашего onSubmit HTML атрибута что-то вроде

echo CHtml::submitButton('your-submit-label',array(
'onSubmit'=>'js:function(){$(#div-where-loading-should-show).addClass("loading");}', 
)); 

вам нужно определить класс в вашем CSS, а также сохранить подходящий загрузите файл gif в соответствующий каталог примерно так (определите его в своем основном файле css, чтобы вы могли использовать всюду

<style> 
.loading{ 
    background: url(loading.gif) no-repeat; 
} 
</style> 

Вам также нужен фактический файл gif для загрузки. Есть много доступных https://www.google.co.in/search?q=loading+gif, сохраните тот, который вам нравится, в той же папке, что и ваш файл css (или измените путь в фоновом атрибуте на место, которое вы сохранили).

Я предполагаю, что форма ведет на другую страницу, поэтому загрузка gif будет автоматически учтена после завершения загрузки.