Html dialog box to set and get information

Developers Ruby API
12
I fixed it in my editor ... (click to expand) ... 
html = %{
  <!DOCTYPE html>
  <html>
    <head>
    </head>
    <body>
      <h1> Result:
      <p id="r0c0">
      <p id="r1c1">
    </body>
    <script>
      //document.getElementById("r0c0").innerHTML= js_ary[0][0];
      //document.getElementById("r1c1").innerHTML= js_ary[1][1];
    </script>
  </html>
}

dialog = UI::HtmlDialog.new(
  :dialog_title => "Dialog Example",
  :preferences_key => "com.sample.plugin",
  :width => 600,
  :height => 400,
  :left => 100,
  :top => 100,
  :style => UI::HtmlDialog::STYLE_DIALOG
)

ruby_ary = [ [1, 2, 3 ], [9, 4, 6], [4, 6, 8] ]
json = ruby_ary.to_json

dialog.set_html(html)
dialog.show

# Entered individually at the Ruby Console ...
dialog.execute_script( %[var js_ary = JSON.parse('#{json}');] )
dialog.execute_script( %[document.getElementById("r0c0").innerHTML= js_ary[0][0];] )
dialog.execute_script( %[document.getElementById("r1c1").innerHTML= js_ary[1][1];] )

The first error I saw was that the <script> element was put before the <body> where the elements and their IDs were defined. So I moved the <script> element after the <body>.

The second error I saw, after the dialog opened, I opened the Chrome DevTools window (as I told you to,) and switched to the Console tab.

image

So I had to

  1. correct the function names from "getElementbyID" to "getElementById"
  2. put semi-colons at the line of each statement

The 3rd error I saw …

image

There are several reasons why this is happening.

  1. the call to dialog.execute_script is happening before the html is loaded into the CEF window, so it’s JavaScript process is not even loaded at that point in time.

  2. but this error is happening at line 12 which is in the <script> element. When the page is loading the js_ary is not yet defined so at that point during the load, you cannot yet set the values of your <p> elements from the js_ary.

We can instead move those statements to dialog.execute_script calls. …

So commenting out those two statements in the <script> block and loading the dialog, then executing the call to send over the js_ary we no errors in the JS Console and if we type "js_ary" + ENTER we see that the array is indeed defined …

image g)

Then subsequently running these two statements in SketchUp’s Ruby Console …

dialog.execute_script( %{document.getElementById("r0c0").innerHTML= js_ary[0][0];} )
dialog.execute_script( %{document.getElementById("r1c1").innerHTML= js_ary[1][1];} )

… we see the values appear in their <p> elements …

image

Although these statements actually work, you’ll want to define an automated function in JS that you call from Ruby, to iterate the array with a JS for loop to populate your HTML table.

Other observations …

  • You cannot put linefeeds into HTML by inserting empty lines in the source text.
    You need to use <br> elements.

  • You need to use properly formed HTML as shown in the example above.

  • Notice in the above Ruby examples that we can use whatever delimiters that make sense for surrounding % strings. Since your JS statements used [] internally, I use curly braces so as not to confuse my editor’s color lexing.