Novice with a first attempt to do anything in html, couple questions

Hey I am trying to work out a way to get a list of attributes from the user, started with this example. Hoping for some very simple basic example help. I am OK so far getting the attributes back out of the dialog, but I want to populate the fields with a previously saved list.

What is the best way to feed these defaults into my script?

How do I use a variable correctly in html? When I use ,


all i get is myvariable in italics and not its assigned value.

With the below code when I put


As the input value I get the 2nd character in the array ‘t’ and not the 3rd value ‘test3’

I tried this using individual values instead of a range and ran into the problem of removing the double quotes.

test = ['test1', 'test2', 'test3']
@json = test.to_json

def get_user_input()

 dialog =
	  :dialog_title => 'DC Tools',
	  :scrollable => true,
	  :resizable => true,
	  :width => 500,
	  :height => 300,
	  :left => 200,
	  :top => 200,
	  :min_width => 50,
	  :min_height => 50,
	  :max_width =>1000,
	  :max_height => 500,
	  :style => UI::HtmlDialog::STYLE_DIALOG
	#ruby stop
	html = "
	<!DOCTYPE html>
	<title> FMS Test Dialog
	<h2>DC Attributes to be preserved:</h1>
	function sendDataToSketchUp() {
		var att_1 = document.getElementById('att_1');
		var att_2 = document.getElementById('att_2');
		var att_3 = document.getElementById('att_3');
		sketchup.getUserInput(att_1.value, att_2.value, att_3.value)

	<button onclick='sendDataToSketchUp()'>Save Attributes</button>
	<p>Enter attribute names:</p>
		01&emsp; <input id='att_1' type='text' name='att1' value='1st attribute' size='50' required><br>
		02&emsp; <input id='att_2' type='text' name='att2' value='2nd attribute' size='50' required><br>
		03&emsp; <input id='att_3' type='text' name='att3' value=	'#{@json[2]}' size='50' required>
	#ruby start
	dialog.add_action_callback("getUserInput"){|action_context, att_1, att_2, att_3|
		puts "DC Attributes Save List:"
		puts "01  #{att_1}"
		puts "02  #{att_2}"
		puts "03  #{att_3}"


	<h2>DC Attributes to be preserved:</h1>

… is not correctly formed HTML. Ie, the opening and closing element tags do not match.
Also, a header element should go within the <body> element.

If you intended this to be a JS comment, then it should go inside the <script> element and use a comment prefix // as:

    // DC Attributes to be preserved:
	function sendDataToSketchUp() {
		var att_1 = document.getElementById('att_1');
		var att_2 = document.getElementById('att_2');
		var att_3 = document.getElementById('att_3');
		sketchup.getUserInput(att_1.value, att_2.value, att_3.value)

Because @json is a String object (created using #to_json,) so the String#[] method is retrieving a character at the index given.

You would instead need to use value = '#{test[2]}' within the attributes for the <input> element.
(Note: in the HTML world, HTML elements have attributes such as id, type, size, value, etc. Don’t confound this with DC attributes.)


Now this brings up the question about why use JSON ?

The answer is that values can be passed back and forth more easily from a Ruby Hash to a JS Object and back to a Ruby Hash.

I’ve posted examples on this before in this category.


HTML is the standard markup language for creating Web pages.
…HTML elements tell the browser how to display the content…
… HTML stands for Hyper Text Markup Language
…HTML elements label pieces of content such as “this is a heading”, “this is a paragraph”, “this is a link”, etc.
For example:

The <var> tag is used to defines a variable in programming or in a mathematical expression. The content inside is typically displayed in italic .

To use a real variables in conjunction with HTML you need to learn JavaScript, the world’s most popular programming language.


JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate. It is based on a subset of the JavaScript Programming Language Standard ECMA-262 3rd Edition - December 1999. JSON is a text format that is completely language independent but uses conventions that are familiar to programmers of the C-family of languages, including C, C++, C#, Java, JavaScript, Perl, Python, and many others. These properties make JSON an ideal data-interchange language.


This will return a string: "[\"test1\",\"test2\",\"test3\"]"
So if you are asking for : @json[2] >> you will get the 3rd character t from it…
( you need to find out more about “escape the quote character with a backslash \ symbol.” )

So, instead of using this:

you can use this. (And yoo do not need json)
name='att3' value= '#{test[2]}' size='50'


You can also set a JavaScript variable in a <script> section, transfer from Ruby as json and “immediately decode”

  var my_data = JSON.parse('#{@json}');

…and write JavaScript function to to set the relevant HTML elements content. Eg. “automatically” using
onload Event


This was one of my explainations:

1 Like

Hey Dan. :wave: Apparently there is no need to use JSON at all. Been reading over your examples all morning, think I maybe over thunk this part. I also find the grammar is hard when I can’t speak the language yet, first bit of grasping syntax and how to say things is a bit tough for me…

Yes messing around before I figured the open <> and close </> thing, missed that one thanks.

Thats where I got turned on to the JSON lol, still have the page open. Once I get a working example (like I think I do now) I should be able to understand the post(s) better. Usually takes a few reads and futzing with the code before it clicks…

Thanks for the help!

Hey @Dezmo :wave: Thanks for the introductory explanations, very helpful.

Will do.

This looks interesting will investigate.

Thanks for the help! :smiley:

Thanks @dezmo, this was a great suggestion.