Yii2 calling javascript function at another file

Question

I have a js file and a index file which are located in the same folder. This is my form. I have already register the script already too.

$this->registerJs($this->render('script.js'), \yii\web\VIEW::POS_READY);

<?php $form = ActiveForm::begin(); ?>
<div class="booth">
    <video id="video" width="400" height="300"></video>
    <a href="#" id="capture" class="button">Take Photo</a>
    <canvas id="canvas" width="400" height="300"></canvas>
</div>

<div class="form-group">
       <?= Html::button('Save',['class'=>'btn btn-primary','onclick'=>'saveimage();']) ?>
</div>

 <?php ActiveForm::end(); ?>

This is the function inside the js file.

function saveimage()
{
    var csrfToken = $('meta[name="csrf-token"]').attr("content");

    console.log(123);

    })*/
}

When I clicked my button is show error Uncaught Reference Error: saveimage is not defined ? Its there anyway to call the function?

I tried 'onclick'=> 'js:saveimage()' too, but still not working.

Answer 1

Try:

$this->registerJs(
    "function saveimage()
     {
        var csrfToken = $('meta[name="csrf-token"]').attr("content");

        console.log(123);

     }",
    \yii\web\VIEW::POS_READY,
    'my-button-handler'
);

Or alternatively, If you want to use a separate js file you can use below syntax:

$this->registerJsFile(
    '@web/js/script.js',
    ['depends' => [\yii\web\JqueryAsset::className()]]
);

When working with the yii\\web\\View object you can dynamically register frontend scripts. There are two dedicated methods for this:

1) registerJs() for inline scripts

2) registerJsFile() for external scripts

For more details refer to the link .