Render Modal with data

Question

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,
               ]);
        }

    }

Please, somebody save me :(

OBS: sorry about my english

you forgot to explain which part(s) of your code are giving you a problem. There's a lot of code here. What specific problem are you facing? — ADyson, Nov 23 '17 at 11:23
1st, I do not know how to do send / save with ajax, 2nd, after sending, I can not render the modal again in the index as the 2nd image — Kauê Zuquetto, Nov 23 '17 at 11:40
In that case your question is too broad for here - we fix specific bugs with code here in general, not provide broad solutions. You seem to have an idea of the steps involved. Research how to do each bit (there are literally thousands of examples online of how to use ajax calls for instance, if you google for tutorials, documentation etc), try to apply it to your situation. If you get stuck, then post what you tried here, with any errors you get, and we can help you with an actual issue, rather than your lack of conceptual understanding. We'll fix your code, not do your studying for you. — ADyson, Nov 23 '17 at 11:44
"[...] Founded in 2008, Stack Overflow is the largest, most trusted online community for developers to learn, **share their knowledge,**" I showed my problem even with images, where I can not render the form in a modal, the form is presented without formatting and outside of a modal after submit, so it is understood that I have a problem. I did not ask for a teacher, only one way. if you can not understand it, then why use stackoverflow? thaks for nothing — Kauê Zuquetto, Nov 23 '17 at 11:57
That's a very general statement of intent, but there are more specific rules about what kind of questions are considered appropriate. Not my rules, the site's rules. Read https://stackoverflow.com/help/on-topic and https://stackoverflow.com/help/how-to-ask for better guidance. — ADyson, Nov 23 '17 at 12:01
Ask yourself - would _you_ spend a considerable amount of time developing and testing to build a whole feature like this to gain 15 rep points, especially when it seems likely that the person receiving the information will just use it as-is and not actually understand any of the code in the answer? There's really no purpose to spoon-feeding you the whole solution, if you won't even begin to know what any of the code is doing. If you don't know _anything_ about ajax (as you mentioned), this is not the place to start learning the basics. I repeat, on this site we fix bugs, not do your homework. — ADyson, Nov 23 '17 at 12:02
[Reference](https://stackoverflow.com/questions/36106325/yii2-form-in-modal-window). Provide minimal code to reproduce the issue. — Insane Skull, Nov 23 '17 at 13:40
@KauêZuquetto I have some questions: 1. Why do you need to use Ajax to store the data? Do you have a purpose for that? I think you could do it with a Simple POST from a submit of a form if you do it this way it would be easier for you to achieve it because Yii2 would do almost everything else if you have the correct model and views to display the data after it is saved in your database which you can make using GII — ManuelCash, Nov 23 '17 at 16:02
See https://stackoverflow.com/questions/44400958/bind-dynamically-generated-forms-for-ajax-validation/44401691#4440169. I believe this is what you are looking for. I have placed an answer showing how to use modals and ajax. — Jairus, Nov 27 '17 at 14:38

score 1 · Accepted Answer · answered Nov 27 '17 at 10:35

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.

Render Modal with data

1 Answers1