如何使用renderajax渲染?

时间:2016-08-12 22:29:33

标签: jquery ajax yii2 render select2

我想在控制器中使用renderAjax渲染视图create.php。我现在正在尝试,但我没有让它发挥作用。因为不要给js充电(select2,datatables等)。

我尝试了所有,但我无法加载它们。我尝试使用renderpartial,beginPage(),bodyPage(),逐个加载jsfiles,注册de assets。

Load with renderajax

Load with render

控制器 - 创建

public function actionCreate($id)
{
    $alm = Almacen::find(['idAlm','nombre'])->where(['estado'=>1, 'idSuc'=>$id])->all();//lista Almacenes
    $model=new GuiaRemision();
     if ( $model->load(Yii::$app->request->post())) {
     }
    $prods=Producto::find()->select(['idPro','nombre'])->All();
    $model1 = new GuiaRemisionDetalle();
    if(Yii::$app->request->isAjax){
        return $this->renderAjax('create', array('alm' => $alm,'idSuc' => $id,'model' => $model, 'model1' => $model1, 'prods' => $prods)); 
    }           
}

查看 - Create.php

<?php
use yii\helpers\Html;
use yii\widgets\ActiveForm;
use yii\helpers\ArrayHelper;
use app\assets\AppAssetBack;
//AppAssetBack->jsOptions=['position' => \yii\web\View::POS_HEAD];
AppAssetBack::register($this);
$this->beginPage();
$this->head();
$this->beginBody();
?>
<div class="general-index">
    <h2 class="text-center">TRASLADOS</h2>
    <article id="widget-grid" class="">
        <div class="jarviswidget jarviswidget-color-darken" id="wid-id-1" data-widget-editbutton="false" 
        data-widget-custombutton="false" data-widget-colorbutton="false" data-widget-deletebutton="false">
            <header class="bg-color-blue">
                <span class="widget-icon"> <i class="fa fa-plus"></i> </span><h2>REGISTRAR TRASLADO</h2>                
            </header>
            <div>
                <div class="jarviswidget-editbox"></div>
                <div class="widget-body ">
        <?php $form = ActiveForm::begin(['id' => $model->formName(),'options' => ['class' => 'smart-form' ],'action'=> ['creartraslado']]);?>
                    <div id="bootstrap-wizard-1" class="col-sm-12">
                        <div class="clearfix"></div>
                        <div class="tab-content">
                            <br>
                            <header>
                                <h3><strong>Paso 1 </strong> - Información de Guía de Remisión</h3>
                            </header>
                            <fieldset>
                        <section class="col col-sm-6 col-md-4" >
                           <label>ALMACÉN:</label>
                           <label class="input">
                            <?= $form->field($model, 'destino',[
                                'template'=>"{input}\n{hint}\n{error}"
                                ])->dropDownList(ArrayHelper::map($alm,'idAlm','nombre'),
                                ['prompt'=>'SELECCIONE UN ALMACÉN', 'style'=>'text-transform: uppercase; width:100%','class'=>'select2 input-sm']); 
                            ?>
                            </label>
                        </section>
                                 <section class="col col-sm-6 col-md-4" >
                                    <label>OBSERVACIÓN:</label>
                                   <label class="input">
                                    <?= $form->field($model, 'observacion',[
                                        'template'=>"  {input}\n{hint}\n{error}"
                                        ])->textarea(array('rows'=>3, 'class'=>'form-control', 'style'=>'resize: none;')) 
                                    ?>
                                    </label>
                                </section>
                            </fieldset>
                            <fieldset>
                        <section>
                                    <?php $model1->idGui=$model->idGui;?>
                                    <?= $form->field($model1, 'idGui',[
                                        'template'=>"{input}\n{hint}\n{error}"
                                        ])->textInput(['type'=>'hidden']);
                                    ?>
                        </section>

                        <section class="col col-sm-6 col-md-3" >
                                    <label>PRODUCTO:</label>
                                   <label class="input"><i class='icon-append fa fa-cubes'></i>
                                    <?= $form->field($model1, 'idPro',[
                                        'template'=>"  {input}\n{hint}\n{error}"
                                        ])->dropDownList(ArrayHelper::map($prods,'idPro','nombre'),
                                        ['prompt'=>'SELECCIONE UNA OPCIÓN', 'style'=>'text-transform: uppercase; width:100%','class'=>'form-control select2']); 
                                    ?>
                                    </label>
                        </section>
                                <section class="col col-sm-6 col-md-2" >
                                <label>CANTIDAD:</label>
                                    <label class="input"><i class='icon-append fa fa-cubes'></i>
                                    <?= $form->field($model1, 'cantidad',[
                                        'template'=>"  {input}\n{hint}\n{error}"
                                        ])->textInput(array('placeholder'=>'CANTIDAD', 'type'=>'text', 'maxlength' => true)) 
                                    ?> 
                                    </label> 
                                </section>
                                <section class="col col-sm-6 col-md-2"><br/><?= Html::submitButton('AGREGAR', ['class' => 'btn btn-primary btn-sm']);?></section>
                            </fieldset>
                            </div>


                            <header>
                                <h3><strong>Paso 2 </strong> - Lista Detalle</h3>
                            </header>

                                <table id='dt_basic' class='table table-bordered table-hover' >
                                    <thead><tr> <th class='text-center'>Producto</th><th class='text-center'>Cantidad</th><th class='text-center'>Precio</th><th class='text-center'>SubTotal</th><th  >Acción <a id='deleteLista' class="pull-right btn btn-danger btn-xs"><i class='fa fa-trash' style='font-size: 12pt'></i></a> </th> </tr></thead>
                                    <tbody id="listaDetalle">
                                        <?php
                                        if(Yii::$app->session->has('lista')):
                                            foreach(Yii::$app->session->get('lista') as $lista):
                                                echo '<tr>';
                                                echo '<td>'.' ['.$lista['idPro'].'] '.$lista['idComDet'].'</td><td>'.$lista['cantidad'].' Unidades</td><td>S/. '. number_format($lista['precio'],2).'</td><td> S/. '.number_format($lista['subtotal'],2).'</td>
                                                     <td>'.Html::a("<span class='btn-label'><i class='fa fa-close'></i></span>", 
                                                        ['compra/deletelista'], 
                                                        ['class' => 'btn btn-labeled btn-warning btn-sm',
                                                        'onclick'=>"
                                                            $.ajax({
                                                                type     :'POST',
                                                                cache    : false,
                                                                data: {id: \$lista['idPro']},
                                                                url  : 'compra/deletelista',
                                                                success  : function(response) {
                                                                    $(\$form).trigger('reset');
                                                                    $('#listaDetalle').html(result);
                                                                }
                                                            });
                                                        return false"
                                                        ]).
                                                        '</td>';
                                                echo '</tr>';
                                            endforeach;
                                        endif;
                                        ?>
                                    </tbody>
                                </table>
                            <footer><?=Html::submitButton('REGISTRAR', ['class' => 'btn btn-success'])?></footer>
        <?php ActiveForm::end();?>
                        </div>
                    </div>
             </div>
          </div>
    </article>
</div>

<?php 
$script= <<<JS
    $('form#{$model->formName()}').on('beforeSubmit', function(e){
        var \$form=$(this);
        $.post(
            \$form.attr("action"),
            \$form.serialize()
        )
        .done(function(result){

        }).fail(function(){
            console.log("Server error"); 
        });
        return false;
    });
JS;
$this->registerJs($script);
$this->endBody();
$this->endPage(); 
?>

查看 - Index.php

<?php
use yii\helpers\Html;
use yii\widgets\ActiveForm;
use yii\helpers\Url;
?>

<div class="panel-body" id="load_div">
  <div class="trabajador-index">
    <h2 class="text-center" >TRASLADO</h2>
    <div class="btn-group">
            <button class="btn btn-sm bg-color-greenDark txt-color-white"  data-toggle="dropdown">
                <i class="fa fa-plusr"></i> NUEVO
            </button>
            <button class="btn btn-sm bg-color-greenDark  dropdown-toggle"  data-toggle="dropdown">
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu pull-left">
            <?php foreach($suc as $s):?>
                <li>

                    <?= Html::a(mb_strtoupper($s->nombre,'utf-8'),NULL,['#','id' => $s->idSuc,'href' => '#', 'class'=>'nuevo']) ?>
                </li>
            <?php endforeach;?>
            </ul>
    </div>
    <hr/>    

        <section id="widget-grid" class="">
        <div class="jarviswidget jarviswidget-color-darken" id="wid-id-0" data-widget-editbutton="false" 
                    data-widget-colorbutton="false" data-widget-deletebutton="false"
                    data-widget-togglebutton ="false" data-widget-fullscreenbutton ="false">
            <header class="bg-color-blue">
                    <span class="widget-icon"> <i class="fa fa-table"></i></span>
                    <h2>TRASLADOS DE ALMACÉN: &nbsp; <?= mb_strtoupper($nalm->nombre,'utf-8')?></h2>
                    <div class="widget-toolbar">
                        <div class="btn-group">
                            <button class="btn dropdown-toggle btn-xs bg-color-blue txt-color-white" style="border-color: #fff" data-toggle="dropdown">
                                SELECIONAR ALMACÉN <i class="fa fa-caret-down"></i>
                            </button>
                            <ul class="dropdown-menu pull-right">
                                <?php foreach($alm as $a):?>
                                <li>
                                    <?= Html::a(mb_strtoupper($a->nombre,'utf-8'), ['index','id' => $a->idAlm]) ?>
                                </li>
                                <?php endforeach;?>
                            </ul>
                        </div>
                    </div>

            </header>
                <div>
                    <div class="widget-body no-padding">
                        <table id="dt_basic" class="table table-bordered table-hover" >
                            <thead>     

                                <tr>
                                    <th class="text-center" data-class="expand"> ID</th>
                                    <th class="text-center" ><i class="txt-muted "></i> DESTINO</th>
                                    <th class="text-center" ><i class="txt-muted "></i> SERIE</th>
                                    <th class="text-center" ><i class="txt-muted "></i> DOCUMENTO</th>
                                    <th class="text-center" ><i class="txt-muted "></i> TIPO</th>
                                    <th class="text-center" data-hide="phone"><i class="txt-muted "></i> ESTADO</th>
                                    <th class="text-center" data-hide="phone, tablet,pc"><i class="txt-muted "></i> REGISTRO</th>
                                    <th class="text-center" ><i class="txt-muted "></i> ACCIÓN</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php foreach($data as $d): ?>
                                <tr>
                                    <td class="text-center" ><?= $d['idGui']?></td>
                                    <td class="text-center" ><?= $d['nombre']?></td>
                                    <td class="text-center" ><?= $d['serie']?></td>
                                    <td class="text-center" ><?= $d['documento']?></td>
                                    <td class="text-center" ><?= $d['tipo']?></td>
                                    <td class="text-center" ><?= ($d['estado'] == 1)?"<i class='fa fa-check txt-color-green'></i> Activo":
                                                                "<i class='fa fa-close txt-color-red'></i> Inactivo";?></td>
                                    <td class="text-center" ><?php $date = new \DateTime($d['RF']); echo $date->format('d-m-Y').' por '.$d['RU']?></td>
                                    <td class="text-center" style="width: 120px">
                                        <?= Html::a("<span class='btn-label'><i class='fa fa-pencil-square-o'></i></span>", 
                                        ['update', 'id' => $d['idAlm']], 
                                        ['class' => 'btn btn-labeled btn-warning btn-sm']) ?>

                                        <?= Html::a("<span class='btn-label'><i class='fa fa-trash'></i></span>", 
                                        ['delete', 'id' => $d['idAlm']], 
                                        ['class' => 'btn btn-labeled btn-danger btn-sm']) ?>
                                    </td>
                                </tr>
                                <?php endforeach; ?>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
    </section>
  </div>
</div>
<?php 
$script= <<<JS
$('a.nuevo').on('click', function(e) {
     $.ajax({
       url: '
JS;
$script.= Url::to(['traslado/create'])."',";
$script.= <<< JS
       dataType: 'html',
       data:{
           id: this.id
       },
       success: function(data) {
           $("#content").html(data);
       }
     });
});
JS;
$this->registerJs($script);
?>

1 个答案:

答案 0 :(得分:0)

所有renderAjax都通过您的控制器发送视图文件,而不使用附加到控制器的布局,允许通过Ajax请求。

使用Ajax请求(例如jQuery)将控制器操作实际加载到Ajax或Ajax容器中。