Yii2: yiiActiveForm js data attribute is undefined

[nick-denry]

Hi!

I'm getting this error $(...).data(...) is undefined while trying to access the default contact form something via yii.activeForm.js.

For example: $('#contact-form').data('yiiActiveForm').attributes;
or if I trying to add a new field as described here https://github.com/samdark/yii2-cookbook/blob/master/book/forms-activeform-js.md#adding-and-removing-fields-dynamically

$('#contact-form').yiiActiveForm('add', {
    'id': 'address',
    'name': 'address',
    'container': '.field-address',
    'input': '#address',
    'error': '.field-address .help-block'
});

The order of js scripts is correct:

<script src="/assets/fabadf61/jquery.js"></script>
<script src="/assets/3d6b6680/yii.js"></script>
<script src="/assets/3d6b6680/yii.validation.js"></script>
<script src="/assets/3d6b6680/yii.captcha.js"></script>
<script src="/assets/3d6b6680/yii.activeForm.js"></script>
<script src="/js/testForm.js"></script> <!-- test js here -->
<script src="/assets/df91ef16/js/bootstrap.js"></script>

Content of the testForm.js

$(document).ready(function() {
    console.log($('#contact-form').data('yiiActiveForm').attributes);
});

It looks like data attribute is not set. Is it a kind of bug or I've missed something or better docs needed?

UPD. Yii 2.0.6 used.

[alex-code]

Could this be a race condition?
The ActiveForm script might be included before yours but the inline script that initializes it would be after.

The ActiveForm js might benefit from an init event that can be bound too.

[nick-denry]

@Alex-Code exactly! Thank you.

<script src="/assets/fabadf61/jquery.js"></script>
<script src="/assets/3d6b6680/yii.js"></script>
<script src="/assets/3d6b6680/yii.validation.js"></script>
<script src="/assets/3d6b6680/yii.captcha.js"></script>
<script src="/assets/3d6b6680/yii.activeForm.js"></script>
<script src="/js/testForm.js"></script>
<script src="/assets/df91ef16/js/bootstrap.js"></script>
<script type="text/javascript">jQuery(document).ready(function () {
jQuery('#contactform-verifycode-image').yiiCaptcha({"refreshUrl":"\/index.php?r=site%2Fcaptcha\u0026refresh=1","hashKey":"yiiCaptcha\/site\/captcha"});
jQuery('#contact-form').yiiActiveForm([{"id":"contactform-name","name":"name","container":".field-contactform-name","input":"#contactform-name","error":".help-block.help-block-error","validate":function (attribute, value, messages, deferred, $form) {yii.validation.required(value, messages, {"message":"Name cannot be blank."});}},{"id":"contactform-email","name":"email","container":".field-contactform-email","input":"#contactform-email","error":".help-block.help-block-error","validate":function (attribute, value, messages, deferred, $form) {yii.validation.required(value, messages, {"message":"Email cannot be blank."});yii.validation.email(value, messages, {"pattern":/^[a-zA-Z0-9!#$%&'*+\/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+\/=?^_`{|}~-]+)*@(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?$/,"fullPattern":/^[^@]*<[a-zA-Z0-9!#$%&'*+\/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+\/=?^_`{|}~-]+)*@(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?>$/,"allowName":false,"message":"Email is not a valid email address.","enableIDN":false,"skipOnEmpty":1});}},{"id":"contactform-subject","name":"subject","container":".field-contactform-subject","input":"#contactform-subject","error":".help-block.help-block-error","validate":function (attribute, value, messages, deferred, $form) {yii.validation.required(value, messages, {"message":"Subject cannot be blank."});}},{"id":"contactform-body","name":"body","container":".field-contactform-body","input":"#contactform-body","error":".help-block.help-block-error","validate":function (attribute, value, messages, deferred, $form) {yii.validation.required(value, messages, {"message":"Body cannot be blank."});}},{"id":"contactform-verifycode","name":"verifyCode","container":".field-contactform-verifycode","input":"#contactform-verifycode","error":".help-block.help-block-error","validate":function (attribute, value, messages, deferred, $form) {yii.validation.captcha(value, messages, {"hash":690,"hashKey":"yiiCaptcha/site/captcha","caseSensitive":false,"message":"The verification code is incorrect."});}}], []);
});</script>

UPD.

The ActiveForm js might benefit from an init event that can be bound too.

Could you provide some example of init event or how I could connect my js file after inline ActiveFormInit?

[samdark]

Seems to be non-issue. Please continue discussion at forums.

[pptyasar]

how the issue fixed @nick-denry

[fasomann]

It's an old issue, but you should try:

$(document).load(function() {
    console.log($('#contact-form').data('yiiActiveForm').attributes);
});

or:

$this->registerJs("
    console.log($('#contact-form').data('yiiActiveForm').attributes);
", yii\web\View::POS_LOAD);

on document ready won't work...