I have a WebTextField on my page. The user can drag information and drop it into the field without keyboard input. The web client shows there is text in the control, but the server is not seeing it. Normal events are not firing to pass information onto the server. So the Text property is blank, and TextChanged is not firing.
I want to create a button or timer to request the client update the server with whatever is in the control. I’ve looked at the WebControlSDK, but I’m not quite getting it. Which Javascript Xojo function would I call to force the control to update the server with its contents?
[quote=225325:@Jim Frankland]I have a WebTextField on my page. The user can drag information and drop it into the field without keyboard input. The web client shows there is text in the control, but the server is not seeing it. Normal events are not firing to pass information onto the server. So the Text property is blank, and TextChanged is not firing.
I want to create a button or timer to request the client update the server with whatever is in the control. I’ve looked at the WebControlSDK, but I’m not quite getting it. Which Javascript Xojo function would I call to force the control to update the server with its contents?[/quote]
If you fill the control in the DOM, the server has no idea of what you are doing. Use Xojo.TriggerServerEvent in JavaScript with a WebSDK control to send the data back to the Xojo app.
You can use something like this to monitor the value of your TextField and send it to Xojo when it changes :
[code]
[/code]Just replace the name of the TextField mytf, and use Xojo.TriggerServerEvent in place of alert("changed")
Hi Michel,
I’m getting: Could not execute returned javascript: Xojo.triggerServerEvent is not a function
What creates the Xojo namespace? (Do I need a WebControlWrapper? Do I have to call the ExecuteJavaScript() from the Session, or WebPage?)
Also, is the function Xojo.triggerServerEvent or Xojo.TriggerServerEvent (I’ve tried both, but it is likely I’m not calling it from the proper namespace) In the documentation it is little “t”, but I’ve seen it capitalized in other places too.
Hi Jim.
Xojo.TriggerServerEvent is a property of a WebSDK control, and should be use with the ID of that control. That is covered in page 9 of WebControlSDK.pdf which is placed in the extras/WebSDK folder, next to the Xojo executable.
The way to insert the proper ID is covered there.
Hi Michel,
I had already been through the PDF and example code, but all the pieces were not making sense to me yet. Huge learning curve. In the spirit of helping someone else with a similar question - as I found didn’t find much on the triggerServerEvent when searching this forum…
To be clear on what I’m doing, I have a webpage with a WebTextField. So my users don’t have to type a full URL for a web image, they can simply drag the image from another browser window over the text input field and drop it. The browser then populates the URL in the text field. The problem is, the Xojo web server never sees the text – the text property is still blank, and no events fire. To be fair, Xojo triggers when the browsers input field triggers an onchange event. Unfortunately when you perform a drag and drop, only the ondrop triggers. The onchange will not trigger until the input field looses focus, but in my case, it actually has to get the focus first.
Although I’m not creating a custom web control, I still have to add all the WebSDK strcuture just to trigger events on the native control. So yes, we do need a WebControlWrapper class. Here is how I went about it.
I created a class in my project called WebSDK and gave it the Super of WebControlWrapper. (If you click on the pencil in the IDE you will find that as a component of Web Object -> Web Control -> WebControlWrapper)
I then create a constant named JavascriptNamespace, defined as String, with a very unique value (as explained in the WebSDK PDF under NameSpaces) - I used Outside_Scripts_NameSpace. I assume both the class and constant are needed to trigger Xojo to include all the JavaScript framework within the webpage HTML produced for the client. Without the framework, the scripts will not be present and a “is not a function” error will occur.
Then I needed one method for injecting the “ondrop” event trigger into the WebTextField, and two custom events, one to receive the notification that the WebTextField received a drop item which will fire a timeout script (because the value field of the web input has not yet been updated at the moment of the ondrop event) to then receive the input fields text value.
The Method in my WebSDK class is called InjectDropEvent and it gets passed the controlID of the WebTextField to which the ondrop trigger will be added.
' Add a ondrop event to a control which when triggered will call triggerServerEvent (lowercase "t" in trigger) which will fire the DropEvent in the class passing the controlID of the input field
ExecuteJavaScript("document.getElementById("""+sControlID+"_inner"").setAttribute(""ondrop"", ""Xojo.triggerServerEvent('"+Self.ControlID+"', 'DropEvent', [this.id]);"");")
I then added two custom events (“DropEvent” and “GotValue”) each have an Event Definition created for them within the class. DropEvent with a parameter of sControlID As String; and GotValue with a parameter of sTextValue As String.
We then need to add code to the Event Handler of “ExecuteEvent” to process the incoming custom events.
Select Case Name
Case "DropEvent"
' Verify the first parameter (from the Javascript array) is present
If (Parameters(0) <> Nil) Then
' Verify the first parameter passed is also a string type
If (VarType(Parameters(0)) = 8) Then
' The input field ondrop HTML event should have triggered the Xojo.triggerServerEvent for DropEvent and passed the controlID of that "_inner" input WebTextField
' We will now issue a Javascript timeout to fire a second Xojo.triggerServerEvent for GotValue and return the value of that input element, after waiting 100ms for the browser to populate the value field.
ExecuteJavaScript("var WebSDK_Drop_Timer;if(WebSDK_Drop_Timer){clearTimeout(WebSDK_Drop_Timer)}WebSDK_Drop_Timer=setTimeout(""Xojo.triggerServerEvent('"+Self.ControlID+"', 'GotValue', [document.getElementById('"+Parameters(0)+"').value]);"", 100);")
End If
End If
Case "GotValue"
If (Parameters(0) <> Nil) Then
If (VarType(Parameters(0)) = 8) Then
' We now have received the text value from the client side WebTextField and we will pass it through to the GotValue event defined within the webpage
GotValue(Parameters(0))
End If
End If
End Select
I then added this new class (named webSDKWrapper) to my webpage. In the webpage, I added code to the GotValue event to handle the passed text value dropped upon the WebTextField. I also added a line of initialization code to my webpage to inject the ondrop trigger to my WebTextField.
' This will setup the Drag-N-Drop trigger for for my WebTextField named txtDragImage.
webSDKWrapper.InjectDropEvent(txtDragImage.ControlID)
1 Like