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">× </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,
]);
}
}
Please, somebody save me :(
OBS: sorry about my english
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.