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?
Related
I have Yii2 application which uses the Kartik plugin to initialize Select2 dropdowns in forms.
I have one particular Select2 which uses AJAX call to get the data for the drop down options.
<?=
$form->field($model, 'court_house_id', ['enableAjaxValidation' => true, 'selectors' => ['input' => '#' . $id . "-court-house"],'template' => FormHelper::GenerateFieldTemplate([6])])
->widget(Select2::classname(), [
'options' => ['id' => $id . "-court-house", 'placeholder' => Yii::t('app', 'Search court house...')],
'hashVarLoadPosition' => \yii\web\View::POS_READY,
'pluginOptions' => [
'dropdownParent' => new JsExpression("$('#$modalWindowId')"),
'allowClear' => true,
'minimumInputLength' => 2,
'language' => [
'errorLoading' => new JsExpression("function () { return '" . Yii::t('app', 'Search...') . "'; }"),
],
'ajax' => [
'url' => app\components\UrlMaker::link('data/court-house-list'),
'dataType' => 'json',
'data' => new JsExpression('function(params) { return {q:params.term}; }')
],
'escapeMarkup' => new JsExpression('function (markup) { return markup; }'),
'templateResult' => new JsExpression('function(courthouse) { return courthouse.text; }'),
'templateSelection' => new JsExpression('function (courthouse) { return courthouse.text;}'),
]])
->label(Yii::t('app', 'Court House'), ['class' => FormHelper::GenerateLabelClassTemplate([3])]);
?>
Intentionally pasting all of the code, although most of it is irrelevant I would assume.
I have this loaded in multiple dynamically created forms thus all the strange ids and selectors. However, the form has different dropdown which controls whether some of the fields are shown (and required) or not. This particular field above is only shown in one of the scenarios which all the other variations of the form do not have it. So the model has the following validation:
[['court_house_id', 'staff'], 'required', 'on' => self::SCENARIO_ONE],
By the way staff is just a regular text field and everything works for it.
In order to change the scenario, I have the following line in the view with the form:
<?php $model->scenario = \app\models\MyModel::SCENARIO_ONE; ?>
The problem is that when I submit the form empty, the staff field gets marked in red as invalid but the court house is marked in green as valid although it is empty.
If I go into the model and remove the 'on' => self::SCENARIO_ONE part then everything works as expected - on empty submit the court house field also lights up in red but that would be a problem for the rest of my scenarios where this field is not needed.
Any ideas what might be causing the problem and how to resolve it?
Try to set the scenario in controller before calling save() method, for example
$model = new MyModel(['scenario' => MyModel::SCENARIO_ONE])
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
How do I submit a form using AJAX when clicking a link in Drupal?
function search_form($form,$form_state) {
$form['support_email'] = array(
'#theme' => 'link',
'#text' => '',
'#ajax' =>array(
'callback' => 'ajax_change',
'wrapper' => 'email-hidden',
'method' => 'replace',
'click' => 'true',
),
);
}
This is the form link I have inside a form. On clicking the link, I want the AJAX callback function ajax_change to be called, which does not seem to be happening.
The forms api reference for the #ajax functionality says that it is "Used by: button, checkbox, checkboxes, image button, password, radio, radios, select, submit, tableselect, textarea, text_format, textfield". Link is not in the list and thus won't work. The #ajax functionality makes Drupal perform an AJAX call when the specified form element changes. Since a link doesn't change, it is logical that it doesnt work.
The Asaf (ajax submit for any form) module may be able to help you to achieve what you want to do.
Also, it appears you are trying to use this AJAX to hide an element. The Forms API has a states functionality that makes it easy to conditionally show/hide elements. Read this for more info about states.
The #ajax callback is used to make a form that dynamically changes itself.
In Drupal it's not possible (without using third party modules) to use link tag as an AJAX triggering element. The alternative solution may be to create a hidden button element with AJAX functionality, and make link trigger click event on that hidden button.
Here is form function:
function mymodule__form($form, $form_state) {
// JS file contains the code for triggering click event on e hidden button.
$form['#attached']['js'][] =
drupal_get_path('module', 'mymodule') . '/js/mymodule.behaviors.js';
// Our link element.
$form['link_mymodule'] = array(
'#type' => 'link',
'#name' => 'link_mymodule',
'#title' => t('Perform mymodule logic'),
'#href' => current_path(),
'#options' => array(
'attributes' => array(
'class' => array('mymodule_ajax'),
),
),
);
// Hidden AJAX enabled submit button.
$form['mymodule_ajax_submit'] = array(
'#type' => 'button',
'#value' => 'AJAX submit',
'#name' => 'mymodule_ajax_submit',
// You may need this to disable validation.
'#limit_validation_errors' => array(),
'#ajax' => array(
'callback' => '_mymodule__form__pager_callback',
'event' => 'click',
),
'#attributes' => array(
// Class "element-hidden" will hide the button.
'class' => array('element-hidden', 'mymodule_ajax_submit'),
),
);
// Some element for tests.
$form['random_thing'] = array(
'#type' => 'markup',
'#markup' => rand(1, 10000),
// Wrapper is needed since AJAX will use it as a container for incoming data.
'#prefix' => '<div class="ajax_wrapper">',
'#suffix' => '</div>',
);
return $form;
}
You will also need callback function for replacing old data with new one since you are using AJAX:
function _mymodule__form__pager_callback($form, &$form_state) {
return array(
'#type' => 'ajax',
'#commands' => array(
ajax_command_replace('.ajax_wrapper', trim(render($form['random_thing']))),
),
);
}
Also you will have to attach click event to your link, which will trigger click event on a hidden button. That's what stored in /js/mymodule.behaviors.js file.
(function ($, Drupal) {
Drupal.behaviors.mymodule = {
attach: function (context, settings) {
// Since behaviors will be executed every times AJAX is called, it's better to use $.once() method even if you
// are going to use "context" argument. That is needed to be sure that event is attached only once.
$('.mymodule_ajax', context).once('mymodule_ajax', function () {
// Bind click event to out link.
$(this).click(function (e) {
// Prevent browser to follow the link.
e.preventDefault();
// Perform click triggering.
$('input.mymodule_ajax_submit').click();
});
});
}
}
}(jQuery, Drupal));
I have installed drupal 6, added some cck fields in one content type. Added two select box fields.
I am taking the selected value of parent select box and as per that selection passing relates options to next select box field using Ajax. (e.g Country -> State. When user selects country I want to pass state values into next select box.)
But when I am submitting the form it gives the following error:
"An illegal choice has been detected. Please contact the site administrator."
I don't know why it is not taking the ajaxified select box values while saving the node.
Does somebody has the solution on it. Is there any solution to handle this dynamic select options in Drupal.
Thanks in advance.
The same thing I'm working on drupal 7 and its work for me. Below is the code. Hope this help you. What I have done is on selection of car model car variant will change and the data save in the table.
function add_offer_form($form, $formstate) {
$form['add_offer_new_car_model'] = array(
'#type' => 'select',
'#required' => TRUE,
'#options' => $car_model,
'#ajax' => array(
'effect' => 'fade',
'progress' => array('type' => 'none'),
'callback' => 'variant_callback',
'wrapper' => 'replace_variant',
),
);
// Combo box to select new car variant
$form['add_offer_new_car_variant'] = array(
'#type' => 'select',
'#options' => array(),
// The prefix/suffix provide the div that we're replacing, named by #ajax['wrapper'] above.
'#prefix' => '<div id="replace_variant">',
'#suffix' => '</div>',
);
// An AJAX request calls the form builder function for every change.
// We can change how we build the form based on $form_state.
if (!empty($formstate['values']['add_offer_new_car_model'])) {
$model_id = $formstate['values']['add_offer_new_car_model'];
$rows = array();
$result = db_query("SELECT id, variant_name from {va_car_variant} where car_model_id in ($model_id,1) order by variant_name");
while ($data = $result->fetchObject()) {
$id = $data->id;
$rows[$id] = $data->variant_name;
}
$form['add_offer_new_car_variant']['#options'] = $rows;
}
}
////////////////////////////////////////////////////////
///////// FUNCTION FOR AJAX CALL BACK
function variant_callback($form, &$form_state) {
return $form['add_offer_new_car_variant'];
}
I'm trying to get an AJAX-submitted (AHAH) form working to display in a block on the sidebar. For testing purposes, I'm using an example module called "Poof" from the Pro Drupal Development book: http://books.google.com/books?id=VmZrdGuBZCMC&lpg=PA269&ots=cnHiYG6kXn&dq=pro%20drupal%20development%20poof&pg=PA269#v=onepage&q=pro%20drupal%20development%20poof&f=false
The only thing I've added to the example so far is an implementation of hook_block, which looks like this:
function poof_block($op = 'list', $delta = 0, $edit = array()) {
switch ($op) {
case 'list':
$blocks[0]['info'] = t('poof');
return $blocks;
case 'view':
$block['content'] = drupal_get_form('poof_form');
return $block;
}
}
The AJAX module works fine when displaying on its own page (mydrupalsite.com/poof) but when I call the form with module_invoke('poof', 'block' ...) in a template file, the form submits as normal (sans AJAX) and refreshes the page.
I can't find a definitive answer for why this happens, though a found something tangentially related that suggests that maybe AHAH doesn't work within blocks. If that's so, why? Or better yet, what's a work-around. Do I have to put the on its own blank page and bring it in with an iframe? That sounds unnecessarily messy.
UPDATED:
Here's more code for reference (again, it's from the Pro Drupal book)
function poof_form() {
$form['target'] = array(
'#type' => 'markup',
'#prefix' => '<div id="target">',
'#value' => t('Click the button below.'),
'#suffix' => '</div>',
);
$form['submit'] = array(
'#type' => 'button',
'#value' => t('Click Me'),
'#submit'=>false,
'#ahah' => array(
'event' => 'click',
'path' => 'poof/message_js',
'wrapper' => 'target',
'effect' => 'fade',
),
);
return $form;
}
function poof_message_js() {
$output = t('POOF!');
drupal_json(array('status' => TRUE, 'data' => $output));
}
Try adding
$blocks[0]['cache'] = BLOCK_NO_CACHE;
to your hook_block implementation.
Rendering a form with ahah causes a call to drupal_add_js to add the ahah javascript, but while the output of the block is cached, the javascript that gets added to the page doesn't.