Bind dynamic field Dropdown value with external data source

[GMunjal]

Hi,

We are implementing OTRS and we have to implement a dropdown which is filled from external data source.

So the requirement is -

Whenever we select the customer in ViewPhoneTicketNew/ViewEmailTicketNew page.
The customer value will be send as a parameter to the query(external database), on the basis of this value, we fetched the values of dropdown.

So the issue is -
how to send the value of customer to query.
Where to write & call script.
How to bind the fetched values with dropdown.

Thanks in advance.

Regards,
GMunjal

[crythias]

this might help.

[GMunjal]

Thanks for the information.

We tried the steps marked in the link.

Now if we browse the EXTData.pl file, it shows us the drop down values. but still on GUI the drop down is blank.

In AgentTicketEmail.dtl, we use the below code :

<div class="Field">
<select id="myselect" name="DynamicField_TRP">
</select>
</div>

<script type="text/javascript">
$.get('http://localhost/otrs/extdata.pl', function(data) {
$('#myselect').append(data);
});
</script>

But still we didn't get the dropdown values.

Can inputs on above issue ?

Regards,
GMunjal

[crythias]

Check your browser's javascript console. Make sure that jquery is on the page. Present here the extdata.pl result sample : 1 or 2 results

[GMunjal]

I use the below jquery

$.get('http://localhost/otrs/extdata.pl', function(data) {
$('#myselect').append(data);
});

but it didn't get called, as I check this by adding alert.

As if we open this URL directly, it gives us the below output :

<option value="abc"></option>
<option value="DEF"></option>
<option value="GHI"></option>
<option value="JKL"></option>


Any Imputs, is there is any wrong in JQuery ???
Regards,
GMunjal

[crythias]

but it didn't get called, as I check this by adding alert.

<option value="abc"></option>
<option value="DEF"></option>
<option value="GHI"></option>
<option value="JKL"></option>

Nothing to show makes sense. You have no display value between <option ...> and </option>

[GMunjal]

Hi,

Now Values are visible on extdata.pl, but data in dynamic field is still not visible. What should I do now?

[GMunjal]

Below are some more details of the issue :

If I open extdata.pl in browser as : http://1.1.2.20/otrs/extdata.pl

then it will show me a popup as : 'Do You want to open or save extData.Json from 1.1.2.20 ?' , If I click 'Yes' then is saves a file as extData.Json and when open the file it contains the below data :

Code: Select all

<option value="ABC-56">ABC-56</option>
<option value="ABC-57">ABC-57</option>
<option value="ABC-58">ABC-58</option>
<option value="ABC-59">ABC-59</option>
<option value="ABC-60">ABC-60</option>
<option value="ABC-61">ABC-61</option>

So the first question is, Is the setup till now is correct ? or the values must be shown on browser instead of saving the file ?

Next is :

In AgentTicketPhone.dtl file I write the below JS code :

Code: Select all

 $('#DynamicField_TRP').bind('click', function (data) {
 alert('show'),
 $.ajax({
 type: 'GET',
 url: 'http://1.1.2.20 /otrs/extdata.pl',
 data: data,
 success: function(data){
        alert('successful');
      }
});
});

In the above code I used, if I click on dropdown , then it will show only the first alert as 'Show'.

So Is the above code need changes or do I require to write some other code to bind the data with dropdown having id 'DynamicField_TRP'.

I also tried to use the below code, but no luck :

Code: Select all

 $.get('http://1.1.2.20/otrs/extdata.pl', function(data) {
           $('#DynamicField_TimeRegistrationProject').append(data);
           console.log(data);
   });

Please provide your inputs on above...

[reneeb]

url: 'http://1.1.2.20 /otrs/extdata.pl',

There's a space in the URL...

You should use the browsers' developer tools to debug AJAX calls like this.

[GMunjal]

This is just a typo mistake in raising issue, else there is no space in code.

[crythias]

What does your Javascript console say?

[reneeb]

This is just a typo mistake in raising issue, else there is no space in code.

You should copy'n'paste the code to this forum (and please use the

Code: Select all

 tags) this would help us to help you...

[crythias]

Why did you bind it on click?


If the following works, then your script should as well.
Make sure the select has an ID of DynamicField_TRP.
Don't forget that the dynamic field may not like values that aren't assigned, which means it might be better to use an input control instead of a select and use fuzzy search or change input field to a select field.

Code: Select all

var data='<option value="ABC-56">ABC-56</option><option value="ABC-57">ABC-57</option><option value="ABC-58">ABC-58</option><option value="ABC-59">ABC-59</option><option value="ABC-60">ABC-60</option><option value="ABC-61">ABC-61</option>';
$('#DynamicField_TRP').append(data);

[GMunjal]

Thanks for the solution..
now on page load values get loaded in drop down using the below code :


$( "#DynamicField_TRP" ).load( "http://1.1.2.20/otrs/extdata.pl", function() {

alert( "Load was performed." );

});

, but new issue in the same arises... on page if I change the value of any other dropdown, the dropdown values of DynamicField_TRP get vanish/clears and doesn't load back.


Thanks,

[Lubomirsb]

Hope this helps.

Code: Select all

$('#Dest').bind('change', function (Event) {

var MyVariable =  $('#CustomerID').val();
$.ajax({
  type:     'get' ,
  dataType: 'html' ,	
  url:   'extdata.pl'+'?q='+ MyVariable  ,
  success: function(html){
   
$("#DynamicField_Test2")
    .replaceWith('<select id="DynamicField_Test2" name="DynamicField_Test2" class="DynamicFieldText">' +
          html +
        '</select>');
     
  }
});


});

In this case i replace the input with a dropdown (otherwise the value wont save in the database).
Look at that " url: 'extdata.pl'+'?q='+ MyVariable "

[GMunjal]

Sorry for the confusion, as my issue is the dropdown value doesn't maintain if any ajax calls occurs on that page, i.e if any dropdown on the page change it values, my dropdown with external data source clears all its value and doesn't show again.

now on page load values get loaded in drop down using the below code :


$( "#DynamicField_TRP" ).load( "http://1.1.2.20/otrs/extdata.pl", function() {

alert( "Load was performed." );

});

, but new issue in the same arises... on page if I change the value of any other dropdown, the dropdown values of DynamicField_TRP get vanish/clears and doesn't load back.

[GMunjal]

In the solution you provided, that will help me only if there is one dropdown on page..

but the issue is ---

There are 9 dropdowns on page and one submit button on page... when ever a AJAX call is placed(on any dropdown value changed or on button click), the dynamic dropdown I added( which is filled on after select the customerID) is got empty.

Ajax calls - This below is example of one ajax call shown on priroty ID value change.

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

});


Please provide your input.

[GMunjal]

In the solution you provided, that will help me only if there is one dropdown on page..

but the issue is ---

There are 9 dropdowns on page and one submit button on page... when ever a AJAX call is placed(on any dropdown value changed or on button click), the dynamic dropdown I added( which is filled on after select the customerID) is got empty.

Ajax calls - This below is example of one ajax call shown on priroty ID value change.

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

});


Please provide your input.

[crythias]

$Data{"DynamicFieldNamesStrg"}

Wherever this is says update the DynamicField(s) on the page.

[chrisvwn]

So I faced the same problem with the dynamic drop down being emptied whenever I changed the value of another dropdown on the same page.

This is a possible solution. It seems to work for me but is not fully tested.

Edit this file:

Code: Select all

/opt/otrsvar/httpd/htdocs/js/Core.AJAX.js

and go to line 258 where it reads:

Code: Select all

            if ($Element.is('select')) {
                 $Element.empty();

and change it to read:

Code: Select all

            if ($Element.is('select')) {
                if (Value[1])
                 $Element.empty();

It seems that the FormUpdate function being called clears the dropdown values and re-loads the data as per OTRS dynamic fields. Of course in OTRS it is an empty dropdown.

Since Value[1] is used later to repopulate the dropdown around line 269

Code: Select all

                    NewOption.innerHTML = Value[1];
                    $Element.append(NewOption);

it seems that Value[1] is either saved earlier or taken directly from OTRS dynamic field values. So adding a simple check Value[1] is not empty serves to avoid emptying the drop down.

Hope this helps.

[cryptoroot]

I know this thread is old but I need to know which is the best way to resolve the problem of dependent fields (I have 3: State, City, Street). For all of the people has posted I see 2 options: 1. replace Data{"DynamicFieldNamesStrg"} with explicit dynamic fields names and 2. modify Core.AJAX.js. I'll thank appreciate if someone give me a light to resolve this issue in easier way or know a new one.