Set value WebTextField from HTML with JavaScript

Targets Web
1

Hi, Friends I do not understand how I can send the result of the variable date to WebTextField.

I have a WebHTMLViewer that loads the following code I want to send the date to the field

HTMLViewer1 Open HTML code:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Datepicker - Display month &amp; year menus</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
 
  $( function() {
    $( "#calendar" ).datepicker({
      changeMonth: true,
      changeYear: true
    });
  } );

  function check() {
     var date = document.getElementById("calendar").value;
     document.getElementById("WebTextField").value = date; // ????????
}

  </script>
</head>
<body> 

<div id="calendar"> </div>
<button onclick="check()">Click Send Date</button>

</body>
</html>
2

To return a value to the app from inside an HTMLViewer (which is an iFrame) you can change the hashtag of the webpage :

window.parent.window.location.hash = "zozo";

Then in Session.HashTagChanged, you get the new Hashtag :

Sub HashTagChanged() Handles HashTagChanged Webpage1.TextField1.Text = Replace(Hashtag, "#", "") End Sub

In order to not get any hashtag, you want to place some tag in your hashtag, so you can distinguish it. Something like :

window.parent.window.location.hash = "rtrnvalue:zozo"; // 'zozo' being the value to return

Then you can discriminate :

Sub HashTagChanged() Handles HashTagChanged if left(Hashtag, 11) = "#rtrnvalue:" then Webpage1.TextField1.Text = Replace(Hashtag, "#rtrnvalue:", "") end if End Sub

You can also use a WebSDK control with TriggerServerEvent. It is a bit more complex, but it won’t show the hashtag. You can read more about it in the Extra folder next to the IDE executable, “WebSDK”.

3

You still can’t just set the value. The events that send the data to the server rely on the key events firing when the user types.

4

Greg, I am sorry, but proof is in the pudding…

senddate.xojo_binary_project

5

Nice one Michel - clever stuff! If only there were a user-editable wiki to collect this kind of info - Tips, Tricks, ‘n’ Code Snippets. I think it’d be really useful to the community in general. Something like that might exist already, but I don’t think so?

6

Genius, thank Michel

7

Well, everything is on http://www.w3schools.com

8

Lots of info on HTML and CSS and Javascript, yes, but nothing Xojo-specific. To me, this is the little nugget of info in this thread - a useful technique that could be applied elsewhere also:

9

If you’re at the point where you’re writing custom things in a WebHTMLViewer you should look at creating WebSDK controls for these things. It’s not really difficult, you just have to read the documentation from Xojo on how to communicate with Xojo.

10

This forum itself is a wiki of sorts.

11

I’m interested in your code, have tested your HTML code at open HTMLviewer event but doesn’t show calendar datepicker, only a button with the text “Click Send Date”…

I want to know how to use jquery UI elements with pure HTML code.

[quote=321834:@Victor Manuel Osornio]Hi, Friends I do not understand how I can send the result of the variable date to WebTextField.

I have a WebHTMLViewer that loads the following code I want to send the date to the field

HTMLViewer1 Open HTML code:

[code]
<!doctype html>

jQuery UI Datepicker - Display month & year menus
Click Send Date [/code][/quote]
12

Jose, you should start your own thread. This is off topic.