yii2: How to integrate AdminBSB Theme - javascript

I'm using yii2 advanced framework. And I am using AdminBSB theme for my layout. But this error appears. I tried on searching for same issues. But I can't figure it out. Here is the error when I inspect:
Uncaught TypeError: jQuery(...).yiiActiveForm is not a function
at HTMLDocument.
Some say I declare JS twice. But I didn't declare it twice or I didn't notice It call twice because of my template.
Below is how I am loading the javascript in my Asset Manager file.
public $js = [
"plugins/jquery/jquery.min.js",
"plugins/bootstrap/js/bootstrap.js",
"plugins/bootstrap-select/js/bootstrap-select.js",
"plugins/jquery-slimscroll/jquery.slimscroll.js",
"plugins/node-waves/waves.js",
"plugins/flot-charts/jquery.flot.js",
"plugins/jquery-sparkline/jquery.sparkline.js",
"js/admin.js"
];

i had the same theme and i also faced this error and that is because the yiiActiveForm is loaded before the jquery file does, even if you will fix that it will get in conflict with bootstrap js file that functions for the dropdown in the dashboard under user image. I advise you to change the loading of jquery and bootstrap to the following, you need to make some changes to you AppAsset.php file.
1.Remove the bootstrap and jquery links from the $js and $css arrays in the AppAsset.php.
2.Update your $depends array to the following.
public $depends = [
'yii\web\YiiAsset',
'yii\bootstrap\BootstrapAsset',
'yii\bootstrap\BootstrapPluginAsset',
];
3.Then update your frontend/config/main.php to the following.
'assetManager' => [
'bundles' => [
'yii\web\JqueryAsset' => [
'sourcePath' => null, 'js' => ['//code.jquery.com/jquery-2.2.4.min.js'],
],
'yii\bootstrap\BootstrapAsset' => [
'sourcePath' => null, 'css' => ['//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'],
],
'yii\bootstrap\BootstrapPluginAsset' => [
'sourcePath' => null, 'js' => ['//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'],
],
],
],

Related

yii2 How to remove unused query parameters from url

I have Kartik gridView and custom filter. After gridfilter in my browser i got URL like
localhost:20024/consignment?fid=&post_code=&pud2_mrn=&pud2_status=PUDP&pud_status=&pud2_remaining_date=&mrn=&mrn_status=&ioss_number=&declaration_type=&status=&entry_at=&exit_at=&created_at=
Is there a way to remove unfilled parameters from url inside YII instead javascript?
Or can anybody provide full example of javascript to achieve the goal.
Copy vendor/yiisoft/yii2/yii.gridView.js somewhere under web directory (e.g. web/js and add this line:
$.each(data, function (name, value) { if (value[0].length === 0) data[name] = null; });
prior this line in applyFilter method:
var pos = settings.filterUrl.indexOf('?');
Then add this to web.conf (update paths if you used different place for this js file):
'assetManager' => [
'bundles' => [
'yii\grid\GridViewAsset' => [
'sourcePath' => '#webroot/js',
'basePath' => '#webroot/js',
'baseUrl' => 'vendor/js',
],
],
],
This was you are not modifying anything in the vendor folder.

How to properly write a vuepress plugin?

I am trying to write a Vuepress plugin to make use of App Level enhancement and install a Vue plugin. But I can't seem to get this to work. Can you please take a look at the code below and see what is wrong?
{.vuepress/config.js}
module.exports = {
plugins: [
require('./builder.plugin.js')
]
}
{.vuepress/builder.plugin.js}
module.exports = (option, ctx) => {
return {
enhanceAppFiles: [{
name: 'builder-plugin',
content: `export default ({ Vue }) => {
Vue.component('b-header', {
name: 'b-header',
template: '<div id="header"><slot /></div>'
})
}`
}]
}
}
{README.md}
# Introduction
<b-header>Test from component</b-header>
The final error I get is:
Unknown custom element: <b-header> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
I actually found the answer. The above did not work because I was mixing client site code with runtime code by using a plugin.
The trick was to use enhanceAPP hook.
ref: https://vuepress.vuejs.org/guide/basic-config.html#theme-configuration

Shopify script_tag API - how to pass the variable?

I have some javascript code in my ShopifyApp which I'm adding to the ShopifyShop using script_tag API:
$response = $client->request(
'POST',
"https://{$store}/admin/script_tags.json",
[
'headers' => [
'X-Shopify-Access-Token' => $access_token
],
'form_params' => [
'script_tag' => [
"event" => "onload",
"src" => $scriptUrl
]
]
]);
Script:
var _smid = 'someValue';
(function(a,b,c,d,e) {...})
My problem is that I need to pass var _smid there which is different per App instalation (generated server side) - is there any way to do it or maybe some other way to actually pass script as variable from php and not as url to .js file?
Modify your script tag to do a callback to an App Proxy. That way, your App gets the store name, and any other data you need to pass to it.

yii2 dynamic-form wbraganca call javascript function

I have read some articles about yii2 dynamic-form and javascript function. The solution given by InsaneSkull is perfect. But i have one question.
example :
i'm using dynamic-form from wbraganca and trying to call function onchange event (javascript). My code like this
<?= $form->field($detail, "[{$i}]qty")->widget(\yii\widgets\MaskedInput::className(),
[
'clientOptions' => [
'alias' => 'numeric',
'groupSeparator' => ',',
'digits' => 0,
'autoGroup' => true,
'removeMaskOnSubmit' => true,
'rightAlign' => false,
],
'options' => [
'class' => 'form-control',
'onchange' => 'Info($(this))',
]
]) ?>
First, i try to register Info function like below
<?php
$script = <<< JS
function Info(item){
var index = item.attr("id").replace(/[^0-9.]/g, "");
alert(index);
};
JS;
$this->registerJs($script);
?>
It gave error because Info function not defined yet.
Second, I registered in AppAsset and it worked.
My question : what is the differences? *(I think it was the scope).
How to define the function beside register in AppAsset ?
Where dou you register above script? If in view after use widget, default position at which JS is register is POS_READY public void registerJs ( $js, $position = self::POS_READY, $key = null ) Try to use position POS_BEGIN or POS_HEAD if you want to put the script after use widget. Otherwise You can override widget class and put this script into init method of the widget which is execute before run method rendered widget.

Yii2 loading Jquery in the head of the page

In my Yii2 application i've a script that need Jquery to be loaded in the head of the page.
I know there's a parameter that can be setted inside AppAssets.php :
public $jsOptions = [
'position' => \yii\web\View::POS_HEAD
];
but this will render all the Javascripts Files on the head of the page.
Is possibile to load only Jquery on the head?
Thanks in advance for all the help
You could simply do this in your view, e.g. :
$this->registerAssetBundle(yii\web\JqueryAsset::className(), View::POS_HEAD);
Or if you want to do this for all your page, you could customize JqueryAsset in your components configuration :
'components' => [
'assetManager' => [
'bundles' => [
'yii\web\JqueryAsset' => [
'jsOptions' => [ 'position' => \yii\web\View::POS_HEAD ],
],
],
],
],
Read more about Customizing Asset Bundles.

Categories

Resources