jQuery autocomplete sample using Xi web service

[Dave]

Uses the jQuery autocomplete widget to provide a reducing list against an Xi field. Data source via an AJAX call to an Xi web service (which retrieves the list data from a database table).

Download from:

http://www.ebaseftp.com/download/sample ... mplete.zip

[LKirby]

For some reason, I can't get this to work in Chrome but it works fine in FF and IE..

[xren]

Mine autocomplete works in FF and chrome but not in IE8.

[Dave]

Lol, sounds like we have mixed results coming in. Have to admit, I only tested it in FF. Will investigate IE and Chrome and see if I can get it to not behave.

Guess that when you say it doesn't work, the behaviour is that nothing happens when you run it (the normal JavaScript result unless everything's perfect)? No errors appearing or anything like that?

[LKirby]

IE 10 and FF 20, it works fine.

Chrome 26.0.1410.64 m,
did a little bit of debugging.
JQuery is doing the request fine:
http://pastebin.com/bqVxmSau

and the respone it gets back:
http://pastebin.com/G2Ts6ptV

Why chrome does't display the list, i don't know.

[Dave]

Well that's something at least. Styling maybe? Will dig around on Google...see if anyone's else has had the same trouble.

[Dave]

Looks like it may be a CORS bug in Chrome...we're looking into it.

[Dave]

Now works consistently in FF, Chrome and IE, new version posted to download site:

http://www.ebaseftp.com/download/sample ... mplete.zip

Problem caused by jQuery 1.7+ find function not supporting parsing of namespaced XML nodes, such as those returned by an Ebase web service. A plug-in function called findNameSpacedXMLNode (courtesy of Dan East) has been provided to use instead of the jQuery find. The plugin just needs to be included on your list of client scripts.

[Dave]

V4.5 version of the Autocomplete sample here: http://www.ebaseftp.com/download/sample ... mplete.zip

[j.vandervliet]

Hello Dave & other Ebase users,

I've downloaded and imported the V4.5 version.
Fireforks works like a charm, but not for IE8 (this is the standard version for all users) and works not in Chrome.

Is there a solution to make it work in at least IE8?

edit: Solved it for IE8 and Chrome by adding JSON2.js from the following website as a external script to the form.

https://github.com/douglascrockford/JSO ... r/json2.js


Regards,

Jeroen-Pieter

[LKirby]

Thats strange as it works fine for me in IE8 without adding json2.js to the form.

And any reason why you called Firefox, Fireforks?

[j.vandervliet]

Thats strange as it works fine for me in IE8 without adding json2.js to the form.

And any reason why you called Firefox, Fireforks?

I don't know exactly what is, but I looked for solutions on StackOverflow.com for JSON, because that is the error that IE gave me.

Just a mistype on FireFox

[j.vandervliet]

Hello again,

I've tested the autocomplete function and I have two issues to discuss.

1.
When I make the field ORG_ID displayonly and select an option from the list it will not fill in ORG_ID anymore.

2.
Is a technical issue and have something to do with SSL certificate I guess.
When I start the form in IE8 or Chrome I'm getting a safety error like on the following link is shown. On this webpage is a solution too, but it's a setting in IE8 that the user must do, do anyone know if there is a other solution for this problem?

http://wiki.ulster.ac.uk/display/VLESUP ... ning+in+IE

Edit by Point 2: I replaced the URL files to local files on the server including the CSS, JQuery and JQuery UI files. Point 1 is still an issue.

Thank you.

[Dave]

Hi,

re. 1., if you make the orgID display only then you will need to use text() rather than val() in the callback in the autocomplete client script, i.e. use

Code: Select all

$("#orgId").text(ui.item.orgId);						

rather than

Code: Select all

$("#orgId").val(ui.item.orgId);

This is because Xi does not render display only fields as input fields. Have a look at http://stackoverflow.com/questions/8078 ... l-and-text for more information.

Also, important, you will need to give your (now display only) Org ID field a default value in the Xi Designer - otherwise the field won't be rendered to the page at all and the autocomplete callback won't be able find the orgID locator. A simple space value would do the trick.

Regards,
Dave

[vin@haarlem]

The Client API function executeFunction contains a bug. In the client script (ES230713_AUTOCOMPLETE) the following code doesn't work due to this bug. The executeFunction doesn't execute the jQuery function $("#searchWord").val() so nothing will be passed to the search function within the ACCESSIBLE_FUNCTIONS script.

Code: Select all

  source: $eb.executeFunction('search', $("#searchWord").val()),

A workaround for this bug is:

Code: Select all

  source: function(request, response) {
    var searchWord = $("#searchWord").val();
    var results = $eb.executeFunction('search', searchWord);
    response(results);
  },

I hope the bug can be fixed so it will be possible to use jQuery functions within the Ebase executeFunction.

[LKirby]

what happens when you run the form, type this into the address bar and press enter?

alert($eb.executeFunction('search', $("#searchWord").val()))

you should get a popup with: [Object object]

If you do, its definitely not a bug

[Dave]

Hmm...some strange behaviour going on here. We will investigate.

[andyhinds]

I have given the sample a once over and have made some adjustments. As far as I can see there are no bugs present due to the Ebase Client API not functioning as it should. If anyone does think there may be a bug then replication steps would be very much appreciated and we would be more than happy to look into it.

Changes made:

1) The autocomplete setup code has been moved from the client script (which added the setup code via the document.ready event) to the ready event of the search field (viewable via the Html Element Properties section of the control). This is the recommended way when using the form with AJAX enabled and ensures the field will always have the autocomplete configuration applied to it.

2) The "source" setup code has been changed for the autocomplete widget to this:

Code: Select all

source: function( request, response ) {
 	response($eb.executeFunction('search', request.term));
 }

The use of the function method ensures that the executeFunction is called every time the user changes the text in the search field. This is a preferable approach when accessing a database with potentially thousands of results. The previously used code:

Code: Select all

source: $eb.executeFunction('search', $("#searchWord").val())

was only ran once to populate the local array and from that point on didn't make a call to the server (as expected). This can be more efficient when you have a small number of possible results.

3) The "select" setup code has been changed for the autocomplete widget to this:

Code: Select all

select: function( event, ui ) {
     $eb.setFieldValue("ORG_ID", ui.item.orgId, true);
}

This function updates the ID field value on the server with the selected ID from the autocomplete drop down. The "true" option in the setFieldValue call means the field is also refreshed on the page.

Download the new sample here

I hope this helps.

Andy

[j.vandervliet]

Hello Andy,

Thank you for the provided information/changes, I've imported the attached example. This is a better way then the search on every page.
For your information: We use a DB resource with aprox. 18.000 records.

The new version you provided gives me other issues/questions:
1. The field searchWord is not be filled in anymore with the choice you make from the list, it will stuck on the word you typed in.

2. Is it possible to do this with a repeater? I've a problem with setting the values, the list is shown up though. I don't know how to do this exactly.

3. Any other document.ready will be resetted, we use some simple scripts to show some user information up in a .JSP above our logo that is also in the same JSP.

Regards,

Jeroen-Pieter

[andyhinds]

Hi,

Here are some thoughts:

1. The field searchWord is not be filled in anymore with the choice you make from the list, it will stuck on the word you typed in.

Do you mean the value of the Input on the HTML page is not being set when you make a selection from the drop down? This appears to work with no problem on our sample form.

2. Is it possible to do this with a repeater? I've a problem with setting the values, the list is shown up though. I don't know how to do this exactly.

I have done this with a repeater. I did it by adding a class name to the repeating field control in the repeater (Html Properties > Editor Input > Class) and then applying the autocomplete to all elements with this class on the repeater's jQuery "ready" event:

Code: Select all

$(".myclass").autocomplete({ source: function( request, response ) {
 	response($eb.executeFunction('search', request.term));}
 });

3. Any other document.ready will be resetted, we use some simple scripts to show some user information up in a .JSP above our logo that is also in the same JSP.

I presume they are reset when the ajax call is made to the server to update the field value? If you do not want this to happen then I wouldn't use the $eb call. What you did instead would depend on what you are trying to achieve. Please clarify if I have misunderstood.

Thanks,

Andy

[j.vandervliet]

Hi Andy,

Thanks for your research.

1. I don't know why my searchWord is not be filled in anymore.

I changed the ACCESSIBLE_FUNCTIONS and BUILD_SAMPLE_DB script to work with our DB table, I think I changed it right because in version 230718 it worked good, this cannot be the reason I think.

Edit 20-08: It happens when I set the field ORG_ID to Read/Write by Client Accessibility.
When it's on Inaccessible it will fill in SEARCHWORD correctly and not ORG_ID, when I set it to Read/Write then the ORG_ID will be filled, but not the SEARCHWORD anymore.

2. It works with the class, but how do you set the repeater field ORG_ID?
Because it's a table and the following code (setFieldValue) in HTML Properties will not work because it's a column and not a field:

Code: Select all

 
select: function( event, ui ) {
 $eb.setFieldValue("TBL-ORG_ID", ui.item.orgId, true);	
 },

3. The AJAX script will do this indeed, if we have AJAX enabled at the form it will start with this issue, my collague and Ebase are trying to solve this. I will wait for this outcome.

Thanks to investigate this.
I've tried some possible options on my own, but cannot figure it out yet.

Regards,

Jeroen-Pieter

[andyhinds]

Hi Jeroen-Pieter,

How are you getting on with this form? I hope you are making some progress.

If you have any questions perhaps you can enter a new log on our customer portal: http://portal.ebasetech.com/cp/ufsmain?formid=CP_LOGON? That way it will enable us to work through your issues and then post back any useful conclusions for the community here on the Forum.

Thanks,

Andy[/url]

[geadon]

Hello Dave & other Ebase users,

I've downloaded and imported the V4.5 version.
Fireforks works like a charm, but not for IE8 (this is the standard version for all users) and works not in Chrome.

Is there a solution to make it work in at least IE8?

edit: Solved it for IE8 and Chrome by adding JSON2.js from the following website as a external script to the form.

https://github.com/douglascrockford/JSO ... r/json2.js


Regards,

Jeroen-Pieter

Thanks Jeroen-Pieter - Your suggestion worked for me too. Autocomplete was working in Firefox but not IE9. After adding the json2.js as an external script it worked a treat.

Thanks

George