Hiding mandatory dynamic fields

aph · Post by **aph** » 15 Sep 2014, 16:41

When I click on 'send email' button, 'nothing happens'. The form is not submitted and no new ticket is created.

I'm not sure whether the problem is due to a script in the code. The script shows/hides dynamic fields based on the value of other dynamic fields.
Below is the content of my script

Code: Select all

function queueFields() {
            $("[id^=DynamicField]").parent().addClass( 'Hidden' );
            $("[id^=LabelDynamicField]").parent().addClass('Hidden');
        }
            $('#Dest').bind('change', function (Event) {
                Core.AJAX.FormUpdate($('#NewEmailTicket'), 'AJAXUpdate', 'Dest', ['TypeID', 'NewUserID', 'NewResponsibleID', 'NextStateID', 'PriorityID', 'ServiceID', 'SLAID', 'SignKeyID', 'CryptKeyID', 'To', 'Cc', 'Bcc', 'StandardTemplateID' $Data{"DynamicFieldNamesStrg"}]);
            switch ( $('#Dest').val() ) {
                    case "6\|\|xxxx": // need to slash escape the pipes. Also, need to be in numerical order
                        queueFields();
                        $('#DynamicField_Product').parent().removeClass( 'Hidden' );
                        $('#LabelDynamicField_Product').parent().removeClass( 'Hidden' );
                  $('#DynamicField_MasterSlave').parent().removeClass( 'Hidden' );
                        $('#LabelDynamicField_MasterSlave').parent().removeClass( 'Hidden' );
                  $('#DynamicField_Kategorie1').parent().removeClass( 'Hidden' );
                        $('#LabelDynamicField_Kategorie1').parent().removeClass( 'Hidden' );
                    break;
                    default:
                        queueFields();

                }
            })
         
         $('#DynamicField_Kategorie1').bind('change', function (Event) {
                Core.AJAX.FormUpdate($('#NewEmailTicket'), 'AJAXUpdate', 'DynamicField_Kategorie1', ['TypeID', 'NewUserID', 'NewResponsibleID', 'NextStateID', 'PriorityID', 'ServiceID', 'SLAID', 'SignKeyID', 'CryptKeyID', 'To', 'Cc', 'Bcc', 'StandardTemplateID' $Data{"DynamicFieldNamesStrg"}]);
            switch ( $('#DynamicField_Kategorie1').val() ) {
                    case "xxxx":      
#                        queueFields();

                        $('#DynamicField_Kategorie2').parent().removeClass( 'Hidden' );
                        $('#LabelDynamicField_Kategorie2').parent().removeClass( 'Hidden' );
                  
                    break;
               case "xxxx":
                  $('#DynamicField_Kategorie2').parent().addClass( 'Hidden' );
                        $('#LabelDynamicField_Kategorie2').parent().addClass( 'Hidden' );
                  
               break;
                    default:
                        queueFields();

                }
         
            });

What could be wrong with the script?

aph · Post by **aph** » 15 Sep 2014, 17:56

I realized that the fields to be hidden/shown are mandatory fields. Kategorie1 is a drop down field whereas Kategorie2 is a text field. How can I make the fields invisible and that they are no more mandatory when hidden?

aph · Post by **aph** » 16 Sep 2014, 09:47

I tried adding removeClass( 'Mandatory' ) to fields which should not be mandatory when hidden. But it doesn't seem to achieve the result that I want, i.e. a mandatory field when hidden from the ticket form should not be mandatory anymore. Below is my code, slightly revised from the previous post.

When queue A is selected the field 'MasterSlave' and a mandatory field 'Kategorie1' are shown. On selecting the option 'Benutzerverwaltung' for 'Kategorie1' another mandatory field 'Kategorie2' is shown. On selecting the option 'Sonstiges'
When queue B is selected only the field 'Product' is shown.

Code: Select all

        function queueFields() {
            $("[id^=DynamicField]").parent().addClass( 'Hidden' );
            $("[id^=LabelDynamicField]").parent().addClass('Hidden');
        }
            $('#Dest').bind('change', function (Event) {
                Core.AJAX.FormUpdate($('#NewEmailTicket'), 'AJAXUpdate', 'Dest', ['TypeID', 'NewUserID', 'NewResponsibleID', 'NextStateID', 'PriorityID', 'ServiceID', 'SLAID', 'SignKeyID', 'CryptKeyID', 'To', 'Cc', 'Bcc', 'StandardTemplateID' $Data{"DynamicFieldNamesStrg"}]);
            switch ( $('#Dest').val() ) {
                    case "5\|\|A": // need to slash escape the pipes. Also, need to be in numerical order
                        queueFields();
                        $('#DynamicField_MasterSlave').parent().removeClass( 'Hidden' );
                        $('#LabelDynamicField_MasterSlave').parent().removeClass( 'Hidden' );
						$('#DynamicField_Kategorie1').parent().removeClass( 'Hidden' );
                        $('#LabelDynamicField_Kategorie1').parent().removeClass( 'Hidden' );
						$('#DynamicField_Kategorie2').parent().removeClass( 'Mandatory' );
                        $('#LabelDynamicField_Kategorie2').parent().removeClass( 'Mandatory' );
                    break;
					
					case "6\|\|B": // need to slash escape the pipes. Also, need to be in numerical order
                        queueFields();
                        $('#DynamicField_Product').parent().removeClass( 'Hidden' );
                        $('#LabelDynamicField_Product').parent().removeClass( 'Hidden' );
                    break;
                    default:
                        queueFields();

                }
            })
			
			$('#DynamicField_Kategorie1').bind('change', function (Event) {
                Core.AJAX.FormUpdate($('#NewEmailTicket'), 'AJAXUpdate', 'DynamicField_Kategorie1', ['TypeID', 'NewUserID', 'NewResponsibleID', 'NextStateID', 'PriorityID', 'ServiceID', 'SLAID', 'SignKeyID', 'CryptKeyID', 'To', 'Cc', 'Bcc', 'StandardTemplateID' $Data{"DynamicFieldNamesStrg"}]);
            switch ( $('#DynamicField_Kategorie1').val() ) {
                    case "Benutzerverwaltung":		
                        $('#DynamicField_Kategorie2').parent().removeClass( 'Hidden' );
                        $('#LabelDynamicField_Kategorie2').parent().removeClass( 'Hidden' );
                    break;
					case "Sonstiges":

					$('#DynamicField_Kategorie2').parent().addClass( 'Hidden' );
                    $('#LabelDynamicField_Kategorie2').parent().addClass( 'Hidden' );
						$('#DynamicField_Kategorie2').parent().removeClass( 'Mandatory' );
                        $('#LabelDynamicField_Kategorie2').parent().removeClass( 'Mandatory' );
						
					break;
                    default:
                        queueFields();

                }
			
            });

Kategorie1 is a drop down field, whereas Kategorie2 is a text field. Where could I be going wrong? Any hints?

aph · Post by **aph** » 16 Sep 2014, 10:11

I also tried following viewtopic.php?f=60&t=8032&start=50#p82769 yet with no success. Below is my code

Code: Select all

function queueFields() {
            $("[id^=DynamicField]").parent().addClass( 'Hidden' );
            $("[id^=LabelDynamicField]").parent().addClass('Hidden');
        }
            $('#Dest').bind('change', function (Event) {
                Core.AJAX.FormUpdate($('#NewEmailTicket'), 'AJAXUpdate', 'Dest', ['TypeID', 'NewUserID', 'NewResponsibleID', 'NextStateID', 'PriorityID', 'ServiceID', 'SLAID', 'SignKeyID', 'CryptKeyID', 'To', 'Cc', 'Bcc', 'StandardTemplateID' $Data{"DynamicFieldNamesStrg"}]);
            switch ( $('#Dest').val() ) {
                    case "5\|\|A": // need to slash escape the pipes. Also, need to be in numerical order
                        queueFields();
                        $('#DynamicField_MasterSlave').parent().removeClass( 'Hidden' );
                        $('#LabelDynamicField_MasterSlave').parent().removeClass( 'Hidden' );
                  $('#DynamicField_Kategorie1').parent().removeClass( 'Hidden' );
                        $('#LabelDynamicField_Kategorie1').parent().removeClass( 'Hidden' );
                  $('#DynamicField_Kategorie2').parent().removeClass( 'Validate_RequiredDropdown' );
                        $('#LabelDynamicField_Kategorie2').parent().removeClass( 'Validate_RequiredDropdown' );
                    break;
               
               case "6\|\|B": // need to slash escape the pipes. Also, need to be in numerical order
                        queueFields();
                        $('#DynamicField_Product').parent().removeClass( 'Hidden' );
                        $('#LabelDynamicField_Product').parent().removeClass( 'Hidden' );
$('#DynamicField_Kategorie2').removeClass( 'Validate_RequiredDropdown' );
                        $('#LabelDynamicField_Kategorie2').removeClass( 'Validate_RequiredDropdown' );
						$('#DynamicField_Kategorie1').removeClass( 'Validate_RequiredDropdown' );
                        $('#LabelDynamicField_Kategorie1').removeClass( 'Validate_RequiredDropdown' );
                    break;
                    default:
                        queueFields();

                }
            })
         
         $('#DynamicField_Kategorie1').bind('change', function (Event) {
                Core.AJAX.FormUpdate($('#NewEmailTicket'), 'AJAXUpdate', 'DynamicField_Kategorie1', ['TypeID', 'NewUserID', 'NewResponsibleID', 'NextStateID', 'PriorityID', 'ServiceID', 'SLAID', 'SignKeyID', 'CryptKeyID', 'To', 'Cc', 'Bcc', 'StandardTemplateID' $Data{"DynamicFieldNamesStrg"}]);
            switch ( $('#DynamicField_Kategorie1').val() ) {
                    case "Benutzerverwaltung":      
                        $('#DynamicField_Kategorie2').parent().removeClass( 'Hidden' );
                        $('#LabelDynamicField_Kategorie2').parent().removeClass( 'Hidden' );
                    break;
               case "Sonstiges":

               $('#DynamicField_Kategorie2').parent().addClass( 'Hidden' );
                    $('#LabelDynamicField_Kategorie2').parent().addClass( 'Hidden' );
                  $('#DynamicField_Kategorie2').parent().removeClass( 'Validate_RequiredDropdown' );
                        $('#LabelDynamicField_Kategorie2').parent().removeClass( 'Validate_RequiredDropdown' );
$('#DynamicField_Kategorie1').removeClass( 'Validate_RequiredDropdown' );
                        $('#LabelDynamicField_Kategorie1').removeClass( 'Validate_RequiredDropdown' );
                  
               break;
                    default:
                        queueFields();

                }
         
            });

aph · Post by **aph** » 16 Sep 2014, 14:06

Does anybody have an idea how to hide mandatory dynamic fields?

aph · Post by **aph** » 17 Sep 2014, 11:14

I got a step closer. I used following:

Code: Select all

						$('#DynamicField_Kategorie1').removeClass('Validate_Required');
						$('#DynamicField_Kategorie2').removeClass('Validate_Required');

Instead of

Code: Select all

						$('#DynamicField_Kategorie1').removeClass('Validate_RequiredDropdown');
						$('#DynamicField_Kategorie2').removeClass('Validate_RequiredDropdown');

Now the form gets submitted but I get a popup one or more errors occured. On inspecting elements I get following entries:

Kategorie1:

Code: Select all

<div class="Row Row_DynamicField_Kategorie1 Hidden">
                    <label id="LabelDynamicField_Kategorie1" for="DynamicField_Kategorie1" class="Mandatory LabelError">
    <span class="Marker">*</span>
    Kategorie 1:
</label>

                    <div class="Field Hidden">
                        <select class="DynamicFieldText Validate_Required ServerError Error" id="DynamicField_Kategorie1" name="DynamicField_Kategorie1" size="1" aria-invalid="true" aria-required="true">
  <option value="" selected="selected">-</option>
  <option value="Benutzerverwaltung">Benutzerverwaltung</option>
  <option value="Sonstiges">Sonstiges</option>
</select>
<div id="DynamicField_Kategorie1Error" class="TooltipErrorMessage">
    <p>
        This field is required.
    </p>
</div>

<div id="DynamicField_Kategorie1ServerError" class="TooltipErrorMessage">
    <p>
        This field is required.
    </p>
</div>



                    </div>
                    <div class="Clear"></div>
                </div>

and a similar entry for 'Kategorie2'

My revised code is as follows:

Code: Select all

function queueFields() {
            $("[id^=DynamicField]").parent().addClass( 'Hidden' );
            $("[id^=LabelDynamicField]").parent().addClass('Hidden');
        }
            $('#Dest').bind('change', function (Event) {
                Core.AJAX.FormUpdate($('#NewEmailTicket'), 'AJAXUpdate', 'Dest', ['TypeID', 'NewUserID', 'NewResponsibleID', 'NextStateID', 'PriorityID', 'ServiceID', 'SLAID', 'SignKeyID', 'CryptKeyID', 'To', 'Cc', 'Bcc', 'StandardTemplateID' $Data{"DynamicFieldNamesStrg"}]);
            switch ( $('#Dest').val() ) {
                    case "5\|\|A": // need to slash escape the pipes. Also, need to be in numerical order
                        queueFields();
                        $('#DynamicField_MasterSlave').parent().removeClass( 'Hidden' );
                        $('#LabelDynamicField_MasterSlave').parent().removeClass( 'Hidden' );
						$('#DynamicField_Kategorie1').parent().removeClass( 'Hidden' );
                        $('#LabelDynamicField_Kategorie1').parent().removeClass( 'Hidden' );
						
                    break;
					
					case "6\|\|B": // need to slash escape the pipes. Also, need to be in numerical order
                        queueFields();
                        $('#DynamicField_Product').parent().removeClass( 'Hidden' );
                        $('#LabelDynamicField_Product').parent().removeClass( 'Hidden' );
						$('#DynamicField_Kategorie1').parent().addClass( 'Hidden' );
                        $('#LabelDynamicField_Kategorie1').parent().addClass( 'Hidden' );
						$('#DynamicField_Kategorie2').parent().addClass( 'Hidden' );
                        $('#LabelDynamicField_Kategorie2').parent().addClass( 'Hidden' );
						
						$('#DynamicField_Kategorie1').removeClass('Validate_Required');
						$('#DynamicField_Kategorie2').removeClass('Validate_Required');

                    break;
                    default:
                        queueFields();

                }
            })
			
			$('#DynamicField_Kategorie1').bind('change', function (Event) {
                Core.AJAX.FormUpdate($('#NewEmailTicket'), 'AJAXUpdate', 'DynamicField_Kategorie1', ['TypeID', 'NewUserID', 'NewResponsibleID', 'NextStateID', 'PriorityID', 'ServiceID', 'SLAID', 'SignKeyID', 'CryptKeyID', 'To', 'Cc', 'Bcc', 'StandardTemplateID' $Data{"DynamicFieldNamesStrg"}]);
            switch ( $('#DynamicField_Kategorie1').val() ) {
                    case "Benutzerverwaltung":		
                        $('#DynamicField_Kategorie2').parent().removeClass( 'Hidden' );
                        $('#LabelDynamicField_Kategorie2').parent().removeClass( 'Hidden' );
                    break;
					case "Sonstiges":

					$('#DynamicField_Kategorie2').parent().addClass( 'Hidden' );
                    $('#LabelDynamicField_Kategorie2').parent().addClass( 'Hidden' );
						
					break;
                    default:
                        queueFields();

                }
			
            });

How can I get rid off these errors?

aph · Post by **aph** » 18 Sep 2014, 09:01

Is it not possible to hide mandatory dynamic fields on the ticket screen?

reneeb · Post by **reneeb** » 18 Sep 2014, 10:42

You have to use a "default value" then. A mandatory field has to have a value! This is not only checked on the client side with JavaScript but also on the server side...

aph · Post by **aph** » 18 Sep 2014, 17:40

Thank you reneeb. Is there a way to disable the server side validation for these fields?

reneeb · Post by **reneeb** » 18 Sep 2014, 19:18

Make the fields optional in the sysconfig!

Otherwise you have to change the backend file and add the same logic you added to the frontend with JavaScript.

aph · Post by **aph** » 22 Sep 2014, 15:52

Thanks. I'll probably have to redine the process. What I basically want is to have different masks for different departments. Adding a custom mask for each dept wouldn't solve my problem, since some mandatory fields have to be hidden on every mask. An example is that IT wants certain fields to be mandatory when a user account creation is selected as an option from a drop down list. These fields are however not mandatory when the option miscelleneous is selected. I'm slowly running out of options for achieving this. Chaning the backend file would be too big an operation so I was wondering if there is any other way to achieve this.

Znuny Open Source Ticketsystem