I am busy making a dynamic form using Vue.js and at the moment, I appear to have everything correct except the remove function. It's all correctly configured as far as I see, yet the console in my browser displays the error "this.rows.$remove is not a function".
Does anyone know the solution for this, or can help me out finding the solution? Thanks in advance.
======================================
Here is the HTML for the page where the form is displayed:
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>M06 Property-create</title>
<!-- Including nessecary javascript sources -->
<script src="https://unpkg.com/vue#next/dist/vue.js"></script>
</head>
{!! Form::open(array('route' => 'property.store')) !!}
#include('properties.form')
{!! Form::close() !!}
Return
<script> //This script handles the adding / removal of label/text fields upon clicking the add label / remove label button
var app = new Vue({
el: "#app",
data: {
rows: [
{name: ""}
]
},
methods: {
addRow: function () {
this.rows.push({name: ""});
},
removeRow: function (row) {
console.log(row);
this.rows.$remove(row);
}
}
});
</script>
</body>
</html>
======================================
Here is the HTML / Blade for the form itself that is included:
{!! Form::label('label', Lang::get('misc.label')) !!}
{!! Form::text('label', null, ['class' => 'form-control', 'required']) !!}
<br>
{!! Form::label('internal_name', Lang::get('misc.internal_name')) !!}
{!! Form::text('internal_name', null, ['class' => 'form-control', 'required']) !!}
<br>
{!! Form::label('field_type_id', Lang::get('misc.fieldtype_name')) !!}
{!! Form::select('field_type_id', $fieldTypes) !!}
<div class="dropdown box">
<div class="multi-field-wrapper">
<div class="multi-fields">
<div class="multi-field">
<div id="app">
<table class="table">
<thead>
<button type="button" class="button btn-primary" #click="addRow">Add label</button>
<tr>
<td><strong>Label</strong></td>
<td></td>
</tr>
</thead>
<tbody>
<tr v-for="row in rows">
<td><input type="text" v-model="row.name"></td>
<td><button type="button" class="button btn-primary" #click="removeRow(row)">Remove</button></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<br>
{!! Form::label('property_group_id', Lang::get('misc.group_name')) !!}
{!! Form::select('property_group_id', $groups) !!}
<br>
{!! Form::label('description', Lang::get('misc.description')) !!}
{!! Form::textarea('description', null, ['class' => 'form-control', 'required']) !!}
<br>
<br>
{!! Form::submit(Lang::get('misc.save'), ['class' => 'btn btn-success', 'id' => 'btn-save']) !!}
It looks like the $remove method has been deprecated in vue 2.0, so I assume you are using that. You will need to use splice instead:
HTML:
<tr v-for="(row, index) in rows">
<td><input type="text" v-model="row.name"></td>
<td><button type="button" class="button btn-primary" #click="removeRow(index)">Remove</button></td>
</tr>
Javascript:
removeRow: function (index) {
console.log(index);
this.rows.splice(index,1);
}
You can see the fiddle here: https://jsfiddle.net/rLes3nww/
Its really irritating to refer to the guide and then to find out that it is deprecated.
Anyway I found this as reference of which one is deprecated or not.
Reference to deprecated Vue stuff
Related
So I'm trying to post a form with some data, but for some reason when clicking the button that POSTS the data, I'm not getting anything serversided, all the values are NULL.
As you can see it's a simple form that uses razor and I've set the name and the id properties of the elements I want to send
<table class="table table-hover mb-0">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Version</th>
</tr>
</thead>
<tbody>
#foreach (var _model in Model)
{
<tr>
#using (Html.BeginForm("Start", "Dashboard", FormMethod.Post))
{
<div class="form-group">
<td id="serverid" name="serverid">#Html.DisplayTextFor(x => _model.ServerID) #Html.HiddenFor(x => _model.ServerID)</td>
<td>
#Html.DisplayTextFor(x => _model.ServerName) #Html.HiddenFor(x => _model.ServerName)
</td>
<td>
#Html.DisplayTextFor(x => _model.Version) #Html.HiddenFor(x => _model.Version)
</td>
<td>
<button type="submit" asp-action="Start" asp-controller="Dashboard" class="btn btn-icon waves-effect waves-light btn-success" onclick="Start('#_model.ServerName')"> <i class="fa fa-power-off"></i> </button>
</td>
</div>
}
</tr>
}
</tbody>
</table>
And here is what the model looks like
public class ServerModel
{
public string ServerID { get; set; }
public string ServerName { get; set; }
}
And here is the action that's inside the controller
//The "model" parameter here exists, but all the properties are null when inspecting it
public async Task<IActionResult> Start(ServerModel model)
{
//Doing stuff here
}
Why are all the properties inside the model null when inspecting them after posting? I'm putting a breakpoint to inspect it.
Change your submit button to -
<button type="submit" class="btn btn-icon waves-effect waves-light btn-success"> <i class="fa fa-power-off"></i> </button>
As you are within the form element (generated by beginform) you dont need the additional attributes. Also not entirely sure what your intentions are with -
onclick="Start('#_model.ServerName')
Firstly you can remove the onclick="Start('#_model.ServerName')" of submit button since you are passing the data via Form Post , then modify below codes :
#Html.HiddenFor(x => _model.ServerID)
#Html.HiddenFor(x => _model.ServerName)
To :
<input name="ServerID" type="hidden" value="#_model.ServerID">
<input name="ServerName" type="hidden" value="#_model.ServerName">
So it will match name with model's property name during model binding .
I have two model loaded when i user loads the page but only one of this model will take information base on user's preference, but my problem is when the user submit the form the two model are submitted and i get an error because the other model needs to take information before it can proceed too, i want to know how i can load just one of the model and ignore the other when base on which of the form the user filled
Contoller
public function actionSignup($mode)
{
//if($mode === 'personalAccount'){
$model = new SignupForm();
if ($model->load(Yii::$app->request->post())) {
if ($user = $model->signup()) {
if (Yii::$app->getUser()->login($user)) {
return $this->goHome();
}
}
}
// }else{
$model_business = new SignupFormbusiness();
if ($model_business->load(Yii::$app->request->post())) {
if ($user = $model_business->signup()) {
if (Yii::$app->getUser()->login($user)) {
return $this->goHome();
}
}
}
return $this->render('signup', [
'model' => $model,
'model_business' => $model_business,
]);
// }
}
view
<?php
use yii\helpers\Html;
use yii\bootstrap\ActiveForm;
//if(isset($model_business))
$this->title = 'Signup';
$this->params['breadcrumbs'][] = $this->title;
?>
<div class="container" style="width: 100%;">
<div class="row" style="background: #fcfcfc;">
<div class="col-md-12 login-form-top">
</div>
<div class="col-lg-12 signup-form ">
<div class="signup-form-container">
<?php $form = ActiveForm::begin(['id' => 'login-form' ]);
$loginUrl = \Yii::$app->UrlManager->createUrl(['site/login']);
?>
<h1>Sign Up</h1>
<p style="text-align: center;">Please fill in this form to create an account.<br/>
Already a Member? Login
</p>
<div class="form-radio col-xs-6" style="padding:0;">
<label class="radio-container">Personal Account
<input type="radio" checked="checked" value="personal" name="acc-type" id="personal_radio">
<span class="radio-checkmark"></span>
</label>
</div>
<div class="form-radio col-xs-6" style="padding:0;">
<label class="radio-container">Business Account
<input type="radio" value="enterprise" name="acc-type" id="enterprise_radio">
<span class="radio-checkmark"></span>
</label>
</div>
<hr>
<?php if(isset($model) && !empty($model)): ?>
<div id="personal">
<div class="col-xs-6" style="padding-left:0; padding-right:5px;">
<?= $form->field($model, 'last_name', [
'template'=>'{input}<span class="asteric form-control-feedback">*</span>'
. ' {error}{hint}'
])->textInput(['placeholder'=> 'Surname'])->label(false) ?>
</div>
<div class="col-xs-6" style="padding-right:0; padding-left:5px;">
<?= $form->field($model, 'first_name', [
'template'=>'{input}<span class="asteric form-control-feedback">*</span>'
. ' {error}{hint}'
])->textInput(['placeholder'=> 'Given Name'])->label(false) ?>
</div>
<div class="col-xs-12 col-nopadding">
<?= $form->field($model, 'username',[
'template'=>'{input}<span class="asteric form-control-feedback">*</span>'
. ' {error}{hint}'
])->textInput(['placeholder'=> 'Username'])->label(false) ?>
</div>
<div class="col-md-12 col-nopadding">
<?= $form->field($model, 'email',[])->textInput(['placeholder'=> 'Email'])->label(false) ?>
</div>
<div class="col-md-12 col-nopadding">
<?= $form->field($model, 'phone1',[
'template'=>'{input}<span class="asteric form-control-feedback">*</span>'
. ' {error}{hint}'
])->textInput(['placeholder'=> 'Phone Number'])->label(false) ?>
</div>
<div class="col-md-12 col-nopadding">
<?= $form->field($model, 'password',[
'template'=>'{input}<span class="asteric form-control-feedback">*</span>'
. ' {error}{hint}'
])->passwordInput(['placeholder'=> 'Password'])->label(false) ?>
</div>
</div>
<?php endif;?>
<?php if(isset($model_business) && !empty($model_business)): ?>
<div id="enterprise">
<div class="col-xs-12" style="padding-right:0; padding-left:5px;">
<?= $form->field($model_business, 'business_name', [
'template'=>'{input}<span class="asteric form-control-feedback">*</span>'
. ' {error}{hint}'
])->textInput(['placeholder'=> 'Business Legal name'])->label(false) ?>
</div>
<div class="col-xs-12 col-nopadding">
<?= $form->field($model_business, 'username',[
'template'=>'{input}<span class="asteric form-control-feedback">*</span>'
. ' {error}{hint}'
])->textInput(['placeholder'=> 'Username'])->label(false) ?>
</div>
<div class="col-md-12 col-nopadding">
<?= $form->field($model_business, 'email',[])->textInput(['placeholder'=> 'Business email'])->label(false) ?>
</div>
<div class="col-md-12 col-nopadding">
<?= $form->field($model_business, 'phone1',[
'template'=>'{input}<span class="asteric form-control-feedback">*</span>'
. ' {error}{hint}'
])->textInput(['placeholder'=> 'Business Phone Number'])->label(false) ?>
</div>
<div class="col-md-12 col-nopadding">
<?= $form->field($model_business, 'password',[
'template'=>'{input}<span class="asteric form-control-feedback">*</span>'
. ' {error}{hint}'
])->passwordInput(['placeholder'=> 'Password'])->label(false) ?>
</div>
</div>
<?php endif;?>
<!--<input class="signup-input" type="password" placeholder="Repeat Password" name="psw-repeat" >-->
<div class="col-md-12 col-nopadding">
<p class="signup-condition">By creating an account you agree to our Privacy Policy.</p>
</div>
<div class="form-group">
<?= Html::submitButton('Sign Up', ['class' => 'btn', 'name' => 'signup-button']) ?>
</div>
<?php ActiveForm::end(); ?>
</div>
</div>
</div>
</div>
<?php
$script = <<< JS
$(document).ready(function(){
$(function (){
$("#enterprise_radio").on('click',function(){
$(this).prop('checked', true);
if($(this).is(':checked')){
$("#enterprise").show();
$("#personal").hide();
}
});
});
$(function (){
$("#personal_radio").on('click',function(){
$(this).prop('checked', true);
if($(this).is(':checked')){
$("#enterprise").hide();
$("#personal").show();
}
});
});
});
JS;
$this->registerJs($script);
?>
The two images above is a brief description of what i'm trying to achieve but the forms are loaded from different model and must be filled before it can be validate and i only need user to fill one of this form at a time which means the other will be empty and cannot validate which will trigger an error, is there any way to solve this problem or a better way to fix this.
i fill in the first form the presonal account and click submit, nothing happens, then i check on the business account form and got this error which means it also want me to fill out the form before it can proceed with the submition
You should either create a custom FormModel or create 2 separate forms,that would show up whenever the relevant choice/radio input is selected, what yo are doing is that the models are differen and the form is combined for the fields of both models which is odd and creating problems.
If you choose to create a single FormModel you should use Conditional Validation which provides when and whenClient inside the rules for the validation checks.
A quick suggestion would be to create 2 different forms like below as both are different models and you should assign the fields for the models to 2 different forms, rather than trying to merge all the fields in a single form and keeping the models separate
<?php
use yii\helpers\Html;
use yii\bootstrap\ActiveForm;
//if(isset($model_business))
$this->title = 'Signup';
$this->params['breadcrumbs'][] = $this->title;
?>
<div class="container" style="width: 100%;">
<div class="row" style="background: #fcfcfc;">
<div class="col-md-12 login-form-top">
</div>
<div class="col-lg-12 signup-form ">
<div class="signup-form-container">
<?php
$loginUrl = \Yii::$app->UrlManager->createUrl(['site/login']);
?>
<h1>Sign Up</h1>
<p style="text-align: center;">Please fill in this form to create an account.<br/>
Already a Member? Login
</p>
<div class="form-radio col-xs-6" style="padding:0;">
<label class="radio-container">Personal Account
<input type="radio" checked="checked" value="personal" name="acc-type" id="personal_radio">
<span class="radio-checkmark"></span>
</label>
</div>
<div class="form-radio col-xs-6" style="padding:0;">
<label class="radio-container">Business Account
<input type="radio" value="enterprise" name="acc-type" id="enterprise_radio">
<span class="radio-checkmark"></span>
</label>
</div>
<hr>
<?php if (isset($model) && !empty($model)): ?>
<?php $form = ActiveForm::begin(['id' => 'signup-form']); ?>
<div id="personal">
<div class="col-xs-6" style="padding-left:0; padding-right:5px;">
<?=
$form->field($model, 'last_name', [
'template' => '{input}<span class="asteric form-control-feedback">*</span>'
. ' {error}{hint}'
])->textInput(['placeholder' => 'Surname'])->label(false)
?>
</div>
<div class="col-xs-6" style="padding-right:0; padding-left:5px;">
<?=
$form->field($model, 'first_name', [
'template' => '{input}<span class="asteric form-control-feedback">*</span>'
. ' {error}{hint}'
])->textInput(['placeholder' => 'Given Name'])->label(false)
?>
</div>
<div class="col-xs-12 col-nopadding">
<?=
$form->field($model, 'username', [
'template' => '{input}<span class="asteric form-control-feedback">*</span>'
. ' {error}{hint}'
])->textInput(['placeholder' => 'Username'])->label(false)
?>
</div>
<div class="col-md-12 col-nopadding">
<?= $form->field($model, 'email', [])->textInput(['placeholder' => 'Email'])->label(false) ?>
</div>
<div class="col-md-12 col-nopadding">
<?=
$form->field($model, 'phone1', [
'template' => '{input}<span class="asteric form-control-feedback">*</span>'
. ' {error}{hint}'
])->textInput(['placeholder' => 'Phone Number'])->label(false)
?>
</div>
<div class="col-md-12 col-nopadding">
<?=
$form->field($model, 'password', [
'template' => '{input}<span class="asteric form-control-feedback">*</span>{error}{hint}'
])->passwordInput(['placeholder' => 'Password'])->label(false)
?>
</div>
<div class="col-md-12 col-nopadding">
<p class="signup-condition">By creating an account you agree to our Privacy Policy.</p>
</div>
<div class="form-group">
<?= Html::submitButton('Sign Up', ['class' => 'btn', 'name' => 'signup-button']) ?>
</div>
</div>
<?php ActiveForm::end() ?>
<?php endif; ?>
<?php if (isset($model_business) && !empty($model_business)): ?>
<?php $form = ActiveForm::begin(['id' => 'signup-business']); ?>
<div id="enterprise">
<div class="col-xs-12" style="padding-right:0; padding-left:5px;">
<?=
$form->field($model_business, 'business_name', [
'template' => '{input}<span class="asteric form-control-feedback">*</span>'
. ' {error}{hint}'
])->textInput(['placeholder' => 'Business Legal name'])->label(false)
?>
</div>
<div class="col-xs-12 col-nopadding">
<?=
$form->field($model_business, 'username', [
'template' => '{input}<span class="asteric form-control-feedback">*</span>'
. ' {error}{hint}'
])->textInput(['placeholder' => 'Username'])->label(false)
?>
</div>
<div class="col-md-12 col-nopadding">
<?= $form->field($model_business, 'email', [])->textInput(['placeholder' => 'Business email'])->label(false) ?>
</div>
<div class="col-md-12 col-nopadding">
<?=
$form->field($model_business, 'phone1', [
'template' => '{input}<span class="asteric form-control-feedback">*</span>'
. ' {error}{hint}'
])->textInput(['placeholder' => 'Business Phone Number'])->label(false)
?>
</div>
<div class="col-md-12 col-nopadding">
<?=
$form->field($model_business, 'password', [
'template' => '{input}<span class="asteric form-control-feedback">*</span>'
. ' {error}{hint}'
])->passwordInput(['placeholder' => 'Password'])->label(false)
?>
</div>
</div>
<div class="col-md-12 col-nopadding">
<p class="signup-condition">By creating an account you agree to our Privacy Policy.</p>
</div>
<div class="form-group">
<?= Html::submitButton('Sign Up', ['class' => 'btn', 'name' => 'signup-button']) ?>
</div>
<?php ActiveForm::end(); ?>
<?php endif; ?>
</div>
</div>
</div>
</div>
<?php
$script = <<< JS
$(document).ready(function(){
$(function (){
$("#enterprise_radio").on('click',function(){
$(this).prop('checked', true);
if($(this).is(':checked')){
$("#enterprise").show();
$("#personal").hide();
}
});
});
$(function (){
$("#personal_radio").on('click',function(){
$(this).prop('checked', true);
if($(this).is(':checked')){
$("#enterprise").hide();
$("#personal").show();
}
});
});
});
JS;
$this->registerJs($script);
?>
Controller Code
function actionSignup($mode)
{
$model = new SignupForm();
$model_business = new SignupFormbusiness();
if (Yii::$aap->request->isPost) {
$accountType = Yii::$app->request->post("acc-type");
if ($accountType == 'personal' && $model->load(Yii::$app->request->post())) {
if ($user = $model->signup()) {
if (Yii::$app->getUser()->login($user)) {
return $this->goHome();
}
}
}
if ($accountType == 'enterprise' && $model_business->load(Yii::$app->request->post())) {
if ($user = $model_business->signup()) {
if (Yii::$app->getUser()->login($user)) {
return $this->goHome();
}
}
}
}
return $this->render('signup', [
'model' => $model,
'model_business' => $model_business,
]);
}
Hoping that by default validation is activated for the two forms, the following solution will apply
First, give the two forms different ids say first_form_id and secod_form_id as follows:
//For the first form:
<?php $form = ActiveForm::begin(['id' => 'first_form_id']); ?>
//For the second form:
<?php $form = ActiveForm::begin(['id' => 'second_form_id']); ?>
Then you can modify the last part of your view file as below:
<?php
$script = <<< JS
$(document).ready(function(){
$(function (){
$("#enterprise_radio").on('click',function(){
$(this).prop('checked', true);
if($(this).is(':checked')){
$("#enterprise").show();
$("#personal").hide();
// Here we are disabling the validation for the first form;
$('#first_form_id').yiiActiveForm('validate', false);
//Activate the validation of the second form just incase it was disabled
$('#second_form_id').yiiActiveForm('validate', true);
}
});
});
$(function (){
$("#personal_radio").on('click',function(){
$(this).prop('checked', true);
if($(this).is(':checked')){
$("#enterprise").hide();
$("#personal").show();
//Activate the validation of the first form
$('#first_form_id').yiiActiveForm('validate', true);
//De-activate the validation of the first form just incase it was disabled
$('#second_form_id').yiiActiveForm('validate', false);
}
});
});
});
JS;
$this->registerJs($script);
?>
I am confused with one problem from couple of days and i could not solve it. I have a form which has different classes and when user clicks on add button i want to generate couple of fields. I can generate the fields but i am not able to pass that particular class_id with those dynamic generated fields. I am using this widget And here is how i am generating the dynamic fields.
Only involved model is Registration form. Other than that i am just firing query and displaying the data.One class can have multiple Registrations
Class Registration
is id
name class_id
firstname
lastname
This is my view code
<?php if (!empty($data)) {
foreach($data as $event){
$modelsRegistration = [new Registration()];
DynamicFormWidget::begin([
'widgetContainer' => 'dynamicform_wrapper', // required: only alphanumeric characters plus "_" [A-Za-z0-9_]
'widgetBody' => '.container-items'.$model['id'], // required: css class selector
'widgetItem' => '.item'.$model['id'], // required: css class
'limit' => 4, // the maximum times, an element can be added (default 999)
'min' => 0, // 0 or 1 (default 1)
'insertButton' => '.add-item'.$model['id'], // css class
'deleteButton' => '.remove-item'.$model['id'], // css class
'model' => $modelsRegistration[0],
'formId' => 'registration-form',
'formFields' => [
'firstname',
'lastname',
],
]);
?>
<div class="container">
<div class="row">
<div class="col-lg-9 col-md-9 col-sm-12 col-xs-12">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th class="col-lg-4 col-md-4 col-sm-4 col-xs-4">Class Name</th>
<th class="col-lg-2 col-md-2 col-sm-2 col-xs-2">Rounds</th>
</tr>
</thead>
<tbody>
<tr>
<td><?= $event['name'] ?></td>
<td><button type="button" id="<?= $event['id'] ?>" class="add-item<?=$model['id'] ?> btn btn-success btn-xs">Add Rounds <i
class="glyphicon glyphicon-plus"></i></button></td>
</tr>
</tbody>
</table>
<div class="row">
<div class="container-items<?=$model['id'] ?>"><!-- widgetBody -->
<?php foreach ($modelsRegistration as $i => $modelRegistration){
?>
<div class="item<?=$model['id'] ?>"><!-- widgetItem -->
<?php
// necessary for update action.
if (!$modelRegistration->isNewRecord) {
echo Html::activeHiddenInput($modelRegistration, "[{$i}]id");
}
?>
<div class="row">
<div class="col-sm-5">
<?= $form->field($modelRegistration, "[{$i}]firstname")->textInput(['maxlength' => true]) ?>
</div>
<div class="col-sm-5">
<?= $form->field($modelRegistration, "[{$i}]lastname")->textInput(['maxlength' => true]) ?>
<?= $form->field($modelRegistration, "[{$i}]class_id")->hiddenInput(['maxlength' => true])->label(false) ?>
</div>
<div class="col-sm-2">
<button type="button" class="remove-item<?=$model['id'] ?> btn btn-danger btn-xs"><i
class="glyphicon glyphicon-minus"></i></button>
</div>
</div>
<!-- .row -->
</div>
<?php } ?>
</div>
</div>
</div>
</div>
</div>
<?php
DynamicFormWidget::end();
} } ?>
If you have a view showing only people of one class (therefore, adding more people means they all are the same class) you can use in your dynamicform only the first/last name fields and add this id_class later in the controller just before saving it.
Example:
// load and validation of the model
// ...
foreach ($modelsRegistration as $modelRegistration) {
$modelRegistration->class_id = $myClassId;
if (! ($flag = $modelRegistration->save(false))) {
$transaction->rollBack();
break;
}
}
Now, if in your view you have people of all class divided by sections and each section have this add button, i strongly recommend you remove this add buttons from there and make a new section just for add people (with a select for choose a class).
Steps:
Remove the option insertButton in the DynamicFormWidget class in all those sections. And remove the html button also (won't work anymore).
Add the new section, something like this:
<?php
$newModelsRegistration = [new Registration()];
DynamicFormWidget::begin([
'widgetContainer' => 'dynamicform_wrapper_registration', // required: [A-z0-9_]
'widgetBody' => '.container-items-registration', // required: css class selector
'widgetItem' => '.item-registration', // required: css class
'limit' => 1, // the maximum times, an element can be added (default 999)
'min' => 0, // 0 or 1 (default 1)
'insertButton' => '.add-item-registration', // css class
'deleteButton' => '.remove-item-registration', // css class
'model' => $newModelsRegistration[0], //
'formId' => 'registration-form',
'formFields' => [
'firstname',
'lastname',
'class_id'
],
]);
?>
<div class="panel-body">
<button type="button" class="add-item-registration btn btn-success btn-sm pull-right margin-b-base">
<i class="glyphicon glyphicon-plus"></i> Add
</button>
<div class="clearfix"></div>
<div class="container-items-registration"><!-- widgetBody -->
<?php foreach ($newModelsRegistration as $i => $newModelRegistration): ?>
<div class="item-registration panel panel-default"><!-- widgetItem -->
<div class="panel-heading">
<h3 class="panel-title pull-left">Registration</h3>
<div class="pull-right">
<button type="button" class="remove-item-registration btn btn-danger btn-xs"><i class="glyphicon glyphicon-minus"></i></button>
</div>
<div class="clearfix"></div>
</div>
<div class="panel-body">
<div class="form-group row">
<div class="col-md-12">
<?= $form->field($newModelRegistration, "[{$i}]firstname")->textInput(['maxlength' => true]) ?>
<?= $form->field($newModelRegistration, "[{$i}]lastname")->textInput(['maxlength' => true]) ?>
<?= $form->field($newModelRegistration, "[{$i}]class_id")->dropDownList(
ArrayHelper::map(Class::find()->all(), 'id', 'name'),
['prompt' => 'Select']
) ?>
</div>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
<?php DynamicFormWidget::end(); ?>
Make sure the limit option is set to 1. So, will be easy to avoid people trying to add too much registrations in the same class (if i understood correctly each class have a limit amount of registrations). You can add a new rule in your Registration model and check if it already reached the limit of that class. Same thing for that find() method used in the dropDownList.
But if you still want to have all this add button in the same view, you can always use js to add that value for you.
Example:
// begin of form
// ...
<?= $form->field($modelRegistration, "[{$i}]class_id")->hiddenInput(['maxlength' => true, 'class' => 'form-control add-class-id', 'data-event' => $event['id']])->label(false) ?>
// end of form
<?php
$js = <<<JS
$('#registration-form').on('submit', function (e) {
$('.add-class-id').each(function() {
$(this).val($(this).attr('data-event'));
});
});
JS;
$this->registerJs($js);
?>
Let me know if any of this ideas works for you.
I'm working on a Laravel App and I am displaying a content from the database, the datatype is text and this is the content
<span style="font-weight: bold; font-style: italic;">What is your dog's name?</span>
As you can see it has HTML tags but when I rendered it in my view, instead of formatting the text What is your dog's name? It is displaying the entire content
<span style="font-weight: bold; font-style: italic;">What is your dog's name?</span>
It's not reading the HTML tag. Is there a convertion that I need to do in the formatting? When I view source it,
<span style="font-weight: bold; font-style: italic;">What is your dog's name?</span>
Here's my code:
View
<table class="table table-striped table-bordered">
<tbody>
#foreach($questions as $key => $value)
<tr>
<td class="">{{ $value->Question }}</td>
</tr>
#endforeach
</tbody>
My controller:
public function create()
{
$questions = Question::where('IsEnabled', '=', 'Yes')->get();
return view('crm.create')->with(array('questions' => $questions));
}
You need to tell blade not to escape HTML by using this {!! !!}
NB: This is applicable if you are using Laravel 5
#foreach($questions as $key => $value)
<tr>
<td class="">{!! $value->Question !!}</td>
</tr>
#endforeach
I am using Larvel 4.2 and thujohn/pdf-l4 plugin.
I have a problem in converting an HTML page to PDF. When I convert an HTML page, Everything on the page are displayed except the Morris chart on it.
My Route
Route::post('performanceDetail/preview',[
'as' => 'print.preview',
'uses' => 'PerformanceController#postPerformanceDetails']);
Controller
public function postPerformanceDetails()
{
$data = [
'event' => Input::get('events'),
'start_date' => Input::get('start_date'),
'to_date' => Input::get('to_date'),
];
$start_date = date('Y-m-d H:i:s',strtotime($data['start_date'].'00:00:00'));
$to_date = date('Y-m-d H:i:s',strtotime($data['to_date'].'23:59:59'));
$stats = Performance::where('event_type','=',$data['event'])
->where('campaign_id',Session::get('campaignid'))
->where('created_at', '>=',$start_date)
->where('created_at','<=',$to_date)
->groupBy('perf_date')
->orderBy('perf_date', 'DESC')
->remember(60)
->get([
DB::raw('Date(created_at) as perf_date'),
DB::raw('COUNT(id) as perf_count')
])
->toJSON();
//return $stats;
$campaign = Campaign::find(Session::get('campaignid'));
$list = CategoryList::find($campaign->categorylist_id);
$totalPerformance = TotalPerformance::find(Session::get('totalPerformance'));
//$this->layout->title = "Performance details";
return PDF::load(View::make('performance.show')
->with('stats',$stats)
->with('campaign',$campaign)
->with('list',$list)
->with('start_date',$data['start_date'])
->with('to_date',$data['to_date'])
->with('totalPerformance',$totalPerformance))->show();
}
View
{{-- Form to view performance details --}}
<html lang="en">
<head>
<p align="center">
<b> <font size="5" >Performance report</font></b>
</p>
</head>
<body>
<p align="center">
<font size="4" >{{{$campaign->template->title}}}</font></b>
</p>
<p>
<b>List: </b><font>{{$list->name}} </font>
</p>
<br>
<p>
<b>Total performance</b>
</p>
<p>
<table>
<thead>
<tr>
<th width="100">Campaign</th>
<th width="50" >Sent</th>
<th width="50" >Clicks</th>
<th width="50" >Loads</th>
<th width="50" >Opens</th>
<th width="50" >Views</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center" width="200">{{{$campaign->template->title}}}</td>
<td align="center" width="50">{{$totalPerformance->totalSent }}</td>
<td width="50" align="center">{{$totalPerformance->clicks }}</td>
<td width="50" align="center">{{$totalPerformance->loads }}</td>
<td width="50" align="center">{{$totalPerformance->opens }}</td>
<td width="50" align="center">{{$totalPerformance->views }}</td>
</tr>
</tbody>
</table>
</p>
<br>
<p>
<b>Date</b>
</p>
<p>
From: {{$start_date}} To: {{$to_date}}
</p>
{{-- hosted assets for Morris charts --}}
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
{{ HTML::script('../bower_components/jquery/dist/jquery.min.js') }}
{{ HTML::script('../bower_components/raphael/raphael-min.js') }}
{{ HTML::script('../bower_components/morrisjs/morris.min.js') }}
<input type="hidden" name="dataChart" id="dataChart" value="{{{$stats}}}">
<div id="mchart">
</div>
<script type="text/javascript">
$(document).ready(function()
{
var events = $('#dataChart').val();
console.log(events);
var chart = Morris.Bar({
barGap:1,
barSizeRatio:.10,
// ID of the element in which to draw the chart.
element: 'mchart',
// Set initial data (ideally you would provide an array of default data)
data: [0,0],
xkey: 'perf_date',
ykeys: ['perf_count'],
labels: ['Count'],
//barColors: ['#0B62A4','#f75b68','#4DA74D','#646464'],
hideHover: 'auto'
});
chart.setData(JSON.parse(events));
});
</script>
</body>
</html>
I have tried to display this view without conversion, it was successful. But, when executed the above code the Morris Chart is not displayed on PDF.
How can I solve this Please guide.
Just use the {!! !!} instead of using {{ }} in your view file...
Also make sure that your file should be something like
'demo.blade.php'..