JavaScript Question

I need to add a JavaScript function to a Webpage that I can call and it will put some data into a WebTextField.

The JavaScript function is called by a special Barcode App on my iPhone. This iPhone app has a builtin Web Browser and after scanning the barcode it will fire a “callback” function passing the barcode value just scanned. This function would then take the passed barcode value and place it into a text field.

If I put it in the APP in the HTMLHeader I can get the function to “fire” as expected but since I don’t know the ControlID I cannot pass it to the JavaScript GetElementId to set the value of my WebTextField. I have been successful in putting a JavaScript alert in the function and it does pop up a message box with the barcode value scanned.

Since HTMLHeader is Read Only and a design time value I have no way to include the ControlID in the function.

I can build the JavaScript function dynamically with the ControlID in the Page.SHOWN event and then do an ExecuteJavaScript. I get no errors but the function will not “fire” when the Barcode App does the “callback”.

So this seems like a bit of a paradox.

MY QUESTION
Is it possible to set the value of a WebTextField from a bit of added JavaScript on a XOJO created WebPage?

It probably does not help that I am not a JavaScript “expert”.

Technically the answer is yes, BUT it won’t fire any key events when it does this so the data won’t be transmitted to the server.

Your best bet is to use the WebSDK, create the callback method with that and have it transmit the data directly to your app.

a WebSDK control is definitely the way to go. You just need to have a resident javascript callback of a specific name available in the current page? I would look at the tray item controls examples and documentation. You can include the javascript with the tray item and have it fire a server event which will make the data show up in an event on the server. From there you can populate any text field or anything else you like with it. Don’t immediately start out trying to make a full text field type control with it if you haven’t messed with the WebSDK stuff before. A tray item can get the event back to the server pretty easily.

If that doesn’t update fast enough you can add some code later to hack it directly into the web control display or to do some other kind of please wait feedback, but get it to the server first via a simple webSDK control.

OK … I do have a working tray item WebSDK control (actually some sample code from Greg once upon a time … thank you very much). I think it can do what I need and I have successfully added it to my project.

BUT …

I have explored the WebSDK docs and found a JavaScript method called Xojo.triggerServerEvent.

  1. I can call this method from the barcode scanner program after the scan is complete.
  2. BUT it requires the ControlID as as generated by the the XOJO Framework.
  3. The setting to call this method from the barcode program is static and just a configuration string in the barcode program. Since control ID’s are generated dynamically I don’t think I have have any static way to tell the Barcode Scanner program the control ID.

UNLESS …

It appears that I can create a JavaScript variable in the form SHOWN event and put the XOJO Framework ControlID in it. I was able to display the XOJO ControlID with a JavaScript alert called from the barcode program and display the variable I set with the ControlID.

Is there a downside to this idea?

If I understand right you need a TexField with a fixed ID. It is not a problem. Just create it in HTML as you probably have a sample in the Barcode scanner doc, and use a PageSource to place it on the WebPage. You may need some JavaScript code or additional HTML to position the field over the page, but that is fairly easy.

<input id= "whateverID" type="text" name="barcode" style="position: absolute; left: 100px; right: 0px; top: 100px; overflow: hidden; margin-top: -8px; height: 17px; max-height: 17px;">

Thanks Michel but I did not have to do that. I am not exactly sure how I would have gotten the value back from a control I created with some HTML.

I ended up creating a GLOBAL JavaScript variable to store the XOJO created ControlID in the form SHOWN event like this:

Dim JS as string
JS = "myxojoid = """ + WebCallBack1.ControlID + """;"
ExecuteJavascript(JS)

I finally figured out if I prefixed a variable assignment in JavaScript with var it is LOCAL and apparently the callback function cannot find it.

I use a link in the XOJO Web App to launch the barcode program on my iPhone. It also contains some parameters and the JavaScript callback. The words CODE and FORMAT (below) get a string substitution BEFORE the call to the triggerServerEvent with the actual scanned barcode value and the barcode symbology. The XOJO ControlID is stored in the GLOBAL JavaScript variable named myxojoid.

p2spro://scan/?formats=CODE39&callback=javascript:Xojo.triggerServerEvent(myxojoid,'Callback',['CODE','FORMAT'])

The callback function then just copies the barcode value to the text field using normal XOJO code.

The Pic2Shop (PRO) app (iPhone and Android) is pretty cool and can make a Web App have a barcode reader.

Whew … Amazing what you can do in 3-4 days of R&D that probably netted a couple of dozen lines of working code. CRIKEY !!! Well a couple of dozen not counting the several hundred lines I tried that did not work. Do I get credit for those in my productivity?

Now I have to finish the rest of the app. A little custom inventory program that will keep track of the many items that we loan out and come and go on a daily basis.

Thanks to all that contributed.

[quote=220860:@Mark Strickland]Thanks Michel but I did not have to do that. I am not exactly sure how I would have gotten the value back from a control I created with some HTML.

I ended up creating a GLOBAL JavaScript variable to store the XOJO created ControlID in the form SHOWN event like this:

Dim JS as string
JS = "myxojoid = """ + WebCallBack1.ControlID + """;"
ExecuteJavascript(JS)

I finally figured out if I prefixed a variable assignment in JavaScript with var it is LOCAL and apparently the callback function cannot find it.

I use a link in the XOJO Web App to launch the barcode program on my iPhone. It also contains some parameters and the JavaScript callback. The words CODE and FORMAT (below) get a string substitution BEFORE the call to the triggerServerEvent with the actual scanned barcode value and the barcode symbology. The XOJO ControlID is stored in the GLOBAL JavaScript variable named myxojoid.

p2spro://scan/?formats=CODE39&callback=javascript:Xojo.triggerServerEvent(myxojoid,'Callback',['CODE','FORMAT'])

The callback function then just copies the barcode value to the text field using normal XOJO code.

The Pic2Shop (PRO) app (iPhone and Android) is pretty cool and can make a Web App have a barcode reader.

Whew … Amazing what you can do in 3-4 days of R&D that probably netted a couple of dozen lines of working code. CRIKEY !!! Well a couple of dozen not counting the several hundred lines I tried that did not work. Do I get credit for those in my productivity?

Now I have to finish the rest of the app. A little custom inventory program that will keep track of the many items that we loan out and come and go on a daily basis.

Thanks to all that contributed.[/quote]
Just think of everything you learned though. You’re all set for the next control now!

Greg,

You are correct. I never take these “adventures” as a real loss. Yes my understanding of the WebSDK is much deeper and my understanding of JavaScript is, well, a little better.

I think this does open up some other possibilities.

And thanks for the first little example WebSDK Callback control you gave me nearly a year ago.