Asset Bundles on Modal Windows

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;
use kartik\form\ActiveForm;
use yii\web\View;

$form1 = ActiveForm::begin([
echo FileInput::widget([ //removed to keep simple ]);
<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:

  1. Comparing the files served when using a CDN versus a local server - they are identical!
  2. Checked package levels - Kartiks’ plugins are the most recent.
  3. 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,
  1. Trying calling this modal using a renderPartial (which doesn’t load ANY assets) and manually adding them one by one. Didn’t help.
  2. 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;
use yii\widgets\ActiveFormAsset;

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:


'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;


use kartik\file\FileInputAsset;

Thank you again for your time, and I’m sorry if this has been covered before - I’ve looked, and couldn’t find much.

I would suggest you use the debugger in the browser to check if the asset loading is different between CDN and local resource. It is also possible you are getting cross site scripting issues when using CDN, as it’s likely you are bouncing off different domain names. You may be able to locate these errors in the browser console. I personally don’t see any harm in forcing the asset to load in the parent. And I would also personally feel I need to get to the bottom of this to see why it makes a difference. :grin:

Yeah - I am losing sleep over this one for sure!!

Yes, looking at the debugger, everything looks identical, except for the timing. The the CDN in use, resources load MUCH faster. There are no warning about cross-scripting (there was way in the beginning, but that was fixed). It does seem to be a timing thing as everyone once in a while, the fileinput’s “Browse” button appears for just a second, and then disappears. I also know everything gets loaded because I can manually, through the console, fire up the fileinput using a jquery command. I’ve tried across 5 browsers, and they all have the same result. CDN = problems, same server = no problems. :flushed:

I just learned I should have added @kartikv since there is a chance it’s related to one of his a-m-a-z-i-n-g plugins…

Okay - I think I’ve made progress… but am still struggling. I have run into similar issues using other plugins now, and I do see something different in the console. Please notice the “XHR” tags. The first image is WORKING, second is showing the FAIL:

Working: all assets and views on ONE SERVER:

–And here is the fail - Views on one server, assets on a DIFFERENT ONE:

Can anyone help me to understand why the browser is handling these scenarios different?

Is it because the ckeditor.js is not loading sooner? The uncaught exception refers to the ckeditor that is getting loaded after the exceptoin.