Javascript In Web App

Targets Web
1

In my web application I have a text field that displays help text when a control is moused over. Our program has had this field since one of the original programs in DOS in the 80s and through Windows up till now. Now we are bringing it to a web application. In the application I realize there are no mouse over events so I am trying to use this code to accomplish it.

Dim sJavascriptText As String
sJavascriptText = " document.getElementById('" + Me.ControlID + "').onmouseover = function() {document.getElementById('" + TextField_Help.ControlID + "').innerHTML = 'Test'}"
Me.ExecuteJavascript(sJavascriptText)

This works and displays the test text at the bottom of the page when I mouse over my test button. However, It pushes the help field down a little bit and displays the help text right above the field. Anybody know how I can fix it so it displays in the text field help instead of outside of it? I imagine on the back end the text field must be wrapped inside a parent div. Any ideas on what I can do to get it to display correctly? Thanks

2

The property for the contents of a text input field in JavaScript is .value rather than .innerHTML

Try switching .innerHTML to .value

3

When I tried that but it doesnt place the text anywhere then.

4

Any suggestions out there?

5

Put this function in a module:

Public Sub setFieldInfo(extends infoControl as WebTextField, control as WebUIControl, value as String)
  if control = nil then Return
  
  var jString as new JSONItem
  jString.Add( value )
  
  var exec() as String
  exec.Add( "var $element = $('#" + control.ControlID + "')," )
  exec.Add( "    $infoField = $('#" + infoControl.ControlID + "_field');" )
  if value <> "" then
    exec.Add( "$element.mouseover(function() {" )
    exec.Add( "  var value = " + jString.ToString + "[0];" )
    exec.Add( "  $infoField.val(value);" )
    exec.Add( "}).mouseout(function() {" )
    exec.Add( "  $infoField.val('');" )
    exec.Add( "});" )
  else
    exec.Add( "$element.off('mouseover mouseout');" )
  end if
  
  Session.ExecuteJavaScript( String.FromArray( exec, "" ) )
End Sub

To set, call as:

myInfoField.setFieldInfo( myMouseOveredField, "Enable or disable field hint." )

To unset, call as:

myInfoField.setFieldInfo( myMouseOveredField, "" )
1 Like
6

The primary reason the others didn’t work is because Me.ControlID points to the container of the field, rather than the field itself. For that, you want Me.ControlID_field. If your WebTextField’s ControlID is Fsds3wq then the actual field in the browser has an ID of Fsds3wq_field.

1 Like
7

You’re the best! Thanks so much for the help!

2 Likes
8

Happy to help! Please be sure to mark the solution so that others can easily find it if they need the same functionality.

1 Like