How to create a save button Using HTMLDialog?

Developers Ruby API
, ,
1

I want to create a save button that will save table informations as any kind of variables, arrays…and so on. There are a button created on the html code below, however, I don’t know how to activate it everytime I click on it. I support it should be some function to monitor the mouse movement.

Anyone could help is very appreciated.

The code of the button is here: there are the whole code at the bottom.

      <button id="export-btn" class="btn btn-primary">Export Data</button>
      <p id="export"></p>

I will later on write the infos to my attribute dictionary of groups.

model = Sketchup.active_model
mat  = model.materials
a = [
["London Eye", "1952", "3000"],
["Paris", "1952", "3000"],
["California", "1952", "3000"]
]
html1 =%Q[
<!-- Editable table -->
<div class="card">
  <h3 class="card-header text-center font-weight-bold text-uppercase py-4">Editable table</h3>
  <div class="card-body">
    <div id="table" class="table-editable">
      <span class="table-add float-right mb-3 mr-2"><a href="#!" class="text-success"><i
            class="fas fa-plus fa-2x" aria-hidden="true"></i></a></span>
      <table class="table table-bordered table-responsive-md table-striped text-center">
        <thead>
          <tr><!-- "first table"-->
            <th class="text-center">Building Name</th>
            <th class="text-center">Built Year</th>
            <th class="text-center">Torned Down Year</th>
          </tr><!-- "first table"-->
        </thead>
        <tbody>
          <tr>
            <td class="pt-3-half" contenteditable="true">Aurelia Vega</td>
            <td class="pt-3-half" contenteditable="true">1951</td>
            <td class="pt-3-half" contenteditable="true">1999</td>
          </tr>
          <!-- This is our clonable table line -->
          <tr>
            <td class="pt-3-half" contenteditable="true">Guerra Cortez</td>
            <td class="pt-3-half" contenteditable="true">45</td>
            <td class="pt-3-half" contenteditable="true">Insectus</td>
            </td>
          </tr>
          <!-- This is our clonable table line -->
          <tr>
            <td class="pt-3-half" contenteditable="true">Guadalupe House</td>
            <td class="pt-3-half" contenteditable="true">26</td>
            <td class="pt-3-half" contenteditable="true">Isotronic</td>
            </td>
          </tr>
          <!-- This is our clonable table line -->
          <tr class="hide">
            <td class="pt-3-half" contenteditable="true">Elisa Gallagher</td>
            <td class="pt-3-half" contenteditable="true">31</td>
            <td class="pt-3-half" contenteditable="true">Portica</td>
            </td>
          </tr>
          </form>
        </tbody>
      </table>
    </div>
      <button id="export-btn" class="btn btn-primary">Export Data</button>
      <p id="export"></p>
  </div>
</div>
<!-- Editable table -->
 ]
html  = %Q[
<!DOCTYPE html>
<html>
<head>
<style>
body { font: 100% sans-serif; }
table, th, td { border: 1px solid black; }
</style>
</head>
<body>

<h3><span style="color:red;">S</span>ketch<span style="color:red;">U</span>p Colors in Model:</h2>

<table>
  <tr>
    <th>File Name</th>
    <th>Display Name</th>
  </tr>
 ]
 


a.each do |arrays|
  html << %Q[
     <tr>
      <td>#{mat.name.gsub(/[<>]/, '')}</td>
      <td>#{mat.display_name.gsub(/[<>]/, '')}</td>
    </tr>
   ]
  puts "#{arrays}"
end

html << %Q[
</table>
</body>
</html>
]
# use a standard dialog
dialog = UI::HtmlDialog.new(
{
  :dialog_title => "Table in Dialog",
  :preferences_key => "table.sample.ruby",
  :scrollable => true,
  :resizable => true,
  :width => 600,
  :height => 500,
  :left => 100,
  :top => 100,
  :min_width => 50,
  :min_height => 50,
  :max_width =>1000,
  :max_height => 1000,
  :style => UI::HtmlDialog::STYLE_DIALOG
})
# inject some styling
dialog.set_html(html1)
dialog.show
2

You will need to write a javascript function to iterate the table body rows collecting the cell values into an array, and then pass the array back to your Ruby dialog object via a callback method.

Then add an onCLick event to your button that calls this javascript function.

Reference sites …