Message Boards

Can't use Liferay.DynamicSelect script inside Liferay.AutoFields

Alexander Popov, modified 3 Years ago.

Can't use Liferay.DynamicSelect script inside Liferay.AutoFields

New Member Posts: 2 Join Date: 11/25/17 Recent Posts

Hi,

I've got dynamic select fields so that possible values of second field is filtered by the selected value of first field (Liferay.DynamicSelect). That is worked okey. Also I've got fieldset that could be cloned by pressed plus button - that is Liferay.Autofields script and it is also worked fine.
But! When I'm trying to use dynamic select fields inside Liferay.AutoFields box, these dynamic fileds work only for first instance but stop to work for cloned ones.
I'm googled for a days but no success. Example here was inspired by link bellow, but it seems that is not the exactly appropriate.
https://github.com/liferay/liferay-portal/blob/master/modules/apps/portal-settings/portal-settings-web/src/main/resources/META-INF/resources/addresses.jsp

I've found related questions on stackoverflow with custom form validator scripts inside Liferay.AutoFields but I was not manage to connect dots.

The problem is likely with namespaces of JavaScript scripts. But unfortunately I'm too weak with JavaScript and would be very appreciate any suggestions.

Liferay 7.3.5 ga6.

<liferay-frontend:fieldset cssClass="observations" id='<%= liferayPortletResponse.getNamespace() + "observations" %>' >

<div class="lfr-form-row">
    <div class="row-fields">
       <clay:col md="6">
          <aui:select label="sciencecode.science-code-key" name="scienceCodeKey" required="true" />
       </clay:col>
       <clay:col md="6">
          <aui:select label="observationcode.observation-code-key" name="observationCodeKey" required="true" />
       </clay:col>
    </div>
</div>
   <script>
      new Liferay.DynamicSelect([
         {
             namespace: '<portlet:namespace />',
            select: '<portlet:namespace />scienceCodeKey',
            selectId: 'scienceCodeKey',
            selectDesc: 'scienceCodeValue',
            selectSort: true,
            selectVal: '',
            selectData: function(callback) {
               Liferay.Service(
                       '/cr.sciencecode/get-science-code-extra',
                       {
                          languageId: "<%= themeDisplay.getLocale().toString() %>",
                          includeKey: true
                       },
                       callback
               )
            }
         },
         {
             namespace: '<portlet:namespace />',
            select: '<portlet:namespace />observationCodeKey',
            selectData: function(callback, selectKey) {Liferay.Service(
                    '/cr.observationcode/get-observation-code-extra',
                    {
                       languageId: "<%= themeDisplay.getLocale().toString() %>",
                       scienceCodeKey: selectKey,
                       includeKey: true
                    },
                    callback)},
            selectDesc: 'observationCodeValue',
            selectSort: true,
            selectId: 'observationCodeKey',
            selectVal: ''
         }
      ]);
   </script>

</liferay-frontend:fieldset>



<aui:script use="liferay-auto-fields">
<%--<script>--%>
   new Liferay.AutoFields({
    contentBox: '#<portlet:namespace />observations',
      fieldIndexes: '<portlet:namespace />observationsIndexes',
      namespace: '<portlet:namespace />',
      on: {
         'clone': function(event) {
            var guid = event.guid;
            var row = event.row;

            var dynamicSelects = row.one(
                    'select[data-componentType=dynamic_select]'
            );

            /*console.log(dynamicSelects);
            console.log(guid);*/

            if (dynamicSelects) {
               dynamicSelects.detach('change');
            }

            new Liferay.DynamicSelect([
               {
                  namespace: '<portlet:namespace />' + guid,
                  select: '<portlet:namespace />scienceCodeKey' + guid,
                  selectData: function(callback) {
                     Liferay.Service(
                             '/cr.sciencecode/get-science-code-extra',
                             {
                                languageId: "<%= themeDisplay.getLocale().toString() %>",
                                includeKey: true
                             },
                             callback
                     )
                  },
                  selectDesc: 'scienceCodeValue',
                  selectId: 'scienceCodeKey',
                  selectSort: '<%= true %>',
                  selectVal: '',
               },
               {
                  namespace: '<portlet:namespace />' + guid,
                  select: '<portlet:namespace />observationCodeKey' + guid,
                  selectData: function(callback, selectKey) {Liferay.Service(
                          '/cr.observationcode/get-observation-code-extra',
                          {
                             languageId: "<%= themeDisplay.getLocale().toString() %>",
                             scienceCodeKey: selectKey,
                             includeKey: true
                          },
                          callback)},
                  selectDesc: 'observationCodeValue',
                  selectId: 'observationCodeKey',
                  selectVal: '',
               },
            ]);
         },
   },
/*      sortable: true,
      sortableHandle: '.lfr-form-row'*/
   }).render();
<%--</script>--%>
</aui:script>