Address Lookup

Ewan Walker asked 2016-11-08 15:01:27 UTC

Hi

I use an international address lookup tool provided by CraftyClicks.co.uk

Essentially I call an HTML Page to host the Crafty Clicks JavaScript lookup tool and return the results back to the main application.

In the HTML page various functions specific to VWG are used. I am not sure of the best way to proceed to create the equivalent functionality using Wise J so I have attached a demo VWG Example. The Crafty Clicks Functions are in the Resources - > User Data Folder which also includes the bespoke html file AddrLookup.html. There is a minor change to their css file where the url to the flags image set has been changed to:

background-image: url('Assemblies.VisualWebGuiAddress.Resources.UserData.flags.png.wgx?Assembly=VisualWebGuiAddress');

This link may also help as WiseJ does things quite differently

https://craftyclicks.co.uk/tutorials/global-address-lookup-website-integration/

Any help would be greatly appreciated

Ewan

Frank (ITG) answered 2016-11-11 20:59:36 UTC

Hi Ewan,

we are working on a Wisej version of your sample and will send you the code next week.

Best regards
Frank

Ewan Walker answered 2016-11-16 10:33:24 UTC

Hi Frank
Thank you very much – looking forward to receiving this
Ewan

Ewan Walker answered 2016-11-24 07:39:46 UTC

Hi Frank Appreciate you and Luca are very busy. Have you got anywhere with this yet? Many Thanks Ewan

Frank (ITG) answered 2016-11-24 17:36:45 UTC

Hi Ewan, this has not been forgotten, but we missed to send you in time. We´ll prepare it right after Thanksgiving. Sorry for the delay. Best regards, Frank

Ewan Walker answered 2016-11-25 08:49:28 UTC

Thanks Frank

Frank (ITG) answered 2016-11-28 18:39:46 UTC

Hi Ewan,

sorry for the delay.

Find a revised version of your sample here:

http://wisej.s3.amazonaws.com/support/attachments/Wisej.ClickToAddress.zip

Try using it with parameters #Page1, #Page2 to your URL.

Please make sure to upgrade to the latest wisej build first (1.3.14).

Best regards
Frank

Luca answered 2016-11-28 18:50:31 UTC

Hi Ewan, the sample also shows that Wisej does things in line with standard javascript client-side integration. In this case we simply added the external plug in attached to the input element inside a wisej.web.TextBox widget and wired the event back to the server to receive the full map of address properties. The sample you sent was using an iframe and an HTML page to have access to the elements and using iframes always generates headaches when trying to access javascript libraries or objects in the parent window or viceversa – and you cannot have elements overflowing outside of the iframe.

Ewan Walker answered 2016-11-29 08:25:22 UTC

Thank you both very much

Ewan Walker answered 2016-11-29 08:46:27 UTC

Hi Luca when using #page2 I get the error: Line: 62923 Error: Already initiated when I press the search icon

Ewan Walker answered 2016-11-29 12:41:21 UTC

Hi Luca how do I pass address elements the other way so an existing address can be validated by Crafty Clicks?

Ewan Walker answered 2016-11-29 13:17:41 UTC

Hi Luca

If I pick gfxMode: 2 which shows the county above the data entry box, it does not work correctly. I am after a look similar to the attached.

New trail code =

5aeff-968e0-724b8-01df7

See also comments above.

Many Thanks for your help

Ewan

Luca answered 2016-11-29 17:05:34 UTC

I noticed the issue with gfxMode 2, it looks like a bug in the clickaddress code. I had to download their latest js because of a bug with the positioning of the overlay in the one you attached. This was the line with the error in the reposition function: var leftOffset = elemRect.left – htmlRect.left + document.body.style.paddingLeft; You can’t add document.body.style.paddingLeft since it’s a string (i.e. “10px”) and the result is a concatenated string! After fixing this, the location is correct, but now there is an issue with the overlay. I tried in jsfiddle and can’t find at what level of div nesting it fails. I’ll keep you updated when I find the bug.

Ewan Walker answered 2016-11-29 18:26:03 UTC

Hi Luca

Interestingly didn’t have these issues using it with VWG. How do I pass parameters the other way so it can be used for verifying existing addresses?

Many Thanks

Ewan

Ewan Walker answered 2016-12-01 11:43:56 UTC

Hi Luca

I raised a support call with Crafty Clicks on this issue and they looked at what was going on via Finch.

Their developers view is that there is a conflict between the WiseJ Element Z order and the Crafty Clicks Element Z Order which is why the text box does not show as its behind with gfxmode: 2. Don't know whether you have any ideas on this one? (A hack is to edit the CSS so the Background is transparent)

Knowing how to pass the address text boxes as a set of parameters into the JavaScript so an existing address can be verified would also be a great help

Thanks for your help

Ewan

Ewan Walker answered 2016-12-09 13:16:16 UTC

Hi Luca

If I use an HTML panel in a popup control to host the Crafty Clicks Java Script how do I pass the control IDs of the address fields into the HTML panel?

How do I access the textbox values via the control ID in JavaScript in the HTML Panel so I can perform address verification?

Many Thanks for your help

Ewan

Luca answered 2016-12-09 15:33:56 UTC

The elements don't have IDs, you can get the element itself since in Wisej they don't change. If you pass the control ID to the URL:

string url += "?id1=" + ((IWisejComponent)this.textBox1).Id;

On the client side you can read it like this:

var args = qx.util.Uri.parseUri(location.href);
var id1 = args["id1"];

Then to find the textBox1 widget on the client side:

var widget = Wisej.Core.getComponent(id1);

To get the dom element:

var el = widget.getContentElement().getDomElement();

However, in the case of wisej.web.TextBox (and ComboBox and DateTimePicker), the element is not the element since the is wrapped inside in order to add buttons around it. The actual input is called "textfield":

var field = widget.getChildControl("textfield");
var inputEl = field.getContentElement().getDomElement();

The dom element can be null if you try to get it too early before the widget is rendered.

In any case, I will upload different versions of this integration using the html box and will also try to fix the problem they have wrapping a div in a div.

HTH

Best,

Luca

Ewan Walker answered 2016-12-09 15:44:04 UTC

Hi Luca thank you very much look forward to seeing your revised version.

Ewan Walker answered 2016-12-19 09:11:02 UTC

Hi Luca have you had a chance to do your revision yet? Thanks Ewan

Ewan Walker answered 2017-01-13 13:08:01 UTC

Hi Luca have you had a chance to do this yet?

Frank (ITG) answered 2017-01-16 09:43:58 UTC

Hi Ewan, we will pick up that topic again and get back to you in the next days. Sorry for the delay ! Best regards, Frank

Ewan Walker answered 2017-01-23 08:22:36 UTC

Hi Luca

Did you ever find time to post a version using an HTML box?

Thanks for all you do

Ewan

Luca answered 2017-01-24 17:22:54 UTC

Hi Ewan,

Getting to it. Sorry for the long wait.

Best,

Luca

Luca answered 2017-01-30 19:01:23 UTC

Hi Ewan,

I looked into this again and managed to pinpoint the bug in crafty clicks that prevents gfxMode 2 from working correctly. Using an htmlbox won't work in Wisej. The problem is that they create the overlay div in the wrong position in the dom and relay on the absence of the z-index style on parents to render the wrong layering. It should be impossible in a browser to have a div behind another div but showing partially on top.

In fact as soon as any div in the hierarchy above the target element has a z-index value (any value) their overlay doesn't work. See the jfiddle sample:

https://jsfiddle.net/wisej/frpaymxj/1/

The same bug is reproducible on their web site, it's enough to open dev tool and add a z-index anywhere above the input. Wisej adds the z-index to all the elements it creates to manage the... z-index without having to move elements around. Which is the purpose of the z-index.

Unless there is a fix, it cannot work in gfxMode 2.

Also, I will send you an updated sample with the crafty clicks plugin as a component instead of a control, this was you can attach it to any existing TextBox and can even have multiple on the same page.

Best,
Luca

Ewan Walker answered 2017-02-15 11:11:10 UTC

Hi Luca

Thanks sorry for the delay in replying just got back from holiday.

It is strange that it works in VWG using a popup form with an html box.

I looked into this again and managed to pinpoint the bug in crafty clicks that prevents gfxMode 2 from working correctly. Using an htmlbox won’t work in Wisej. The problem is that they create the overlay div in the wrong position in the dom and relay on the absence of the z-index style on parents to render the wrong layering. It should be impossible in a browser to have a div behind another div but showing partially on top.

So this looks like an issue with the way Crafty Clicks have written their code which from your comments does not appear to follow best practice, is this the case in your opinion?

Many Thanks

Ewan

Luca answered 2017-02-15 15:52:13 UTC

Hi Ewan,

It works with VWG and on their site, as well as simple samples, only when z-index is not used. Wisej has the z-index set on all the elements that correspond to widgets. As soon as a div in the hierarchy has a z-index value (any value) they cannot have a div partially behind and partially in front. See the jsfiddle link I added in the previous answer.

You can also try the demo page on their site, use F12 in chrome and add a z-index value on the parent div and it stops working.

When you look at the dom, they create the overlay div outside of the hierarchy of the target div and try to display the target div in front but the container of the target behind. It looks to me that it's a bug in the browsers - a div cannot be partially in front of another div while at the same time be behind a child of the div that is behind. It's not best practices, it's simply wrong and it works in some cases probably because of a bug or some old compatibility stuff.

Best,

Luca

Ewan Walker answered 2017-02-16 09:01:53 UTC

Hi Luca

Thanks for your explanation did you get round to doing the below?

Also, I will send you an updated sample with the crafty clicks plugin as a component instead of a control, this was you can attach it to any existing TextBox and can even have multiple on the same page.

Many Thanks

Ewan

Luca answered 2017-02-25 01:04:32 UTC

Hi Ewan,

Finally completed!

http://wisej.s3.amazonaws.com/support/attachments/Wisej.ClickToAddress.zip

There are 3 classes: a panel, a widget and a component. The component can be used anywhere and can attach to any control that includes a "textfield". It all works as expected now (except mode 2 because of the reasons explained below).

Also, please notice that unless you have a line_1 attached, the clickToAddress implementation will not update any attached field, this is how they designed it. Took me a while to understand that it was not a bug...

The code is pretty much self explanatory and you can modify or extend it as needed. Don't forget to search to "Your-AccessToken" and set your demo token.

Best,

Luca

Ewan Walker answered 2017-02-26 16:22:42 UTC

Hi Luca thank you very much I will test it tomorrow

Navigation Menu

Repository navigation

Address Lookup #367

4 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Address Lookup #367

Description

Activity

itg-assistant commented on Jun 12, 2026

itg-assistant commented on Jun 12, 2026

itg-assistant commented on Jun 12, 2026

itg-assistant commented on Jun 12, 2026

itg-assistant commented on Jun 12, 2026

itg-assistant commented on Jun 12, 2026

itg-assistant commented on Jun 12, 2026

itg-assistant commented on Jun 12, 2026

itg-assistant commented on Jun 12, 2026

itg-assistant commented on Jun 12, 2026

itg-assistant commented on Jun 12, 2026

itg-assistant commented on Jun 12, 2026

itg-assistant commented on Jun 12, 2026

itg-assistant commented on Jun 12, 2026

4 remaining items

itg-assistant commented on Jun 12, 2026

itg-assistant commented on Jun 12, 2026

itg-assistant commented on Jun 12, 2026

itg-assistant commented on Jun 12, 2026

itg-assistant commented on Jun 12, 2026

itg-assistant commented on Jun 12, 2026

itg-assistant commented on Jun 12, 2026

itg-assistant commented on Jun 12, 2026

itg-assistant commented on Jun 12, 2026

itg-assistant commented on Jun 12, 2026

itg-assistant commented on Jun 12, 2026

itg-assistant commented on Jun 12, 2026

itg-assistant commented on Jun 12, 2026

itg-assistant commented on Jun 12, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions