Hello, and thank you for your time.
Our YII2 application has a modal window with a Kartik fileInput widget in it. This has been working for well over a year. However, we are testing moving the assets to a CDN, and problems have begun. We started seeing this in the console wherever the the fileinput was in a modal window.
Uncaught TypeError: jQuery(...).fileinput is not a function
If I remove the config that points it at a CDN, it works right away. To eliminate the CDN, I manually copied all the asset files to another web server we have in AWS, and pointed it to that. Same issue - the fileinput never loads. CDN issues removed from the equation…
Interestingly, if you close the modal window, and open it again, it works right away.
Here is the modal window:
use kartik\file\FileInput;
use yii\bootstrap\Modal;
use yii\helpers\Url;
use kartik\icons\FontAwesomeAsset;
FontAwesomeAsset::register($this);
use kartik\form\ActiveForm;
use yii\web\View;
$form1 = ActiveForm::begin([
'options'=>['enctype'=>'multipart/form-data'],
'id'=>'model-fake',
]);
echo FileInput::widget([ //removed to keep simple ]);
ActiveForm::end();
?>
<button class="btn btn-primary _addNew" onClick="$('#modal').modal('hide')">Close Window</button>
We are calling this view in the controller using:
if (Yii::$app->request->isAjax) {
return $this->renderAjax('_ajaxUpload', [
'model' => $model,
'title' => $title,
'div' => $div,
'pjax' => $pjax,
'container' => $container,
'category' => $category,
]);
}
Over the course of many hours/days, I’ve tried:
- Comparing the files served when using a CDN versus a local server - they are identical!
- Checked package levels - Kartiks’ plugins are the most recent.
- Removing duplicate bundles in the modal window - confirmed none are now being loaded twice - didn’t help:
Yii::$app->assetManager->bundles = [
'yii\bootstrap\BootstrapPluginAsset' => false,
'yii\bootstrap\BootstrapAsset' => false,
'yii\web\JqueryAsset' => false,
'yii\web\YiiAsset' => false,
];
- Trying calling this modal using a renderPartial (which doesn’t load ANY assets) and manually adding them one by one. Didn’t help.
- Finally, I added the fileinput asset bundle MANUALLY to the page CALLING the modal window. In other words, the assets are now preloading from the main page ready for the modal window. I don’t use a fileinput on the parent page, so I never had it there. Upon doing this, the error changed to:
Uncaught TypeError: jQuery(...).activeForm is not a function
but the fileinput came up. Okay - so this means it is not the fileinput (in my mind) because another asset bundle is affected by this.
Finally, based on that last feedback, I tried putting the following in the parent view:
use kartik\file\FileInputAsset;
FileInputAsset::register($this);
use yii\widgets\ActiveFormAsset;
ActiveFormAsset::register($this);
Suddenly, everything worked! Whether I was calling assets from the CDN, remote server, or same server. I doubt this is needed, but just in case, here is how I’m setting where I get the asset bundle:
web.php:
'assetManager' => [
'appendTimestamp' => false,
'baseUrl' => '@cdn/assets/',
'bundles' => [
//...
]
]
],
],
Now, I’ve removed all other things I put in there for testing including the removal of duplicate bundles mentioned in 3 above. All I need to do is add those two lines. I tested this in other locations, and it worked! There, the parent view was already using activeform, so I didn’t have to manually register that.
So here is my question:
Is the way I’m loading assets fundamentally flawed? Should all assets be loaded from the parent view, even if not being used by the parent view, with none being called from the renderajax view? Initial testing (has not been completed yet - there are about 100 modal calls) only shows the ones with a Kartik fileinput exhibiting this problem. But the fact I also have to add an activeform as well leads me to think it is my responsibility.
Bonus questions:
Any guesses as to why switching to a CDN or external server triggers this?
What is the proper way to load an asset - will it always be the name of the widget + the word Asset? eg:
use kartik\file\FileInput;
becomes:
use kartik\file\FileInputAsset;
FileInputAsset::register($this);
Thank you again for your time, and I’m sorry if this has been covered before - I’ve looked, and couldn’t find much.
