Javascript Examples

Targets Web
1

Hello,

we have the problem, that we can’t use the KeyPressed event of a webpage in Microsoft Internet Explorer. The KeyPressed events are working fine for example with Firefox and Chrome, but not in IE. In one thread in this forum was posted, that we have to use Javascript instead. But i didn’t found any good example of Javascript, were i can see how to use xojo elements in Javascript.

For example, I would like to transfer the following code to Javascript (the code regnozises the arrow up and down and select the next row up or down in a list)

It would be nice if anybody has any advice for me.

dim i As integer
dim sId as String
if listActionItems.ListIndex > - 1 then
if Details.KeyCode = 38 then
i = listActionItems.ListIndex
if i > 0 then
i = i - 1
listActionItems.Selected(i+1) = false
listActionItems.Selected(i) = true
sId = listActionItems.Cell(i,0)
self.showActionItemData(sId)
end if
end if

if Details.KeyCode = 40 then
i = listActionItems.ListIndex
if i < listActionItems.RowCount - 1 then
i = i + 1
listActionItems.Selected(i-1) = false
listActionItems.Selected(i) = true
sId = listActionItems.Cell(i,0)
self.showActionItemData(sId)
end if
end if
end if

2

In the thread you refer to, the OP did not seem to understand that a good immediate workaround is often better than to wait for an elusive bug fix, so I did not bother.

Here is how to attach onkeydown to a TextField called txtcmp_code1. This goes into the WebPage.Shown event :

ExecuteJavascript("document.getElementsByName('txtcmp_code1')[0].id= 'txtcc' ; " ) ExecuteJavaScript(" $(document).keydown(function(e) { if (e.keyCode == 37 || e.keyCode == 38 || e.keyCode==39 || e.keyCode==40 )"+_ " { window.location.replace('#'+'kycde'+(e.keyCode));} }) ; ") ExecuteJavaScript(" $('#"+txtcmp_code1.ControlID+"').keydown(function(e) { if (e.keyCode == 37 || e.keyCode == 38 || e.keyCode==39 || e.keyCode==40 )"+_ " { window.location.replace('#'+'kycde'+(e.keyCode));} }) ; ")

You get the value of the keydown through the Session.HashtagChanged event. By checking for the prefix “kycde” you can differentiate between the keydown and other hashtags.

This was conceived before I got the hang of WebSDK. A special control can be devised to avoid having the key code show in the URL bar, but this works fine with Internet explorer.

3

[quote=140955:@Michel Bujardet]
Here is how to attach onkeydown to a TextField called txtcmp_code1. This goes into the WebPage.Shown event :

ExecuteJavascript("document.getElementsByName('txtcmp_code1')[0].id= 'txtcc' ; " ) ExecuteJavaScript(" $(document).keydown(function(e) { if (e.keyCode == 37 || e.keyCode == 38 || e.keyCode==39 || e.keyCode==40 )"+_ " { window.location.replace('#'+'kycde'+(e.keyCode));} }) ; ") ExecuteJavaScript(" $('#"+txtcmp_code1.ControlID+"').keydown(function(e) { if (e.keyCode == 37 || e.keyCode == 38 || e.keyCode==39 || e.keyCode==40 )"+_ " { window.location.replace('#'+'kycde'+(e.keyCode));} }) ; ") [/quote]
This code also requires jQuery.

4

Thank you both. If I need JQuery, where can I find instructions how to include it into a Xojo Webapp?

Are there any more examples or explanations how to address WebListBox with Javascript? I don’t know how to do. I didn’t found any explanations in documentation. Can anybody give me a tipp?

Thanks in advance.

5

Simply include it in the http-header
http://www.w3schools.com/jquery/jquery_install.asp

6

@Jan-Ole: That’s not new to me. Can you let me know how to include this file in to a Xojo Webapp? Or were can I find the place of explanation in Xojo documentation?

7

http://documentation.xojo.com/index.php/WebApplication.HTMLHeader
Just go to the inspector from your app, edit the field HTMLHeader and include the jquery. That should work.

8

Thank you, I will try it.
We use Standalone Webapp. I think the path has to be relative to the exe file.