Execute Java script in Web App

I am trying to highlight some text in a WebTextArea using some java script that I found. It does not work. Can someone tell me what I am doing wrong. Here is the method called from a search text field.

Var js As String
var sl as integer = startPos + length
js = "var textarea = document.getElementById('" + TaLog.ControlID + "');"
js = js + "textarea.setSelectionRange(" + startPos.ToString + ", " + sl.ToString + ");"
js = js + "textarea.focus();"
TaLog.ExecuteJavaScript(js)

ControlID doesn’t always map to the actual DOM object. To find the actual object use the Developer Tools in your browser. When you write JavaScript like this, you are going outside the framework, so Xojo isn’t responsible if the hack ever breaks.

For a WebTextArea, the actual inner DOM object is ControlID + "_field".

2 Likes

I will give that a try when I get home. Thanks Tim

The controlID seems to change every time I view the Textarea. The control name stays the same “TaLog”. I just want to highlight some text. Is there an easier way to do that?

And what is the problem with that?

Your code with the missing part that Tim mention should work

Code
Var js As String
var sl as integer = startPos + length
js = "var textarea = document.getElementById('" + TaLog.ControlID + "_field');"
js = js + "textarea.setSelectionRange(" + startPos.ToString + ", " + sl.ToString + ");"
js = js + "textarea.focus();"
TaLog.ExecuteJavaScript(js)

Maybe you got confused because Tim wrote the generic form: ControlID + "_field" instead of specific form from your example: TaLog.ControlID + "_field'

Yes, that works. But now InStr and IndexOf are returning the wrong amount. What the heck?

You didn’t mention anything about InStr or IndexOf before.

As Tim said:

or if it breaks something else.

I am using IndexOf to fill the StartPos variable. The further down the text in the textarea that the searched word is the further off the start position of the word is. Here is the code in the Search field.

Var searchWord As String
Var currentPosition As Integer = 0

searchWord = me.Text
currentPosition = TaLog.Text.IndexOf(searchWord)

If currentPosition > 0 Then
  HighlightText(currentPosition - 1, searchWord.Length)
Else
  MessageBox("Word not found.")
End If

Without the text you are using, we can’t know what is wrong. A quick test here show no problems, searching for position:

you will need to create a sample project, zip it and upload it. That way someone can take a look and have better answers for you.

Here is a simple test web app. Search for the word “Location”. The textarea is readonly, but you can click in the textarea and hit backspace, then the search works correctly every time.
I copied the string from a simple text file.
testsearchTA.zip (8.4 KB)

I only have a why but not a solution, maybe you can figure it out.
Why is this happening?
Because there are 16 EndOfLines before ‘Location’, the selected text is 16 characters off.

You may be able to count the EndOfLines before the search you need, or find another JavaScript function that works for this case.

Darn it, Alberto, I was just writing about that :stuck_out_tongue:

I built a demo project to illustrate the issue and how to work around it.
(ReplaceLineEndings on the search haystack).

You can even see the Windows 0D0A EOLs in the XML when saving as a XML project: testsearchTA-debug.xojo_xml_project

2 Likes

:slight_smile:

I wanted Gary to try to figure it out before giving the solution (as I don’t have time right now), but is good that you had time.

Thanks Tim, I will take a look at your project.

Thank you so much Tim for taking the time build a test app with the workaround.
This seems to work perfectly in my app.
I don’t think that I would have figured that code out on my own.
Also thank you to AlbertoD for trying to lead me in the right direction.

You are welcome.
Following Tim’s code, the problem is the 0D0A for each end of line.
You can fix your code by simple adding Opening event to TaLog and use this code:

me.Text = me.Text.ReplaceLineEndings(EndOfLine.UNIX)

hope this helps.