Создаю свой виджет с кастомным поведением через JavaScript
Вот код виджета:
<?php
namespace backend\components\widgets\characterDelimiter;
use Yii;
use yii\helpers\Html;
use yii\widgets\InputWidget;
class CharacterDelimiterWidget extends InputWidget {
public $lenght,
$needToDelimiterStr,
$delimeterCssClass,
$delimeterCssStyle,
$name,
//переменные для activeForm
$options = [],
$settings = [],
$model,
$value,
$selector,
$attribute;
public function init() {
$this->options = [
'class' => $this->delimeterCssClass,
'style' => $this->delimeterCssStyle,
'id' => $this->name . '_' . $this->attribute . '_id',
'maxlength' => $this->lenght,
'name' => $this->attribute];
$specialClass = '<div class="clearfix super-special-class"></div>';
if (parent::hasModel()) {
echo $specialClass, Html::activeTextInput(
$this->model,
$this->attribute,
$this->options);
} else {
echo $specialClass, Html::textInput(
$this->name,
$this->value,
$this->options);
}
parent::init();
}
public function run() {
$view = $this->view;
$view->registerJs(
<<< JS
var left = $this->lenght; //кол-во разрешенных символов
console.log();
$("#counter_$this->attribute").text("Символов осталось: " + left);
if ($this->needToDelimiterStr) {
$("#$this->attribute").keyup(function() {
left = $this->lenght - $(this).val().length;
if (left < 0) {
left = 0;
}
$("#counter_$this->attribute").text("Символов осталось: " + left);
});
} else {
$("#counter_$this->attribute").text("Неограниченный ввод");
}
JS
, yii\web\View::POS_LOAD);
return;
}
}
Если я вызываю его в представлении вот так:
<?php
echo CharacterDelimiterWidget::widget(['lenght' => 10,
'name' => 'example',
'needToDelimiterStr' => 'true',
'delimeterCssClass' => 'text-center',
'delimeterCssStyle' => 'margin: 0 auto']);
То, рендерится вот такой input
jQuery(window).on('load', function() {
var left = 10; //кол-во разрешенных символов
console.log();
$("#counter_").text("Символов осталось: " + left);
if (true) {
$("#").keyup(function() {
left = 10 - $(this).val().length;
if (left < 0) {
left = 0;
}
$("#counter_").text("Символов осталось: " + left);
});
} else {
$("#counter_").text("Неограниченный ввод");
}
});
.text-center {
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="text" id="asdasd__id" class="text-center" name="asdasd" maxlength="10" style="margin: 0 auto">
А если вот так:
<?php
$model = ThisDay::findThisDayNews(614932);
foreach ($model as $key => $value) {
$form->field($model, "news_name")->widget(backend\components\widgets\
characterDelimiter\CharacterDelimiterWidget::className(), [
'lenght' => 10,
'needToDelimiterStr' => 'true',
'delimeterCssClass' => 'text-center',
'delimeterCssStyle' => 'margin: 0 auto'
]);
}
То не рендерится ничего кроме js'a. При этом parent::hasModel()
возвращает true
, а
var_dump($specialClass, Html::activeTextInput(
$this->model, $this->attribute, $this->options));
возвращает вот такой инпут:
.text-center {
text-aling: center;
}
<input type="text" id="_news_name_id" class="text-center" name="news_name" value="Тестовое значение полученное из базы данных" maxlength="10" style="margin: 0 auto">
В чем может быть проблема?
Я забыл про echo
>,<
echo $form->field($model, "news_name")->widget(backend\components\widgets\
characterDelimiter\CharacterDelimiterWidget::className(), [
'lenght' => 10,
'needToDelimiterStr' => 'true',
'delimeterCssClass' => 'text-center',
'delimeterCssStyle' => 'margin: 0 auto'
]);
При подключении выдает ошибки так и не понял что здесь не так , вроде правильный синтаксис
В целом вопрос в заголовке, не знаю что ещё добавить, кроме примера