I installed CKeditor for Yii2 according to extension docs.
I have pages in rendered in controller for eg.:
public function actionTest($id)
{
$model = $this->findModel($id);
return $this->renderAjax('/test', ['model' => $model]);
}
CKeditor loads properly if it is via:
return $this->render('/test', ['model' => $model]);
but does not load if it is loaded via renderAjax(). Seems to be CKeditor's jquery missing in this content. May I know how to add it to this page?
In my view:
<?= $form->field($model, 'Desc')->label('Description'. Html::tag('span', '*',['class'=>'required']))->widget(CKEditor::className(), [
'options' => ['rows' => 6],
'preset' => 'basic'
])
?>
In case of dynamically loaded textarea you need to reinitialize CKEditor in AJAX success callback.
It can be done like so:
CKEDITOR.replace('id-of-your-textarea-field');
Links:
Cannot convert dynamically loaded teaxtarea into ckeditor
Official docs
Related
I am trying to implement Google Charts in (ajax) tabs in order to build charts dynamically when the user click on each tab. I'm using Yii2 and (kartik) TabX widget for the tabs ajax functionality. I used these 2 widgets for Google Charts:
bsadnu / yii2-googlecharts
ScottHuangZL / yii2-google-chart
My own widgets do render well. The data I send ($ data), is displayed correctly with a var_dump (). But the Google Chart does not appear.
Following the instructions in the TabX documentation I have done the following:
In my Constructor:
public function actionFetchTabs($tab=1) {
$html = '';
switch($tab) {
case 1:
// ...
case 2:
$html = $this->renderPartial('empresa_charts', ['data'=>$this->getData()]);
break;
}
return Json::encode($html);
}
In my view:
<?= TabsX::widget([
'encodeLabels' => false,
'options' => ['class' => 'charts-tab'],
'position'=>TabsX::POS_ABOVE,
'items' => [
[
// NO ajax: Renders fine!
'label' => Icon::show('chart-pie').'Label 1',
'content' => Yii::$app->controller->renderPartial('default_charts',['data'=>$data2]),
'active' => $tab == 1,
],
[
// Ajax: Google Charts isn't rendering:
'label' => Icon::show('clipboard-list').'Empresas',
//What do I have to pass in content????? The documentation is not accurate.
'content' => ???
'linkOptions'=>['data-url'=>Url::to(['default/fetch-tabs?tab=2'])],
'active' => $tab == 2,
],
],
]);?>
The data is being passed correctly. My widget render without problems with the same data array. If I pass the renderPartial directly to the "content" property of the Tabx widget, everything works (as in Tab1) because everything is loaded at the same time when loading the page.
This problem occurs with the 2 widgets for Google Charts mentioned above. I begin to suspect that the problem is in Google Charts and Json encode.
Any help?
I have made an Active form with validation and ajax submit.
The form is created in view:
<?php $form = ActiveForm::begin([
'id' => 'login-form',
'layout' => 'horizontal',
'method' => 'post',
'enableClientValidation' => false,
'enableAjaxValidation' => true,
'validationUrl' => 'panel/validate',
'fieldConfig' => [
'options' => [
'tag' => false,
],
'template' =>'{input}<p class="help-block help-block-error ">{error}</p>'
],
]); ?>
The validation action:
public function actionValidate()
{
$model = new LoginForm();
$request = \Yii::$app->getRequest();
if ($request->isAjax && $request->isPost && $model->load(Yii::$app->request->post())) {
\Yii::$app->response->format = Response::FORMAT_JSON;
return ActiveForm::validate($model);
}
return $this->renderAjax('login', [
'model' => $model,
]);
}
When i leave the fields blank for example, or do not specify the captcha i can see the ajax response:
{"loginform-username":["Username cannot be blank."],"loginform-password":["Password cannot be blank."],"loginform-captcha":["Captcha cannot be blank."]}
However, those errors not getting shown under my form fields. The form fields are created like this:
<?= $form->field($model, 'username')->textInput()
If i turn off ajax validation, the erros are displayed. What can be wrong here?
I'm afraid there is no possible way to display error while turning off 'tag' = false in fieldConfig.
Even though it works for server-side validation, the main problem is how yii.activeForm.js updateInput() function for fields works. When ajax request is completed, the .js tries to find an outer tag (of field) with .field-<model>-<attribute> class selector and fetch error-div children. As long as there is no outer .field tag, no error message is append to form.
I'm not 100% sure about it, but this is my understanding from debugging yii.activeForm.js functionality.
Actually, here is the similar question in yii2/issues, where SilverFire explains that there is no way to achieve this.
ActiveForm fieldConfig options tag=>false will render class attribute without any tag
I'm using 2amigos ckeditor plugins in yii2, I was able to create a sample plugins from plugin_sdk_sample, it works fine in a raw project, but when I put that in a yii2 project, the button doesn't appear.
I put the custom plugin in \vendor\2amigos\yii2-ckeditor-widget\src\assets\ckeditor\plugins\ with plugin.js and png icon with the folder structure as described in the guide. I think the problem is with adding it to config.
I tried following in vendor\2amigos\yii2-ckeditor-widget\src\assets\ckeditor\config.js
CKEDITOR.editorConfig = function( config ) {
config.extraPlugins = 'timestamp';
};
also tried the following in view:
<?= $form->field($model, 'content')->widget(CKEditor::className(), [
'clientOptions' => ['config.extraPlugins' => 'timestamp'],
'options' => ['rows' => 6],
'preset' => 'basic'
]) ?>
but none of them seems to work and showing the button, what am I doing wrong here?
I think you have to add plugin.js into the list of script in
class CKEditorAsset extends AssetBundle
{
public $js = [
'ckeditor.js',
'plugin.js',
'adapters/jquery.js'
];
You can also customize the yii2 plugin toolbars like mentioned in below url-
dosamigos\ckeditor\CKEditor custom toolbar
<?= $form->field($model, 'content')->widget(CKEditor::className(), [
'options' => ['rows' => 6],
'preset' => 'custom',
'clientOptions' => [
'extraPlugins' => 'timestamp',
]
]) ?>
I tried this in the file
"vendor/2amigos/yii2-ckeditor-widget/src/CKEditorAsset.php"
public $sourcePath = '#bower/adminlte/plugins/ckeditor';
I am running an ajax submit in cakephp. It appears to be running, but the end result for the population of the assigned div is the page itself as opposed to the results set. And it also says the controller is missing which obviously is not true.
Model: Plan
Action: search()
search form element (being pulled into the search.ctp):
...
echo $ajax->form(array('type' => 'post',
'options' => array(
'update' => 'plansQueryResults',
'url' => array('controller' => 'plan', 'action' => 'search'),
'loading' => "Element.show('plsLoaderID')",
'loaded' => "Element.hide('plsLoaderID')"
)
));
...
echo $form->end();
This div is pulling in the default layout, but
<div id="plansQueryResults"></div>
Standard error (wrapped around default layout) displaying within the div:
Missing Controller
Error: PlanController could not be found.
Error: Create the class PlanController below in file: dental/1/app/controllers/plan_controller.php
<?php
class PlanController extends AppController {
var $name = 'Plan';
}
?>
What is the code you have on the search action?
What is the returned data from the action? Check with Firebug.
By the way... when following the standards to create a DB, it is better and handy use cake bake: Code Generation with Bake
I'm trying to add ajax pagination into a view of my application.
I followed this tutorial: http://book.cakephp.org/view/1600/Ajax-Pagination
So, in this tutorial you always reload the whole content of the view by clicking the pagination links.
But what I want is, that it only reloads the part of the site which includes the paginated data.
I found a solution for myself:
I made a view which only contains the ajax pagination and included it via ajax request:
<?php $this->Html->scriptStart(array('inline' => false));?>
$(document).ready(function() {
<?php
echo $this->Js->request(array(
'controller' => 'topics',
'action' => 'index',
$location['Location']['id']
), array(
'async' => true,
'update' => '#ajax_topics',
));
?>
});
<?php $this->Html->scriptEnd();?>