cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

Ajax search for MII 12.2

Go to solution
Former Member

on ‎01-16-2014 9:26 AM

0 Kudos

Hi guys,

I am writing to ask you for some assistance. I have to implement an Ajax search for an input box in MII 12.2. It should suggest possible entry values when I type in, let's say, 2 characters.

My IRPT file head section:

<head>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

<title>Ajax Test Project</title>

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<script type="text/javascript" src="javascript/ms.js"></script>

<script type="text/javascript" src="javascript/ajaxfunc.js"></script>

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>

<link rel="stylesheet" type="text/css" href="css/ms.css"/>

</head>

The section with the input box (as it can be seen, it lies within a table, the table is called InputTable, has been referenced in my ms.css):

<td><input class="text" type="text" id="Workcenter2" name="Workcenter2" tabindex="5" height="18px"/></td>

This is my Javascript function:

$("#Workcenter2").autocomplete({

autoFocus: true,

source: function (request, response) {

  $.ajax({

   url: "/XMII/Runner?Transaction=YDM/AjaxProject/Dialogs/Logic/WorkCenterValuesTrx&TRXID=1&OutputParameter=Results",

   type: "GET",

   dataType: "xml",

   data: {

    maxRows: 10,

    Workcenter2: request.term

   },

   success: function (data) {

    response($.map(data, function(item,key) {

     return {

      label: key,

      value: item

     }

    }))

   },

   error: function () {

    alert("Due to an unexpected error, we were unable to load data.");

   },

   messages: {

    noResults: '',

    results: function() {}

   }

  });

},

minLength: 2

});

I can access the transaction from the browser (for the sake of testing), it displays all possible entries in an XML format. When I run the code in MII I have no compilation errors, but still no suggestions when I type in two letters. Last, I add the relevant part of my CSS:

/* loading - the AJAX indicator */
table.InputTable td .ui-autocomplete-loading
{
background: white url("../images/loader.gif") right center no-repeat;
}

table.InputTable td .autocomplete-suggestions
{
border: 1px solid #999;
background: #fff;
cursor: default;
overflow: auto;
}

table.InputTable td .autocomplete-suggestion
{
padding: 10px 5px;
font-size: 1.2em;
white-space: nowrap;
overflow: hidden;
}

table.InputTable td .autocomplete-selected
{
background: #f0f0f0;
}

table.InputTable td .text
{
display: block;
}

I am not really experienced in Ajax, so any suggestion from your side will be appreciated.

Best,

Yavor

Show replies
Show replies
Answer

Accepted Solutions (1)

Accepted Solutions (1)

former_member204240
Active Participant
‎01-16-2014 10:52 AM
0 Kudos

For the Url passing please try as below it works, I had a same problem where transaction used to give xml fine on browser and not from the code of ajax call.

Below is two option to help you, The first when u want want to directly pass the values to Trx call without any variable.(Dont use quotes it wont work)

1. var urlPath="http://"+location.host+"/XMII/Runner?Transaction=YDM/AjaxProject/Dialogs/Logic/WorkCenterValuesTrx&TRXID=1&OutputParameter=Results&Content-Type=text/xml";

    $.ajax({

         type : "POST",

         url : urlPath,

                datatype : "xml",

          cache: false,

         async: false,

         beforeSend: function()

         {

            

         },

         error: function()

         {

            alert('Error');

         },

2. var urlPath="http://"+location.host+"/XMII/Runner?Transaction=YDM/AjaxProject/Dialogs/Logic/WorkCenterValuesTrx&Var1="+Val1+"&Var2="+Val2+"&OutputParameter=Results&Content-Type=text/xml";

The above second option is , you are assigning the variable values to transaction parameters.

Hope it works. Good Luck

Show replies
Show replies
former_member204240
Active Participant
‎01-16-2014 11:02 AM
0 Kudos

This is working for me. You can try.

Former Member
‎01-16-2014 12:06 PM
0 Kudos

Thanks for the input! I did change the URL so it is now read as a variable, but it seems there is something else I am doing wrong... Still no suggestion box.

Former Member
‎01-17-2014 9:16 AM
0 Kudos

An update from me. I added $(document).ready(function() at the top of my Ajax method. Now I can see the loading gif next to the input I am giving. However, there is still no suggestion box...

var urlPath="/XMII/Runner?Transaction=YDM/AjaxProject/Dialogs/Logic/WorkCenterValuesTrx&TRXID=1&OutputParameter=Results&Content-Type=text/xml";

$(document).ready(function() {
$("#autocomplete").autocomplete({
  autoFocus: true,
  source: function (request, response) {
   $.ajax({
    url: urlPath,
    cache: false,
    async: false,
    type: "POST",
    dataType: "xml",
    data: {
     maxRows: 10,
     Workcenter2: request.term
    },
    success: function(data) {
     response($.map(data, function(item) {
      return {
       label: item,
       value: item
      }
     }));
    },
    error: function(xhr, textStatus, errorThrown)
    {
     alert("Error: " + errorThrown);
    }
   });
  },
  minLength: 2
});
});

former_member185280
Active Contributor
‎01-17-2014 2:22 PM
0 Kudos

I think your issue may be because you are using the map function like you would if your data was in the json format. Below is an example using map with xml. You will probably need to do something similar.



function( xmlResponse ) { 


    response($( "Row", xmlResponse ).map(function() {


    return { value: $( "ARBPL", this ).text() + ", " + $.trim( $( "KTEXT", this ).text()),


     id: $( "ARBPL", this ).text(),


     desc:$.trim( $( "KTEXT", this ).text())


     };


    }));
Former Member
‎01-17-2014 3:21 PM
0 Kudos

I actually did solve the issue about two hours ago. Christian was right, it was namely a badly constructed Javascript function. However, I was also missing a proper parsing of the XML data I receive from the transaction. Now that both have been implemented I can use the suggestion box. There is still a small bug for me to take care of as the autocomplete works perfectly in Mozilla and not quite as expected in Internet Explorer 8, but this should mainly concern my CSS entries.

Thank you, Christian and Padma for the support!

Answers (0)

Ask a Question