[Solved]How to hide and show many dynamic fields in OTRS 4.0.8

[smuwanga]

Hello good people,

I have applied js on dynamic fields in OTRS 3.X, and all worked fine. However, the same does not work for me in OTRS 4.0.8. BTW, it was a fresh installation of 4.0.8.

FrontEnd Module file: AgentTicketEmail.tt

I have three dynamic fields so far. Country, State, Kingdom. On selecting a country like United States of America, the field state show be displayed. On choosing United Kingdom, the field kingdom should be displayed, and hide State.
Here is the code;

Code: Select all

[% RenderBlockStart("DynamicField_country") %]
                    <div class="Row Row_DynamicField_[% Data.Name | html %]">
                        [% Data.Label %]
                        <div class="Field">
                            [% Data.Field %]
[% WRAPPER JSOnDocumentComplete %]
<script type="text/javascript">//<![CDATA[
   function nonetext() {
	    $('#DynamicField_state').parent().addClass( 'Hidden' );
	    $('#LabelDynamicField_state').parent().addClass('Hidden');
 
            $('#DynamicField_kingdom').parent().addClass( 'Hidden' );
	    $('#LabelDynamicField_kingdom').parent().addClass('Hidden');
    }
    $('#DynamicField_country').bind('change', function (Event) {

        Core.AJAX.FormUpdate($('#NewEmailTicket'), 'AJAXUpdate', 'DynamicField_country', [ 'TypeID', 'Dest', 'NewUserID','NewResponsibleID', 'PriorityID', 'ServiceID', 'SLAID', 'SignKeyID', 'CryptKeyID', 'To', 'Cc', 'Bcc', 'StandardTemplateID' [% Data.DynamicFieldNamesStrg %]]);

   switch ($('#DynamicField_country').val() ) {
		case "united_states_of_america":
                   nonetext();
                   $('#LabelDynamicField_state').parent().removeClass( 'Hidden' );
                   $('#DynamicField_state').parent().removeClass( 'Hidden' );
		   break;
	        case "united_kingdom":
                   nonetext();
                   $('#LabelDynamicField_kingdom').parent().removeClass( 'Hidden' );
                   $('#DynamicField_kingdom').parent().removeClass( 'Hidden' );
		   break;
	   	default:
		    nonetext();
     }
    });
//]]></script>
[% END %]
                        </div>
                        <div class="Clear"></div>
                    </div>
[% RenderBlockEnd("DynamicField_country") %]
[% RenderBlockStart("DynamicField_state") %]
                    <div class="Row Row_DynamicField_[% Data.Name | html %]">
                        [% Data.Label %]
                        <div class="Field">
                            [% Data.Field %]
                        </div>
                        <div class="Clear"></div>
                    </div>
[% RenderBlockEnd("DynamicField_state") %]

[% RenderBlockStart("DynamicField_kingdom") %]
                    <div class="Row Row_DynamicField_[% Data.Name | html %]">
                        [% Data.Label %]
                        <div class="Field">
                            [% Data.Field %]
                        </div>
                        <div class="Clear"></div>
                    </div>
[% RenderBlockEnd("DynamicField_kingdom") %]

What could I be missing? Am also exploring the use of output filters.

[smuwanga]

Got it working. I adjusted the format of the fields in JS. Seems the Doc elements were not being well recognised.

from
$('#DynamicField_state').parent().addClass( 'Hidden' );
$('#LabelDynamicField_state').parent().addClass('Hidden');

to

$("[id^=DynamicField_state]").parent().addClass( 'Hidden' );
$("[id^=LabelDynamicField_state]").parent().addClass( 'Hidden' );


All the correct code block is here below;

Code: Select all

[% RenderBlockStart("DynamicField_country") %]
                    <div class="Row Row_DynamicField_[% Data.Name | html %]">
                        [% Data.Label %]
                        <div class="Field">
                            [% Data.Field %]
[% WRAPPER JSOnDocumentComplete %]
<script type="text/javascript">//<![CDATA[
   function nonetext() {
$("[id^=DynamicField_state]").parent().addClass( 'Hidden' );
   $("[id^=LabelDynamicField_state]").parent().addClass( 'Hidden' );

   $("[id^=DynamicField_kingdom']").parent().addClass( 'Hidden' );
   $("[id^=LabelDynamicField_kingdom]").parent().addClass( 'Hidden' );
 }
    $('#DynamicField_country').bind('change', function (Event) {

        Core.AJAX.FormUpdate($('#NewEmailTicket'), 'AJAXUpdate', 'DynamicField_country', [ 'TypeID', 'Dest', 'NewUserID','NewResponsibleID', 'PriorityID', 'ServiceID', 'SLAID', 'SignKeyID', 'CryptKeyID', 'To', 'Cc', 'Bcc', 'StandardTemplateID' [% Data.DynamicFieldNamesStrg %]]);

   switch ($('#DynamicField_country').val() ) {
      case "united_kingdom":
                   nonetext();
                  $("[id^=DynamicField_state]").parent().removeClass( 'Hidden' );
                   $("[id^=LabelDynamicField_state]").parent().removeClass( 'Hidden' );
         break;
           case "united_states_of_america":
                   nonetext();
                  $("[id^=DynamicField_kingdom']").parent().removeClass( 'Hidden' );
                  $("[id^=LabelDynamicField_kingdom]").parent().removeClass( 'Hidden' );
         break;
         default:
          nonetext();
     }
    });
//]]></script>
[% END %]
                        </div>
                        <div class="Clear"></div>
                    </div>
[% RenderBlockEnd("DynamicField_country") %]
[% RenderBlockStart("DynamicField_state") %]
                    <div class="Row Row_DynamicField_[% Data.Name | html %]">
                        [% Data.Label %]
                        <div class="Field">
                            [% Data.Field %]
                        </div>
                        <div class="Clear"></div>
                    </div>
[% RenderBlockEnd("DynamicField_state") %]

[% RenderBlockStart("DynamicField_kingdom") %]
                    <div class="Row Row_DynamicField_[% Data.Name | html %]">
                        [% Data.Label %]
                        <div class="Field">
                            [% Data.Field %]
                        </div>
                        <div class="Clear"></div>
                    </div>
[% RenderBlockEnd("DynamicField_kingdom") %]