autocomplete on a table column not working.

[xren]

Hi,

I would like to use autocomplete on a table column on a form.

It did not work.

I tried it on a normal field. it works fine.

Is that autocomplete applicable on a table column? How this can be done on a table column?

Thanks,
Xiaoli

[Jon]

Xiaoli,

To initiate the jQuery autocomplete, you need to use a class locator in HTML element properties when working with a table column, whereas for a single field you need an id locator. Reason is that id locators have to be unique.

Other than that, it's hard to know what's wrong. Here's a list of debugging techniques:

You need a browser debugger e.g. Firebug for Firefox. Bear in mind that Javascript errors on the browser will be invisible without a debugger. Also jQuery can fail silently if the inputs to its functions are not correct.

1. Use Javascript alert() to check contents of variables are what you are expecting.
2. Use browser debugging tool to check for Javascript errors.
3. If calling the server e.g. executeFunction(), check the execution log to see if the call has been executed, use log() to check the data is correct.
4. Use browser debugging tool to set breakpoints in the Javascript code, then step through your code and check logic.

Regards
Jon

[xren]

Hi Jon,

As I tried, the code works fine on a single field which has a class identifier 'medSearch' to the html property. I have alert at the beginning of the javasript and it was triggered and the everything works fine.

Same code, I put the same class identifier on a table field html identifier.
It did not working. the alert in the javascript was not triggered.
(The table is empty at the beginning. After I click a add row button, a new row is added, I have a column in the row that I like to have autocomplete work on it.)

The thing is that before I add a row, the single field works fine with auto complete. After I add a row, the autocomplete on the single field stops working too. It will start work after I reload the page with empty table.

Did not know why.

I use the firebug but I could not see anything wrong.

Xiaoli

[Jon]

What Javascript code are you using?

[xren]

$(document).ready(function(){


$(".medSearch").autocomplete({

source: function(request,response){


var myTable = [];

var searchStr = $(".medSearch").val();

if(searchStr.length>2)
{

alert(searchStr);

var soapEnv = "<xml>"
+ "<soap>"
+ " <soap>"
+ "<ebas>"
+ " <ebas>" + searchStr + "</ebas>"
+ "</ebas>"
+ "</soap>"
+ "</soap>";

$.ajax(
{
url: 'http://ohi-mirth1tr:3080/ufs/integratio ... med_search',
type: 'POST',
dataType: 'xml',
data: soapEnv,
success: function(xml){

//alert($(xml).text());
//traverse the xml
var xmlItem = $(xml).find("*").eq(0);

//alert($(xmlItem)[0].nodeName);

var xmlMedItemArr = $(xmlItem).children().children().children();

//alert("Phyiscian Items: "+$(xmlPhyItemArr).length);


// go through each of them
$(xmlMedItemArr).each(function()
{
//do what? get each text
var childList = $(this).children();
//alert($(childList[5]).text() + ", " + $(childList[4]).text() + " - "+ $(childList[1]).text()+ " "+ $(childList[0]).text());
myTable.push({
label: $(childList[0]).text() + " - " + $(childList[3]).text(),
value: $(childList[0]).text(),
din: $(childList[2]).text(),
code: $(childList[1]).text()
});

});

response(myTable); //end response
},//end success
failure: showError,
contentType: "text/xml; charset=\"utf-8\""
});//end ajax
}
},//end source

select: function(event,ui) {
$(".medCode").val(ui.item.code);
$(".medDin").val(ui.item.din);
},
open: function() {
$(this).removeClass("ui-corner-all").addClass("ui-corner-top");
},
close: function() {
$(this).removeClass("ui-corner-top").addClass("ui-corner-all");
}

}); //end autocomplete


}); //end document. ready

//---------------------------
// This function is called when an error occurs with an AJAX web service call
//-------------------------

function showError(xml)
{
alert($(xml).text());
}

[Wai]

Hi Xiaoli,

If you have Ajax turned on for your form, then you need to add your JQuery to the Ready event, for example on the Page Ready event.

This should make sure that the autocomplete works on your single field example.

Please let me know if this also affects your table example. The alternative is to take Ajax off on the form and see the difference.

I don't know if you still have the pilot which we did? But in there, on the questionnaire, there was an example of autocomplete on a table column.

Wai

[xren]

Hi Wai,

The autocomplete works fine for my single field. I have the code in the document ready function.

I would like to have it work for a table column as well. I set the column's html property with class identifier 'medSearch'

The table is an empty table at the beginning.

Case 1:
If I call insertRow before form display to have one row displayed. Then autocmplete works fine on that column for that row.

Case 2
If I insert two rows before form display. Then the autocomplete works fine on the column for the first row. For the second row, the request input will always take the column's selected value from the first row. So it only display that one choice.

Case 3
If I call script insertRow by clicking a button on the page. no matter there are rows exist before or not, then autocomplete stops working completely

Case 4
Then I use the JQuery addRow plugin. the result is similar to case 2 but it is not stable. sometimes it works like case 2, sometimes, it does not work at all.

Case 5:
Do you know how to set the class identifier for the html property by script? I would like to try this one.

Thank you Wai.
Xiaoli

[Wai]

Can you let us know whether you have Ajax turned on or off as this affects where you place your JQuery.

To set a class in script, use

controls.CONTROL_NAME.cssClass = "";

[Wai]

How many records are in your search table?

If we are not talking about thousands, then there is a simpler approach than calling a web service everytime the user types.

And that is to fetch the table back to your form, add the search items into a JavaScript array, and use this as the datasource.


The example JQuery would be:

Code: Select all

var medList = $('.medList').val();

$(function() {
   var availableTags = medList.split(',');

   $( ".search" ).autocomplete({
       source: availableTags
   });
});

Where:

.medlist is the class on a form field containing a comma separated list of items.

.search is the class on your table column name

And all you would do is

i) fetch back your medications table
ii) loop through table, add items to form field on your page
iii) get the form field value into client-side javascript array as above

[xren]

Hi Wai,

I have ajax turned on.

For the medication table, in which the med name is the column I would like to have autocomplete works.

For a new patient questionnaire form, the medication table is empty at the beginning, then user add rows - depending on how many meds they take.

For an existing patient questionnaire record, the form needs to display all the meds patient input before and can change as well. so existing rows need to have autocomplete works on the med name column as well.

When user type in med name, the auto complete should provide the choice list depends on what user typed in. The list of med for choice is from a huge med list which are from a reference database.

Xiaoli

[xren]

Hi Wai,

I think it comes down to can a class identifier put on more than on fields on a form, which need to use autocomplete and the autocomplete promoted list is depends on user's initial input on these fields. Each fields's user input and the outcome of autocomplete promoted list should not interfere with other fields.

Thanks,
Xiaoli