yii 表单提交中的加载指示器答案

【问题标题】：Loading indicator in yii form submityii 表单提交中的加载指示器
【发布时间】：2014-01-23 04:25:37
【问题描述】：

在 yii 表单提交中，我想添加一个加载指示器，直到表单提交。现在表单包含文件字段并且不能使用 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 -->

【问题讨论】：

标签： php yii yii-extensions yii-components

【解决方案1】：

您可以在 onSubmit HTML 属性中添加额外的 js，例如

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 将自动处理。

【讨论】：

我想在提交点击时显示该 gif。现在它没有显示加载指示器。
您能否将一些视图代码添加到您的问题中，否则很难弄清楚出了什么问题
我的意思是我在答案中添加了更多信息，它有什么帮助

【解决方案2】：

最简单的方法是在您的主自定义 js 文件中添加以下代码，以便将其应用于所有表单提交，而不仅仅是您想要的一个，这也可以防止表单多次提交并禁用保存、取消等.按钮，请根据需要更改类名或根据需要删除它们

$('body').on('submit', 'form', function() {
        //Disable all the action buttons so as to prevent double submit of same data
        $('.save_draft').off('click');
        $('.save_draft').attr('disabled', true);
        $('.save_draft').css('pointer-events', 'none');
        $('.save_submit').off('click');
        $('.save_submit').attr('disabled', true);
        $('.save_submit').css('pointer-events', 'none');
        $('.btn-cancel').off('click');
        $('.btn-cancel').attr('disabled', true);
        $('.btn-cancel').css('pointer-events', 'none');
        showLoader();
        //Following code disallows resubmit of the form again even user click on the button again
        $(this).submit(function() {
            return false;
        });
        return true;
    });

【讨论】：