CODEWITHSUNDEEP
yii2yii2-advanced-app
Dijo
Dijo

Reputation: 73

How can I implement modal in Yii2

I have two forms named schedule_route,bus_stop in my project.I want to display bus_stop form as a popup window when clicking in a button placed in the schedule_route form.The bus_stop form is rendering using the action actionCreate on the Stops controller.How can I implement this using the Modal in yii2?

schedule_route form is:

<?php

use yii\helpers\Html;
use yii\widgets\ActiveForm;
use kartik\depdrop\DepDrop;
use yii\helpers\ArrayHelper;
use common\models\Stops;
use kartik\time\TimePicker;
use common\models\Schedules;
use yii\bootstrap\Modal;
use yii\helpers\Url;


/* @var $this yii\web\View */
/* @var $model app\models\ScheduleRoute */
/* @var $form yii\widgets\ActiveForm */
?>

<div class="schedule-route-form">
   <div class="row">
<div class="col-lg-5">



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


    <?php echo $form->field($model, 'schedule_id')->dropDownList(ArrayHelper::map(Schedules::find()->all(), 'id', 'route_name'), ['prompt' => 'Choose...']); ?>
     <?php echo $form->field($model, 'stop_id')->dropDownList(ArrayHelper::map(Stops::find()->all(), 'id', 'stop'), ['prompt' => 'Choose...']); ?>
    <?php 
Modal::begin([
    'header' => '<h2>Schedule Route</h2>',
    'id'=>'modal',
    'toggleButton' => ['label' => 'Add '],

]);
Modal::end();?>
<div class="modal remote fade" id="modalvote">
        <div class="modal-dialog">
            <div class="modal-content loader-lg"></div>
        </div>
</div>

    <?php echo $form->field($model, 'depart')->widget(TimePicker::classname(), []);?>

    <?= $form->field($model, 'route_order')->textInput() ?>

    <div class="form-group">
        <?= Html::submitButton($model->isNewRecord ? Yii::t('app', 'Create') : Yii::t('app', 'Update'), ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>
    </div>

    <?php ActiveForm::end(); ?>


</div>
</div>

</div>

Upvotes: 2

Views: 5255

Answers (2)

temirbek
temirbek

Reputation: 1452

You can implement yii2 built in bootstrap Modal

use yii\bootstrap\Modal;

Modal::begin([
    'header' => 'Header title',
    'id' => 'mymodal',
    //'options' => ['class' => 'modal'] //in case if you dont want animation, by default class is 'modal fade'
]);

// your form here

Modal::end();

Then you add data-toggle='modal' and data-target='#modalId' attributes to an element on clicking which you want the modal to open, for example:

<button data-toggle='modal' data-target='#mymodal'>Click me</button>

Or you can trigger with jQuery:

$('button').click(function(){$('#mymodal').modal('show');});

Upvotes: 2

Luis Contreras
Luis Contreras

Reputation: 768

In the controller you have to load the view with a renderAjax method. This method load the view without the layout.

I learned how to do it following this video wich is hihgly recommended

How to load a view within a modal

Upvotes: 1

Related Questions