Add_action_callback does not work when using execute_script

Developers Ruby API
1

After using the exit_script,
When I try to add_action_callback on html dialog,
Uncaught TypeError: sketchup.dlg_html is not a function error.
can’t I use both?

ruby

model = Sketchup.active_model
selection = model.selection
entities = model.active_entities

dlg_html = File.join(__dir__, 'html', 'test.html')
dialog = UI::HtmlDialog.new(
{
    :dialog_title => "Dialog Example",
    :scrollable => true,
    :resizable => true,
    :width => 600,
    :height => 400,
    :left => 100,
    :top => 100,
    :min_width => 50,
    :min_height => 50,
    :max_width =>1000,
    :max_height => 1000,
    :style => UI::HtmlDialog::STYLE_DIALOG
})
dialog.set_file(dlg_html)
dialog.show

UI.messagebox("loading")
dialog.execute_script("var testString = 'test';")
dialog.execute_script("document.getElementById('input_test').value = testString;")

dialog.add_action_callback("dlg_html") {|dialog, data| 
    
    puts data

}

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript">

        function sendData(flag){
            
            var test_data = document.getElementById("input_test").value;

            console.log(test_data);

            sketchup.dlg_html(test_data);
            // window.close();
        };          
    </script>
</head>
<body>
    <div>  
        <input type="text" id="input_test" name="input_test">
        <input type="button" onclick="sendData();" value="Set" />  
    </div>

</body>
</html>
2

Please post Ruby API questions in the Ruby API subcategory.

(EDIT: Thanx @dezmo for topic reassignment.)

Your JS function sendData has an argument that is not sent by the button’s onClick event.

Also this element in the <head> of the HTML document …

      <meta http-equiv="X-UA-Compatible" content="IE=edge">

… is unnecessary with UI::HtmlDialog which is using the Chrome Embedded Framework.

The following works for me in SketchUp 2017 and 2021.

module Testing

  extend self

  @dialog = nil if !defined?(@dialog)

  def dlg_html
  %q[
  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <!-- <script type="text/javascript" src="../js/jquery.js"></script> -->
      <script type="text/javascript">

          function sendData(){

              var test_data = document.getElementById("input_test").value;

              console.log(test_data);

              sketchup.dlg_html(test_data);
              // window.close();
          };          

          document.onreadystatechange = function () {
              if (document.readyState === 'complete') {
                sketchup.ready();
              }
          }

      </script>
  </head>
  <body>
      <div>  
          <input type="text" id="input_test" name="input_test" value="nothing">
          <input type="button" onclick="sendData();" value="Set" />  
      </div>
  </body>
  </html>
  ]
  end

  def dialog

    #dlg_html = File.join(__dir__, 'html', 'test.html')
    # For this test we'll use a method to generate a HTML string.

    @dialog = UI::HtmlDialog.new(
      :dialog_title => "Dialog Example",
      :scrollable => true,
      :resizable => true,
      :width => 600,
      :height => 400,
      :left => 100,
      :top => 100,
      :min_width => 50,
      :min_height => 50,
      :max_width =>1000,
      :max_height => 1000,
      :style => UI::HtmlDialog::STYLE_DIALOG
    )

    @dialog.add_action_callback("dlg_html") {|_dlg, data| 
      puts data
    }

    @dialog.add_action_callback("ready") {|_dlg| 
      UI.messagebox("Ready to change value ...")
      @dialog.execute_script("var testString = 'test';")
      @dialog.execute_script("document.getElementById('input_test').value = testString;")
    }

    #@dialog.set_file(dlg_html)
    @dialog.set_html(dlg_html())

    # Show the dialog window last after setting all callbacks:
    @dialog.show
  end


end

To test after pasting into the Console, … use the command …
Testing.dialog

1 Like
3

Thanks!!