Widgets rendered inside renderAjax not rendering properly

I am rendering a view through renderAjax and it has a TouchSpin widget (kartik-v) but the widget is not displaying properly, I believe it has something to do with the initialization of the widget but I believe this should work because I’m using renderAjax not renderPartial. Kindly help me, thanks.

Here is my code:
Controller:

use yii\helpers\Url;
use yii\helpers\Html;
use kartik\touchspin\TouchSpin;
        
$hashids = Yii::createObject(['class' => 'light\hashids\Hashids']);
$product = Products::findOne($hashids->decode($id));

return $this->renderAjax("product-details-modal", [
    'product' => $product
]);

View:

use yii\helpers\Url;
use yii\helpers\Html;
use kartik\touchspin\TouchSpin;
        
$hashids = Yii::createObject(['class' => 'light\hashids\Hashids']);

echo TouchSpin::widget([
	"name" => "product-modal-quantity",
	'pluginOptions' => ['verticalbuttons' => true]
]);

Is that correct that assets are missing?

I’m not sure if assets are missing because I’ve tried it the same way on other projects and it’s working. And I’ve also removed all of the custom css and js on my custom AssetBundle. The only thing that remains there is the dependency YiiAsset and BootstrapPluginAsset.

Btw here’s the image of the script that are loaded when I’m calling the TouchSpin widget.

Already fixed it!

Solution:
Put an id on the widget.

I guess widgets rendered inside renderAjax must have a custom id because the ids generated (ex. w0, w1, etc.) inside the renderAjax have might have the same id on the original page. That’s why the initialization of the widget fails.

1 Like