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>
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');});
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
Related
I have Yii2 and a simple form. (It's view):
<?php
use yii\helpers\Html;
use yii\widgets\ActiveForm;
?>
<?php $form = ActiveForm::begin() ?>
<?= $form->field($form_model, 'name') ?>
<?= $form->field($form_model, 'email') ?>
<?= Html::submitButton('Send', ['class' => 'btn btn-success']) ?>
<?php ActiveForm::end() ?>
But the form will send the request to the same address, which is itself: /myform
<form id="w0" action="/myform" method="post">
How I can change it?
By setting param action in ActiveForm configuration:
<?php $form = ActiveForm::begin(['action' => 'here_array_or_string']) ?>
More in Yii2 Active Form
Add it in the widget configuration like:
ActiveForm::begin(['action' => ['controller/action']])
in the index.php there is a checkbox within a active form
<div class="form-group pull-right" style="margin-right: 10px">
<?php Pjax::begin(['id' => 'options']); ?>
<?php $form = ActiveForm::begin(['method' => 'get', 'action' => ['ensemble/index'], 'options' => ['data-pjax' => true]]); ?>
<?= $form->field($searchModel, 'completed')->checkbox(); ?>
<?= Html::submitButton('Apply', ['class' => 'btn btn-success']) ?>
<?php ActiveForm::end(); ?>
<?php Pjax::end(); ?>
</div>
also there is kartik gridview in the index.php
<?= GridView::widget($gridConfig); ?>
with the following configuration
$gridConfig['pjax'] = true;
$gridConfig['pjaxSettings'] = ['options' => ['id' => 'pjaxGrid']];
the ensemble controller with the index action looks like this
public function actionIndex()
{
$searchModel = new EnsembleSearch();
$dataProvider = $searchModel->search(Yii::$app->request->queryParams);
return $this->render('index', [
'searchModel' => $searchModel,
'dataProvider' => $dataProvider,
]);
}
This does work every thing just fine. I can check / uncheck the checkbox field and hit the submit button; which then reloads the gridview. Just cool.
Now i was wondering if it is possible, to just make this with only by clicking the checkbox? So if i check / uncheck the checkbox the gridview will be reloaded (pjax'd).
cheers,
Luc
Assign id to your form as well as class to your checkbox.
<div class="form-group pull-right" style="margin-right: 10px">
<?php Pjax::begin(['id' => 'options']); ?>
<?php $form = ActiveForm::begin([
'id' => 'filter-form',
'method' => 'get',
'action' => ['ensemble/index'],
'options' => ['data-pjax' => true]
]); ?>
<?= $form->field($searchModel, 'completed',['class'=>'status_chk'])->checkbox(); ?>
<?= Html::submitButton('Apply', ['class' => 'btn btn-success']) ?>
<?php ActiveForm::end(); ?>
<?php Pjax::end(); ?>
</div>
Add this script to your index.php file.
<?php
$this->registerJs(
'$("document").ready(function(){
$(document).on("change",".status_chk", function() {
$("#filter-form").submit();
});
});'
);
?>
I would say that you could do that with JavaScript. You could do something like this:
You must know how to identify the Form and the Checkbox (you could assign them so ids..)
In a JavaScript you could do something like this:
var form = document.getElementById("form-id");
document.getElementById("your-checkbox-id").addEventListener("click", function () {
form.submit();
});
As explain in this answer:
submit form with javaScript
<?php
use yii\helpers\Html;
use yii\bootstrap\ActiveForm;
$form = ActiveForm::begin(['id' => 'login-form']);
ActiveForm::end();
?>
If i run this code the following error will occur.
Fatal error: Class 'yii\bootstrap\ActiveForm' not found in
E:\wamp\www\yii2-paypal-master\backend\views\site\login.php on line 6
Kindly help me to fix this.
Thanks
Replace
use yii\bootstrap\ActiveForm;
with
use yii\widgets\ActiveForm;
Form:
<?php $form = ActiveForm::begin([
'options'=>['enctype'=>'multipart/form-data'],
]);
?>
<?= $form->errorSummary($model) ?>
<?= $form->field($model, 'title')->textInput(['maxlength' => true]) ?>
<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(); ?>
First, check the file assets/AppAsset.php if your Class App Asset is like mine, using Boostrap 3 or 4 or o:
public $depends = [
'yii\web\YiiAsset',
'yii\bootstrap4\BootstrapAsset',
];
}
You need to change it to use yii\bootstrap\ActiveForm; change this to instead use yii\bootstrap4\ActiveForm; it worked for me.
Is it possible to open in a new window when i click a submit button ? I have TWO SUBMIT buttons in my active form.
I know if i give 'target'=>'_blank' i will get the desired result in normal cases but it didn't work in active form.
<?php $form = ActiveForm::begin(); ?>
<div class="form-group">
<div class="col-md-6">
<?= Html::submitButton($model->isNewRecord ? Yii::t('app', 'Submit') : Yii::t('app', 'Update'), ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>
</div>
<div class="col-md-6">
<?= Html::submitButton('Pdf', ['class' => 'btn btn-primary','name'=>'Pdf'],['target'=>'_blank']) ?>
</div>
</div>
<?php ActiveForm::end(); ?>
I tried as above. then i decided to give target => _blank to active form as shown below
<?php $form = ActiveForm::begin(
['options'=>['target'=>'_blank']]); ?>
It works but not in the desired way. Now if i click on any one of the buttons i will be redirected to new page. I only want to get redirected to new page when i click on button 'Pdf'.
Any Ideas?
I don't want any javascript to be used.
You can use anchor for new window.
<?= Html::a('Pdf', 'url', ['class' => 'btn btn-primary','name'=>'Pdf', 'target'=>'_blank']) ?>
form = ActiveForm::begin(
['options'=>['target'=>'_blank']]);
it needs to work
I am opening a ActiveForm in modal window in yii2.
This error comes when I am opening a ActiveForm in Modal window . my index.php is
<?php
use yii\helpers\Html;
use yii\bootstrap\Modal;
$this->title = 'Roles';
$this->params['breadcrumbs'][] = $this->title;
?>
<div class="role-index">
<h1><?= Html::encode($this->title) ?></h1>
<p>
<?= Html::a('Create Role', '#', [
'class' => 'btn btn-success',
'id' => 'create-role-model',
'data-toggle' => 'modal',
'data-target' => '#activity-create-modal',
]) ?>
</p>
</div>
<?php
Modal::begin([
'id' => 'activity-create-modal',
'header' => '<h2>Hello world</h2>',
'footer' => Html::button('Close', ['class' => 'btn btn-default', 'data-dismiss' => 'modal'])
. PHP_EOL . Html::button('Add', ['class' => 'btn btn-primary btn-modal-save']),
]);
$model= new \frontend\models\Role();
echo $this->renderAjax('_form',['model' => $model]);
Modal::end();
?>
and my _form.php is
<?php
use yii\helpers\Html;
use yii\bootstrap\ActiveForm;
/* #var $this yii\web\View */
/* #var $model frontend\models\Role */
/* #var $form yii\widgets\ActiveForm */
?>
<?php $form = ActiveForm::begin([
'id' => 'create-ro',
'enableClientValidation' => true,
]); ?>
<?= $form->field($model, 'id')->textInput(['maxlength' => true]) ?>
<?= $form->field($model, 'created_on')->textInput() ?>
<?= $form->field($model, 'updated_on')->textInput() ?>
<div class="form-group">
<?= Html::submitButton($model->isNewRecord ? 'Create' : 'Update', ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>
</div>
<?php ActiveForm::end(); ?>
However when I place ActiveForm without render in index.php Yii Validation is working.Am I doing it an wrong manner . What have to be done so that modal validation start
It's echo $this->render('_form',['model' => $model]); you need, not $this->renderAjax().
The latter actually terminates the entire page and returns it without a layout around it (so including any javascript includes and so on).
Since you are still in another view that is definitely not what you need. So just use render(). It's a bit confusing because Controller::render() actually does close the page (and also adds javascripts), but in case of the View (Which $this is in that context) it does what renderPartial does for the controller.