[SOLVED]How to hide and show many dynamic fields

Moderator: crythias

Locked
smuwanga
Znuny newbie
Posts: 27
Joined: 31 Dec 2014, 10:57
Znuny Version: 5.0.22
Real Name: Simon Peter Muwanga
Company: UgandaSoft
Contact:

[SOLVED]How to hide and show many dynamic fields

Post by smuwanga »

Hi,

I have 10 dynamic fields. I have begun with 4, namely;
-Customer Type
-Service Type(values: SMS, Data)
-Type of Data Service(Limited, Pay as you go,Unlimited)
-Type of Complaint(No connection, Message is shot,etc)

The display of some fields is dependent on some choices. I drew some lessons from the posts below;
http://jeffeske.com/blog/showhide-dynam ... n-queue-2/
http://jeffeske.com/blog/showhide-dynam ... n-queue-2/

I learnt that I can use services and ACLs. In this case, its not yet clear. So I created dynamic fields, and enabled them onto the AgentTicketEmail.dtl via SysConfig admin panel. When Data is selected from Service Type, the following should happen;
-Type of Data Service should display
-Type of Complaint hides

I made the following changes on AgentTicketEmail.dtl;
-Removed the code that automatically displays all dynamic fields at once.
-Added/used existing code to display each dynamic field under a block like this;

Code: Select all

# --- added by simon ----
<!-- dtl:block:DynamicField_customerType -->
                    <div class="Row Row_DynamicField_$QData{"Name"}">
                        $Data{"Label"}
                        <div class="Field">
                            $Data{"Field"}
                        </div>
                        <div class="Clear"></div>
                    </div>
<!-- dtl:block:DynamicField_customerType -->


<!-- dtl:block:DynamicField_serviceType -->
                    <div class="Row Row_DynamicField_$QData{"Name"}">
                        $Data{"Label"}
                        <div class="Field">
                            $Data{"Field"}

                        </div>
                        <div class="Clear"></div>
                    </div>
<!-- dtl:block:DynamicField_serviceType -->


<!-- dtl:block:DynamicField_typeOfDataService -->
                    <div class="Row Row_DynamicField_$QData{"Name"}">
                        $Data{"Label"}
                        <div class="Field">
                            $Data{"Field"}
                        </div>
                        <div class="Clear"></div>
                    </div>
<!-- dtl:block:DynamicField_typeOfDataService -->
What happens on the screen after refresh
All fields display very well.

When I add a javascript bind starting with the second field, serviceType, the rest of fields don't refresh at all. Here is my code.

Code: Select all

<!-- dtl:block:DynamicField_serviceType -->
                    <div class="Row Row_DynamicField_$QData{"Name"}">
                        $Data{"Label"}
                        <div class="Field">
                            $Data{"Field"}
                            <!--dtl:js_on_document_complete-->
<script type="text/javascript">//<![CDATA[
    $('#DynamicField_serviceType').bind('change', function (Event) {

       Core.Agent.InitFocus();
     switch ($('#DynamicField_serviceType').val() ) {
	case "data":
	   document.getElementById(‘LabelDynamicField_typeOfDataService’).style.display = ‘block';
           document.getElementById(‘DynamicField_typeOfDataService’).style.display = ‘block';
           break;
        case "Data":
	   document.getElementById(‘LabelDynamicField_typeOfDataService’).style.display = ‘block';
           document.getElementById(‘DynamicField_typeOfDataService’).style.display = ‘block';
           break;
   	case "voice_and_sms":
      	   #document.getElementById('DynamicField_typeOfDataService').style.display = 'none';
           break;
   	default:
           document.getElementById('id name').style.display = 'block';
        }
        Core.AJAX.FormUpdate($('#NewEmailTicket'), 'AJAXUpdate', 'DynamicField_serviceType', [ 'TypeID', 'Dest', 'NewUserID','NewResponsibleID', 'NextStateID', 'ServiceID', 'SLAID', 'SignKeyID', 'CryptKeyID', 'To', 'Cc', 'Bcc', 'StandardTemplateID' $Data{"DynamicFieldNamesStrg"}]);

     
    });
//]]></script>
<!--dtl:js_on_document_complete-->
                        </div>
                        <div class="Clear"></div>
                    </div>
<!-- dtl:block:DynamicField_serviceType -->

What I am doing wrong? The fields don't hide/display as I wish. They don't display either. I think I need some guidance. OTRS is captivating, I like it, and wanna learn more!
Thanking you,
Simon.
Last edited by smuwanga on 31 May 2015, 19:10, edited 1 time in total.
crythias
Moderator
Posts: 10170
Joined: 04 May 2010, 18:38
Znuny Version: 5.0.x
Location: SouthWest Florida, USA
Contact:

Re: How to hide and show many dynamic fields

Post by crythias »

OTRS 6.0.x (private/testing/public) on Linux with MySQL database.
Please edit your signature to include your OTRS version, Operating System, and database type.
Click Subscribe Topic below to get notifications. Consider amending your topic title to include [SOLVED] if it is so.
Need help? Before you ask
smuwanga
Znuny newbie
Posts: 27
Joined: 31 Dec 2014, 10:57
Znuny Version: 5.0.22
Real Name: Simon Peter Muwanga
Company: UgandaSoft
Contact:

Re:[SOLVED] How to hide and show many dynamic fields

Post by smuwanga »

Hello,

The link above was helpful. Many thanks Crythias.

Regards,
Simon.
Locked