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

trafficstars

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)
                });