Uncaught ReferenceError: regex is not defined when using depdrop in dynamic form [with fix]

[imtiazmahbub]

Hello! I ran into a trouble where dependent dropdown by kartik doesn't work with dynamicform.

I thought I'll share my solution to this problem with the community hoping it will help someone. Change yii2-dynamic-form.js

Fixing DepDrop

Replace the codeblock:

        // "kartik-v/yii2-widget-depdrop"
        var $hasDepdrop = $(widgetOptionsRoot.widgetItem).find('[data-krajee-depdrop]');
        if ($hasDepdrop.length > 0) {
            $hasDepdrop.each(function() {
                $(this).removeData().off();
                $(this).unbind();
                var configDepdrop = eval($(this).attr('data-krajee-depdrop'));
                var inputID = $(this).attr('id');
                var matchID = inputID.match(regex);
                if (matchID && matchID.length === 4) {
                    for (index = 0; index < configDepdrop.depends.length; ++index) {
                        var match = configDepdrop.depends[index].match(regex);
                        if (match && match.length === 4) {
                            configDepdrop.depends[index] = match[1] + matchID[2] + match[3];
                        }
                    }
                }
                $(this).depdrop(configDepdrop);
            });
        }

With this:

        // "kartik-v/yii2-widget-depdrop"
        var _restoreKrajeeDepdrop = function($elem) {
            var configDepdrop = $.extend(true, {}, eval($elem.attr('data-krajee-depdrop')));
            var inputID = $elem.attr('id');
            var matchID = inputID.match(regexID);

            if (matchID && matchID.length === 4) {
                for (index = 0; index < configDepdrop.depends.length; ++index) {
                    var match = configDepdrop.depends[index].match(regexID);
                    if (match && match.length === 4) {
                        configDepdrop.depends[index] = match[1] + matchID[2] + match[3];
                    }
                }
            }
            $elem.depdrop(configDepdrop);
        };
        var $hasDepdrop = $(widgetOptionsRoot.widgetItem).find('[data-krajee-depdrop]');
        if ($hasDepdrop.length > 0) {
            $hasDepdrop.each(function() {
                if ($(this).data('select2') === undefined) {
                     $(this).removeData().off();
                     $(this).unbind();
                     _restoreKrajeeDepdrop($(this));
                  }
                var configDepdrop = eval($(this).attr('data-krajee-depdrop'));
                $(this).depdrop(configDepdrop);
            });
        }

Fixing select2 function:

Replace this codeblock:

                $(this).select2('destroy');
                $.when($('#' + id).select2(configSelect2)).done(initSelect2Loading(id));
                $('#' + id).on('select2-open', function() {
                    initSelect2DropStyle(id)
                });

With this:

                $.when($('#' + id).select2(configSelect2)).done(initS2Loading(id));
                $('#' + id).on('select2-open', function() {
                    initSelect2DropStyle(id)
                });

[Hammash]

thank you

[malchikovma]

It helped me. Maybe this should be included in the source code? I think it's a bad practice to change library source code.

[imtiazmahbub]

yes it is. PR from anyone would be much appreciated

[Erkanion]

Ty, you help me a lot =)