phpajaxyii2yii2-basic-app

Render Modal with data


I'm new to programming, and I really need help with Ajax, I really do not understand anything about ajax,much less on Yii2, and one of my challenges today is able to open a modal create, save the data with ajax, and render the form with your data inside the modal

how far I got :

Modal Trigger :

<?php echo Html::a('<span class="glyphicon glyphicon-comment"></span>',
                    ['atividade2','id' => $model->id_atividade], 
                    [
                        'title' => 'Atividades',
                        'data-toggle'=>'modal',
                        'data-target'=>'#modalvote',
                    ]
                   );
?>

Create form inside modal :

<?php

use yii\helpers\Html;
use yii\widgets\ActiveForm;
use yii\helpers\ArrayHelper;
use app\modulos\GPS\models\GpsResponsaveis;
use app\modulos\GPS\models\User;
use app\modulos\GPS\models\GpsPrioridade;
use app\modulos\GPS\models\GpsStatus;
use app\modulos\GPS\models\GpsAtividades;


/* @var $this yii\web\View */
/* @var $model app\modulos\GPS\models\GpsSolicitacao */
/* @var $form yii\widgets\ActiveForm */
$this->title = 'Criar Atividade';
$this->params['breadcrumbs'][] = ['label' => 'GPS Solicitação', 'url' =>                                 ['index']];
$this->params['breadcrumbs'][] = $this->title;
?>
<script     src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"     type="text/javascript"></script>
<link rel="stylesheet" type="text/css"     href="codebase/fonts/font_roboto/roboto.css"/>
<link rel="stylesheet" type="text/css" href="codebase/dhtmlxcalendar.css"/>
<script src="codebase/dhtmlxcalendar.js"></script>
<style>
.pushSpan {
margin-top: 25px;
}
</style>

<div class="box box-primary">
<div class="box-body">
<div class="gps-solicitacao-form">

    <?php
        $form = ActiveForm::begin();

        $sol_id = Yii::$app->request->get('sol_id');
        $sol_area = Yii::$app->request->get('sol_area');
        $model = new GpsAtividades();


     ?>
<div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;    </button>
        <h4 class="modal-title">Criar Atividade</h4>
      </div>
<div class="modal-body">
 <div class="col-sm-6"><!-- PRIMEIRA COLUNA -->

    <?= $form->field($model, 'responsavel')-    >dropDownList(ArrayHelper::map(User::find()->where(['id_area' => $sol_area])-    >all(), 'id', 'nome'), 
    array_merge( ['prompt' => 'Selecione'] ) ); ?>

<div class="form-group has-feedback">   
<?= $form->field($model, 'data_objetivo')->textInput(['maxlength' => true]) ?>
<span class="fa fa-calendar form-control-feedback pushSpan"></span>
</div>

<?= $form->field($model, 'prioridade')->dropDownList(ArrayHelper::map(GpsPrioridade::find()->all(), 'id_prioridade', 'nome_prioridade'), 
    array_merge( ['prompt' => 'Selecione'] ) ); ?>

</div>



 <div class="col-sm-6"><!-- SEGUNDA COLUNA -->

 <?= $form->field($model, 'descricao')->textArea(['maxlength' => true]) ?>
</div>
<div class="modal-footer">
<div class="form-group">

    <?= Html::submitButton('Criar Atividade', ['atividade','sol_id' =>         $sol_id,'class' => 'btn btn-success']) ?> 
</div>
</div>
<?php ActiveForm::end(); ?>

</div>
</div>
</div>
</div>

Controller , Actions related with Modal :

// Render form

public function actionAtividadeView()
    { 
       $model = new GpsAtividades();

       return $this->renderAjax('createAtividade', [
                'model' => $model,
        ]);

    }

//Save , render, etc

public function actionAtividade()
    { 
       $model = new GpsAtividades();




       if ($model->load(Yii::$app->request->post())) {

            $model->id_solicitacao = Yii::$app->request->get('sol_id');

            $model->save();

            Yii::$app->getSession()->setFlash('success', "Atividade     Criada");  

               return $this->renderAjax('createAtividade', [
                  'model' => $model,
               ]);


          } else {
              Yii::$app->getSession()->setFlash('error', "Não foi possivel     executar esta ação");  

              return $this->renderAjax('createAtividade', [
                  'model' => $model,
               ]);
        }

    }

Modal loaded fst

After Submit

Please, somebody save me :(

OBS: sorry about my english


Solution

  • You can't render the modal again in the index as the 2nd image because you use renderAjax() without an Ajax Call, please read this renderAjax. To make an Ajax request in yii2, on the internet you can find a lot of tutorial, if you have some issue with the code ask here.