[SOLVED] Check dynamic-textfield via Javascript

[thr]

Hello guys, can anyone help me with a situation i am having? I am researching for a while now and can't really get to it ... :/ What i would like to know:
Is there a way in the ticket-create-screen to check the value of a dynamic textfield via javascript??

I have a couple of dynamic fields in my ticket-create-screen and would like to "validate" one of these, BEFORE the tickets gets submitted. I was thinking about onchange()="validateText()" in javascript, and run a function that does a validation on the fly. Do i have to use the templates in the AgentTicketEmail.dtl ???

Code: Select all

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

And where can i set the id of the field, so i can get it later via javascripts getElementByID? Am i on the right track, can this be done that way? I am open to suggestions.

[crythias]

You should Inspect Element/View source on a rendered page.

Example:
<input type="text" class="DynamicFieldText W50pc" id="DynamicField_dummy" name="DynamicField_dummy" title="Dummy Field" value="">

After rendering the page (maybe js_on_document_complete), you can add an onChange to a field.

[thr]

Ahhhhh, allright, i found the field i want.
Do i have to put the javascript-part into the .dtl or in a seperate file and load it somehow? ( If yes, can this be done via the Loaders in the Sysconfig? )

Is something like this gona do the job?

Code: Select all

var textToCheck = document.getElementById('DynamicField_AccountNr');
textToCheck.onchange = function() {
	if (textToCheck.value === "1234") {
		do some stuff... 
	} else if (textToCheck.value === "5678") {
                do some diffrent stuff...
	}
}

[crythias]

Do i have to put the javascript-part into the .dtl or in a seperate file and load it somehow? ( If yes, can this be done via the Loaders in the Sysconfig? )

in the .dtl would make sense

Is something like this gona do the job?

Try it and ask a different question :)

[thr]

^^ Point taken.

So i tried putting it in the AgentTicketEmail.dtl, near the end in a js_on_document_complete block. For the purpose of testing it, i wanted to show me an alert-box, but it has no response at all. Shall i try a diffrent part of the file? There are actually a couple of js_on_document_complete-blocks. I think javascript usucally doen't care at what part of the file its located, is this different here, does it need to be a specific block?

Or do i have to specify something else? Instead of just putting it in a random place.

Code: Select all

<!--dtl:js_on_document_complete-->
<script type="text/javascript">//<![CDATA[
Core.Agent.TicketAction.Init();
Core.Config.Set('Localization.Delete', "$JSText{"Delete"}");

var account = document.getElementById('DynamicField_AccountNr');
account.onchange = function() {
   if (account.value === "002278") {
	alert("1234!");
   } else if (account.value === "002279") {
	alert("5678");
   }
}

//]]></script>
<!--dtl:js_on_document_complete-->

# example template form for customizations
#<form action="$Env{"CGIHandle"}" method="post" enctype="multipart/form-data" id="Template1">

[crythias]

Check out that link about assigning onchange to a field.

[thr]

Which part exactly are you refering to? I have tried both ways, and neither of this codes has any effect at all:

Code: Select all

var text1 = document.getElementById('DynamicField_AccountNr');
   text1.addEventListener(
     'change',
     function() {
		if (text1.value === "1234") { // also tried ".innerHTML" instead of ".value" here
			alert("1234!");
		} else if (text1.value === "5678") {
			alert("5678");
		}
   }, false
   );

However if i try it on a local javascript/HTML-file it works perfectly...

[crythias]

'change',

code works perfectly for me (after mouseout/blur) just below/after the js_on_document_complete dtl grouping.

Check Inspect Element/Javascript console to make sure you don't get something like "Uncaught TypeError: Cannot read property 'addEventListener' of null " which means you're trying to addEventListener on a non-variable (spelling, not there, case sensitive).

[thr]

Hmm, interesting, i found something... The javascript console prints me among

Code: Select all

[15:22:37.755] "Working right here!"

which is fine, at least this is working...
also an error:

Code: Select all

[15:22:39.857] "[ERROR] JavaScriptError: initLinkedCICheckboxes is not defined"
[15:22:39.858] "[STACKTRACE] (?)()@http://otrs-test.atc.de/otrs/index.pl?Action=AgentTicketEmail:1177
Core.App</TargetNS.Ready/<@http://otrs-test.atc.de/otrs-web/js/js-cache/CommonJS_25414f048c0866ab9b0ff21cc339f80f.js:1269
x.Callbacks/c@http://otrs-test.atc.de/otrs-web/js/js-cache/CommonJS_25414f048c0866ab9b0ff21cc339f80f.js:2
x.Callbacks/p.fireWith@http://otrs-test.atc.de/otrs-web/js/js-cache/CommonJS_25414f048c0866ab9b0ff21cc339f80f.js:2
.ready@http://otrs-test.atc.de/otrs-web/js/js-cache/CommonJS_25414f048c0866ab9b0ff21cc339f80f.js:2
q@http://otrs-test.atc.de/otrs-web/js/js-cache/CommonJS_25414f048c0866ab9b0ff21cc339f80f.js:2"

Looks like he can't load some javascript files. I tried to delete the cache, (both, via script and manually) and rebuild the config.
Still the same. You have any ideas?? After a bit of research i found out, that it is possibly a KIX-problem.

[thr]

Son of a Bitch, Its finally working!!!

It turns out the Error was in the "AgentKIXSidebarLinkedCIs.dtl"-file in the KIX-Directory. the initLinkedCICheckboxes-function couldn't be found, because the <script> and <dtl>-Tags where set wrong. They didn't actually cover the declaration of the function and ended before that, so of course it wasn't found. After i fixed this, it finally worked!

Thanks man, without your input i would still be sitting in the dark