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

Developers Ruby API
1

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 ,

<var>myvariable</var>

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

With the below code when I put

  '#{@json[2]}'

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 = UI::HtmlDialog.new(
	{
	  :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>
	<html>
	<head>
	<title> FMS Test Dialog
	</title>
	</head>
	<h2>DC Attributes to be preserved:</h1>
	
	<script>
	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)
	}
</script>

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

end
2 
	<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:

<script>
    // 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)
	}
</script>

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.)

2 Likes
3

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.

2 Likes
4

1.)
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.

__

2.)
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”

<script>
  var my_data = JSON.parse('#{@json}');
  .
  .
</script>

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

2 Likes
5

This was one of my explainations:

1 Like
6

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!

7

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

Will do.

This looks interesting will investigate.

Thanks for the help! :smiley:

8

Thanks @dezmo, this was a great suggestion.