AgentTicketPhone FreeText issue

AlexG · Post by **AlexG** » 29 Sep 2011, 13:04

Heyho
I am working in the AgentTicketPhone.dtl to show TicketFreeText1 only when a few Services are selected.
But I have the problem that TicketFreeText1 isn't hidden from the start, so the rest can't work too.

Code: Select all

<script type="text/javascript">//<![CDATA[
    $('#TypeID').bind('change', function (Event) {
        Core.AJAX.FormUpdate($('#NewPhoneTicket'), 'AJAXUpdate', 'TypeID', 'ServiceID', ['NewUserID', 'NewResponsibleID', 'NextStateID', 'PriorityID', 'ServiceID', 'SLAID', 'SignKeyID', 'CryptKeyID', 'TicketFreeText1', 'TicketFreeText2', 'TicketFreeText3', 'TicketFreeText4', 'TicketFreeText5', 'TicketFreeText6', 'TicketFreeText7', 'TicketFreeText8', 'TicketFreeText9', 'TicketFreeText10', 'TicketFreeText11', 'TicketFreeText12', 'TicketFreeText13', 'TicketFreeText14', 'TicketFreeText15', 'TicketFreeText16', 'To', 'Cc', 'Bcc']);

#Show TicketFreeText1 START
#only while ServiceID = 3,4,7,23,24
Core.Customer.InitFocus();
function nonetext() {
        document.getElementById('TicketFreeText1').style.display = 'none';
        document.getElementById('LabelTicketFreeText1').style.display = 'none';
}
    switch ($('#ServiceID').val() ) {
        case  "3":
                nonetext(); // This clears all the ticketfreetext listed before showing what you want
                document.getElementById('TicketFreeText1').style.display = 'block';
                document.getElementById('LabelTicketFreeText1').style.display = 'block';
        break;
        case "4":
                nonetext(); // This clears all the ticketfreetext listed before showing what you want
                document.getElementById('TicketFreeText1').style.display = 'block';
                document.getElementById('LabelTicketFreeText1').style.display = 'block';
        break;
        case "7":
                nonetext(); // This clears all the ticketfreetext listed before showing what you want
                document.getElementById('TicketFreeText1').style.display = 'block';
                document.getElementById('LabelTicketFreeText1').style.display = 'block';
        break;
        case "23":
                nonetext(); // This clears all the ticketfreetext listed before showing what you want
                document.getElementById('TicketFreeText1').style.display = 'block';
                document.getElementById('LabelTicketFreeText1').style.display = 'block';
        break;
        case "24":
                nonetext(); // This clears all the ticketfreetext listed before showing what you want
                document.getElementById('TicketFreeText1').style.display = 'block';
                document.getElementById('LabelTicketFreeText1').style.display = 'block';
        break;
        default:
                document.getElementById('TicketFreeText1').style.display = 'none';
                document.getElementById('LabelTicketFreeText1').style.display = 'none';
        }
#Show TicketFreeText1 END

   });

//]]></script>

Post by **crythias** » 29 Sep 2011, 15:12

This is because the clear happens in the onChange section. If you want to clear (none) the free text at start, you'll have to run that outside of the onchange event (for instance, at the bottom in the after load)

AlexG · Post by **AlexG** » 29 Sep 2011, 15:22

Which part of it and where is the end of the load?

Post by **crythias** » 20 Oct 2011, 13:26

If what you want to do is affected by Service, you'll need to put your "on change" after service:

Code: Select all

<script type="text/javascript">//<![CDATA[
    $('#ServiceID').bind('change', function (Event) {
        Core.AJAX.FormUpdate($('#NewPhoneTicket'), 'AJAXUpdate', 'ServiceID', ['NewUserID', 'NewResponsibleID', 'NextStateID', 'PriorityID', 'SLAID', 'SignKeyID', 'CryptKeyID', 'TicketFreeText1', 'TicketFreeText2', 'TicketFreeText3', 'TicketFreeText4', 'TicketFreeText5', 'TicketFreeText6', 'TicketFreeText7', 'TicketFreeText8', 'TicketFreeText9', 'TicketFreeText10', 'TicketFreeText11', 'TicketFreeText12', 'TicketFreeText13', 'TicketFreeText14', 'TicketFreeText15', 'TicketFreeText16', 'To', 'Cc', 'Bcc']);
#Show TicketFreeText1 START
#only while ServiceID = 3,4,7,23,24
Core.Customer.InitFocus();
    switch ($('#ServiceID').val() ) {
        case  "3":
                document.getElementById('TicketFreeText1').style.display = 'block';
                document.getElementById('LabelTicketFreeText1').style.display = 'block';
        break;
        case "4":
                document.getElementById('TicketFreeText1').style.display = 'block';
                document.getElementById('LabelTicketFreeText1').style.display = 'block';
        break;
        case "7":
                document.getElementById('TicketFreeText1').style.display = 'block';
                document.getElementById('LabelTicketFreeText1').style.display = 'block';
        break;
        case "23":
                document.getElementById('TicketFreeText1').style.display = 'block';
                document.getElementById('LabelTicketFreeText1').style.display = 'block';
        break;
        case "24":
                document.getElementById('TicketFreeText1').style.display = 'block';
                document.getElementById('LabelTicketFreeText1').style.display = 'block';
        break;
        default:
                document.getElementById('TicketFreeText1').style.display = 'none';
                document.getElementById('LabelTicketFreeText1').style.display = 'none';
        }
#Show TicketFreeText1 END
    });
//]]></script>

nonetext is only relevant if you want to clear *other* TicketFreeText fields and show only relevant.

Since this code is "onChange", you'll want to add, perhaps at the bottom of the .dtl:

Code: Select all

<!--dtl:js_on_document_complete-->
<script type="text/javascript">//<![CDATA[
    Core.Agent.TicketAction.Init();
#Begin hide
                document.getElementById('TicketFreeText1').style.display = 'none';
                document.getElementById('LabelTicketFreeText1').style.display = 'none';
#End hide
//]]></script>
<!--dtl:js_on_document_complete-->

AlexG · Post by **AlexG** » 24 Oct 2011, 11:23

Done.

New Problem:
The TicketFreeText won't show when I select the right Service.

Post by **crythias** » 24 Oct 2011, 14:04

1) Is it enabled
2) do you have the appropriate service id number to use as a case?

Otherwise, please explain what you've tried, an example of code, what the id number of the service is, if it is truly TicketFreeText1, If TicketFreeText1 has information in SysConfig and if you've tried things like
default:
alert("Got Here" + $('#ServiceID').val()); #popup if the wrong serviceid
document.getElementById('TicketFreeText1').style.display = 'none';
document.getElementById('LabelTicketFreeText1').style.display = 'none';
}

AlexG · Post by **AlexG** » 24 Oct 2011, 14:19

1. It is enabled in the Sysconfig.
2. Yep.
3. The Textfield will not be shown, when I use the following Code @EOF

Code: Select all

<!--dtl:js_on_document_complete-->
<script type="text/javascript">//<![CDATA[
Core.Agent.TicketAction.Init();
#Begin hide
                document.getElementById('TicketFreeText1').style.display = 'none';
                document.getElementById('LabelTicketFreeText1').style.display = 'none';
#End hide
//]]></script>
<!--dtl:js_on_document_complete-->

4. If your default: alert example should be in the switch-case, it doesn't trigger anything.

It looks like the switch-case is ignored.

The Code:

Code: Select all

<!--dtl:js_on_document_complete-->
<script type="text/javascript">//<![CDATA[
    $('#ServiceID').bind('change', function (Event) {
        Core.AJAX.FormUpdate($('#NewPhoneTicket'), 'AJAXUpdate', 'ServiceID', ['NewUserID', 'NewResponsibleID', 'NextStateID', 'PriorityID', 'SLAID', 'SignKeyID', 'CryptKeyID', 'TicketFreeText1', 'TicketFreeText2', 'TicketFreeText3', 'TicketFreeText4', 'TicketFreeText5', 'TicketFreeText6', 'TicketFreeText7', 'TicketFreeText8', 'TicketFreeText9', 'TicketFreeText10', 'TicketFreeText11', 'TicketFreeText12', 'TicketFreeText13', 'TicketFreeText14', 'TicketFreeText15', 'TicketFreeText16', 'To', 'Cc', 'Bcc']);

#Show TicketFreeText1 START
#only while ServiceID = 3,4,7,23,24
#See EOF for Hide Block
Core.Customer.InitFocus();
    switch ($('#ServiceID').val() ) {
        case  "3":
                nonetext(); // This clears all the ticketfreetext listed before showing what you want
                document.getElementById('TicketFreeText1').style.display = 'block';
                document.getElementById('LabelTicketFreeText1').style.display = 'block';
        break;
        case "4":
                nonetext(); // This clears all the ticketfreetext listed before showing what you want
                document.getElementById('TicketFreeText1').style.display = 'block';
                document.getElementById('LabelTicketFreeText1').style.display = 'block';
        break;
        case "7":
                nonetext(); // This clears all the ticketfreetext listed before showing what you want
                document.getElementById('TicketFreeText1').style.display = 'block';
                document.getElementById('LabelTicketFreeText1').style.display = 'block';
        break;
        case "23":
                nonetext(); // This clears all the ticketfreetext listed before showing what you want
                document.getElementById('TicketFreeText1').style.display = 'block';
                document.getElementById('LabelTicketFreeText1').style.display = 'block';
        break;
        case "24":
                nonetext(); // This clears all the ticketfreetext listed before showing what you want
                document.getElementById('TicketFreeText1').style.display = 'block';
                document.getElementById('LabelTicketFreeText1').style.display = 'block';
        break;
        default:
                document.getElementById('TicketFreeText1').style.display = 'none';
                document.getElementById('LabelTicketFreeText1').style.display = 'none';
        }
#Show TicketFreeText1 END


    });
//]]></script>
<!--dtl:js_on_document_complete-->

If I change the selected Service, I can see the TicketFreeText-Field is updated but it won't show.

StefanoBoccanera · Post by **StefanoBoccanera** » 03 Nov 2011, 13:44

crythias wrote:If what you want to do is affected by Service, you'll need to put your "on change" after service:

Code: Select all

<script type="text/javascript">//<![CDATA[
    $('#ServiceID').bind('change', function (Event) {
        Core.AJAX.FormUpdate($('#NewPhoneTicket'), 'AJAXUpdate', 'ServiceID', ['NewUserID', 'NewResponsibleID', 'NextStateID', 'PriorityID', 'SLAID', 'SignKeyID', 'CryptKeyID', 'TicketFreeText1', 'TicketFreeText2', 'TicketFreeText3', 'TicketFreeText4', 'TicketFreeText5', 'TicketFreeText6', 'TicketFreeText7', 'TicketFreeText8', 'TicketFreeText9', 'TicketFreeText10', 'TicketFreeText11', 'TicketFreeText12', 'TicketFreeText13', 'TicketFreeText14', 'TicketFreeText15', 'TicketFreeText16', 'To', 'Cc', 'Bcc']);
#Show TicketFreeText1 START
#only while ServiceID = 3,4,7,23,24
Core.Customer.InitFocus();
    switch ($('#ServiceID').val() ) {
        case  "3":
                document.getElementById('TicketFreeText1').style.display = 'block';
                document.getElementById('LabelTicketFreeText1').style.display = 'block';
        break;
        case "4":
                document.getElementById('TicketFreeText1').style.display = 'block';
                document.getElementById('LabelTicketFreeText1').style.display = 'block';
        break;
        case "7":
                document.getElementById('TicketFreeText1').style.display = 'block';
                document.getElementById('LabelTicketFreeText1').style.display = 'block';
        break;
        case "23":
                document.getElementById('TicketFreeText1').style.display = 'block';
                document.getElementById('LabelTicketFreeText1').style.display = 'block';
        break;
        case "24":
                document.getElementById('TicketFreeText1').style.display = 'block';
                document.getElementById('LabelTicketFreeText1').style.display = 'block';
        break;
        default:
                document.getElementById('TicketFreeText1').style.display = 'none';
                document.getElementById('LabelTicketFreeText1').style.display = 'none';
        }
#Show TicketFreeText1 END
    });
//]]></script>

nonetext is only relevant if you want to clear *other* TicketFreeText fields and show only relevant.

Since this code is "onChange", you'll want to add, perhaps at the bottom of the .dtl:

Code: Select all

<!--dtl:js_on_document_complete-->
<script type="text/javascript">//<![CDATA[
    Core.Agent.TicketAction.Init();
#Begin hide
                document.getElementById('TicketFreeText1').style.display = 'none';
                document.getElementById('LabelTicketFreeText1').style.display = 'none';
#End hide
//]]></script>
<!--dtl:js_on_document_complete-->

Hi guys

I modified the AgentTicketPhone according to this example to show selected ticket freetext and article freetext switching on the Ticket Type selction.
By the way the same approach used into CustomerTicket Message works very well.

I put following code at the bottom of file

Code: Select all

<script type="text/javascript">//<![CDATA[
    Core.Agent.TicketAction.Init();
function agnonetext() {
      document.getElementById('TicketFreeText2').style.value = '-';
      document.getElementById('TicketFreeText2').style.display = 'none';
      document.getElementById('LabelTicketFreeText2').style.display = 'none' 
      document.getElementById('TicketFreeText3').style.display = 'none';
      document.getElementById('LabelTicketFreeText3').style.display = 'none';
      document.getElementById('TicketFreeText4').style.display = 'none';
      document.getElementById('LabelTicketFreeText4').style.display = 'none'; 
      document.getElementById('TicketFreeText5').style.value = '-';
      document.getElementById('TicketFreeText5').style.display = 'none';
      document.getElementById('LabelTicketFreeText5').style.display = 'none';
      document.getElementById('TicketFreeText6').style.value = '-';
      document.getElementById('TicketFreeText6').style.display = 'none';
      document.getElementById('LabelTicketFreeText6').style.display = 'none' 
      document.getElementById('TicketFreeText7').style.display = 'none';
      document.getElementById('LabelTicketFreeText7').style.display = 'none';
      document.getElementById('TicketFreeText8').style.display = 'none';
      document.getElementById('LabelTicketFreeText8').style.display = 'none';
      document.getElementById('TicketFreeText9').style.display = 'none';
      document.getElementById('LabelTicketFreeText9').style.display = 'none';
      document.getElementById('TicketFreeText10').style.display = 'none';
      document.getElementById('LabelTicketFreeText10').style.display = 'none' 
      document.getElementById('TicketFreeText11').style.display = 'none';
      document.getElementById('LabelTicketFreeText11').style.display = 'none';
      document.getElementById('TicketFreeText12').style.display = 'none';
      document.getElementById('LabelTicketFreeText12').style.display = 'none';
      document.getElementById('TicketFreeText13').style.display = 'none';
      document.getElementById('LabelTicketFreeText13').style.display = 'none';
      document.getElementById('TicketFreeText14').style.display = 'none';
      document.getElementById('LabelTicketFreeText14').style.display = 'none';
      document.getElementById('TicketFreeText15').style.display = 'none';
      document.getElementById('LabelTicketFreeText15').style.display = 'none';
      document.getElementById('TicketFreeText16').style.display = 'none';
      document.getElementById('LabelTicketFreeText16').style.display = 'none';
      document.getElementById('ArticleFreeText1').style.display = 'none';
      document.getElementById('LabelArticleFreeText1').style.display = 'none';
      document.getElementById('ArticleFreeText2').style.display = 'none';
      document.getElementById('LabelArticleFreeText2').style.display = 'none';
      document.getElementById('ArticleFreeText3').style.display = 'none';
      document.getElementById('LabelArticleFreeText3').style.display = 'none'; 
}
function aggetrfctext() {
         document.getElementById('TicketFreeText4').style.display = 'block';
         document.getElementById('LabelTicketFreeText4').style.display = 'block';      
         document.getElementById('TicketFreeText5').style.display = 'block';
         document.getElementById('LabelTicketFreeText5').style.display = 'block';
         document.getElementById('TicketFreeText6').style.display = 'block';
         document.getElementById('LabelTicketFreeText6').style.display = 'block' 
         document.getElementById('TicketFreeText7').style.display = 'block';
         document.getElementById('LabelTicketFreeText7').style.display = 'block';
         document.getElementById('TicketFreeText8').style.display = 'block';
         document.getElementById('LabelTicketFreeText8').style.display = 'block';
         document.getElementById('TicketFreeText9').style.display = 'block';
	   document.getElementById('LabelTicketFreeText9').style.display = 'block';
         document.getElementById('TicketFreeText10').style.display = 'block';
         document.getElementById('LabelTicketFreeText10').style.display = 'block' 
         document.getElementById('TicketFreeText11').style.display = 'block';
         document.getElementById('LabelTicketFreeText11').style.display = 'block';
         document.getElementById('TicketFreeText12').style.display = 'block';
         document.getElementById('LabelTicketFreeText12').style.display = 'block';
         document.getElementById('TicketFreeText13').style.display = 'block';
         document.getElementById('LabelTicketFreeText13').style.display = 'block';
         document.getElementById('TicketFreeText14').style.display = 'block';
         document.getElementById('LabelTicketFreeText14').style.display = 'block';
         document.getElementById('TicketFreeText15').style.display = 'block';
         document.getElementById('LabelTicketFreeText15').style.display = 'block';
         document.getElementById('TicketFreeText16').style.display = 'block';
         document.getElementById('LabelTicketFreeText16').style.display = 'block';
         document.getElementById('ArticleFreeText1').style.display = 'block';
         document.getElementById('LabelArticleFreeText1').style.display = 'block';
         document.getElementById('ArticleFreeText2').style.display = 'block';
         document.getElementById('LabelArticleFreeText2').style.display = 'block';
         document.getElementById('ArticleFreeText3').style.display = 'block';
         document.getElementById('LabelArticleFreeText3').style.display = 'block';
}
function aggetextreqtext() {
         document.getElementById('TicketFreeText8').style.display = 'block';
         document.getElementById('LabelTicketFreeText8').style.display = 'block';
         document.getElementById('TicketFreeText9').style.display = 'block';
         document.getElementById('LabelTicketFreeText9').style.display = 'block';
         document.getElementById('TicketFreeText13').style.display = 'block';
         document.getElementById('LabelTicketFreeText13').style.display = 'block';
}
function aggetrequesttext() {
         document.getElementById('TicketFreeText2').style.display = 'block';
         document.getElementById('LabelTicketFreeText2').style.display = 'block';
         document.getElementById('TicketFreeText8').style.display = 'block';
         document.getElementById('LabelTicketFreeText8').style.display = 'block';
         document.getElementById('TicketFreeText9').style.display = 'block';
         document.getElementById('LabelTicketFreeText9').style.display = 'block';
         document.getElementById('TicketFreeText13').style.display = 'block';
         document.getElementById('LabelTicketFreeText13').style.display = 'block';
}

switch ($('#TypeID').val() ){
         case "":
         document.getElementById('Dest').value = '2\|\|Raw';
         agnonetext();
         break;
         case "1":
         document.getElementById('Dest').value = '2\|\|Raw';
         agnonetext();
         break;
         case "2":
         agnonetext();
        document.getElementById('Dest').value = '2\|\|Raw';
         break;     
         case  "16":
         document.getElementById('Dest').value = '5\|\|DGSA-Collegamenti';
         agnonetext();
         aggetextreqtext();
         break;
         case  "17":
         document.getElementById('Dest').value = '6\|\|DGSA-InterventiCentrali';
         agnonetext();
         aggetrequesttext();
         break;
         case  "18":
         document.getElementById('Dest').value = '7\|\|DGSA-InterventiIntermedi';
         nonetext();
         aggetrequesttext();
         break;
         case  "19":
         document.getElementById('Dest').value = '9\|\|RfC-Standard';
         agnonetext();
         document.getElementById('TicketFreeText3').style.display = 'block';
         document.getElementById('LabelTicketFreeText3').style.display = 'block';
         aggetrfctext();
         break;
         case  "20":
         document.getElementById('Dest').value = '8\|\|RfC-Non-Standard';
         agnonetext();
         aggetrfctext();
         break;
         case  "21":
         document.getElementById('Dest').value = '10\|\|RfC-Hot-Fix';
         agnonetext();
         aggetrfctext();
         break;
         case  "22":
         document.getElementById('Dest').value = '11\|\|RfC-Emergency';
         agnonetext();
         aggetrfctext();
         break;
         default:
         document.getElementById('Dest').value = '2\|\|Raw';
         agnonetext();
        }
alert("Coda selezionata "+$('#Dest').val());
alert("Ticket Type selezionato "+$('#TypeID').val());
# ---
# ITSM
# ---
    $('a.AsPopup').bind('click', function (Event) { Core.UI.Popup.OpenPopup($(this).attr('href'), 'Action'); return false;});
# ---
//]]></script>
<!--dtl:js_on_document_complete-->

running the form I saw a funny problem:

1) At start the form ran with all freetext hidden (Correct)
2) I select a Ticket type, but nothing happen
3) I refresh the web form and the queue is selected and the right freetext are shown
4) I had repeat step 2 and 3 to change the selection and freetext shown correctly

It seems like the code is executed at the start and after any refresh, but not on Ticket Type change. It's a different behaviour respect of CustomerTicketMessage, I tied to ste the InitFocus function, but it seem not exist into this dtl.

How we I solve the problem (it's very important for my customer) ?

best regards

stefano

Post by **crythias** » 03 Nov 2011, 14:42

If you want to react to onChange of Type, or service, or Queue or whatever, you'll need to put the case/switch in the javascript of the section that changes, not at the bottom of the dtl.

You'd put "hide everything" (or initial state) at the bottom of the dtl, but onChange should be where it changes, which is next to the form element.

AlexG · Post by **AlexG** » 09 Nov 2011, 09:17

StefanoBoccanera · Post by **StefanoBoccanera** » 09 Nov 2011, 10:45

crythias wrote:If you want to react to onChange of Type, or service, or Queue or whatever, you'll need to put the case/switch in the javascript of the section that changes, not at the bottom of the dtl.

You'd put "hide everything" (or initial state) at the bottom of the dtl, but onChange should be where it changes, which is next to the form element.

Hi crythias

You are right, I put the same code in AgentPhoneTicket in the Type jscript section. By the way the code works also if I put it on the bottom.

My big problem is about validation freetext 'before' the form will be submitted. That doesn't work, but would be according to several example found on literature.

I'd like your opinion about a different schema:

- define a block for every freetext
- put the validation for the 'mandatory' field into the section:

Code: Select all

$('#TicketFreeText2').bind('change', function (Event) {
        # put the validation here #        
        $('input#Expand').val(1);
        Core.Form.Validate.DisableValidation($(this).closest('form'));
        $(this).closest('form').submit();
    });

and refocusing on the same field if not validation occurs using this statement: $(this).closest('form').TicketFreeText2.focus();

Do you think could work?

regards

stefano

Post by **crythias** » 09 Nov 2011, 14:38

Without verifying it myself, the concept seems relatively sound, and probably the tactic that I would consider, even to the point of possibly overriding/overloading the submit onclick to verify your pseudo-mandatory fields.

I'd also consider whether I'd add class="Mandatory" to the appropriate fields as they're shown, and see if that works.

Make it mandatory:

Code: Select all

var d = document.getElementById('TicketFreeText1');
d.className += ' Mandatory';

Remove Mandatory

Code: Select all

document.getElementById("TicketFreeText1").className =  document.getElementById("TicketFreeText1").className.replace ( /(?:^|\s)Mandatory(?!\S)/ , '' );

For more info: http://stackoverflow.com/questions/1959 ... javascript

Znuny Open Source Ticketsystem

AgentTicketPhone FreeText issue

AgentTicketPhone FreeText issue

Re: AgentTicketPhone FreeText issue

Re: AgentTicketPhone FreeText issue

Re: AgentTicketPhone FreeText issue

Re: AgentTicketPhone FreeText issue

Re: AgentTicketPhone FreeText issue

Re: AgentTicketPhone FreeText issue

Re: AgentTicketPhone FreeText issue

Re: AgentTicketPhone FreeText issue

Re: AgentTicketPhone FreeText issue

Re: AgentTicketPhone FreeText issue

Re: AgentTicketPhone FreeText issue