Interpolation problem when sending strings to HtmlDialog via execute_script()

Developers Ruby API
1

Hello All,

when I call

@d.execute_script("document.getElementById('body').innerHTML = 'hey';")

it works. But when I call

@d.execute_script("document.getElementById('body').innerHTML = '#{@body}';")

I get an error in the DevTools console:

Uncaught SyntaxError: Invalid or unexpected token

I think it has something to do with my string @body which, when I print to the Ruby console looks perfect like this:

<div>
<label>trim_width</label>
<div id='trim_width'>3.5</div>
</div>

Same thing if I simplify my @body string to something like “hey”

I tried ThomThom’s suggestions using .inspect and even %{} to no avail.

2

String interpolation works only in double-quoted strings. You are attempting to use it in a single-quoted string. The fact that the single-quoted is nestled inside a double-quoted does not change this.

3

Thank you @slbaumgartner! I’m sure that was part of the problem but it also looks like the newline “\n” characters where causing an error! I was hoping to have nicely formatted code to work with on the html side. I’ll try some things but at least the data is getting across now. Thanks!

4

I often take advantage of Ruby’s built in #inspect method to get the quotation marks right.

@d.execute_script("document.getElementById('body').innerHTML = #{@body.inspect};")
5

I don’t believe this is exactly correct. Ie, not his exact issue.

For example, the following works quite well …

@window_options= Hash['width',36,"height",24,"type","casement"]
#-> {"width"=>36, "height"=>24, "type"=>"casement"}

win_opts_str = @window_options.values.join('|')
js_command = "pushdata_adv( '#{win_opts_str}' );"

js_command.inspect
#-> "pushdata_adv( '36|24|casement' );"

I think his exact issue is that the html itself has single quotes in it for the id, and he has innerHTML’s argument also in single quotes.

Ie it looks like this BEFORE sending to execute_script …

"document.getElementById('body').innerHTML = '<div>
<label>trim_width</label>
<div id='trim_width'>3.5</div>
</div>';"

If he is going to use single quotes in his HTML, then he can do …

@d.execute_script(%[document.getElementById("body").innerHTML = "#{@body}";])

and #inspect it as Julia says if need be …

@d.execute_script(%[document.getElementById("body").innerHTML = "#{@body}";].inspect)
6

The benefit of #inspect is that it can be used with strings containing both single and double quotes. You don’t need to take the quotation style in the exact string into account.

7

… except that #inspect adds unescaped double quotes around the argument string.
It only escapes the double quotes in the string that are preexsisting. So …

@d.execute_script(%[document.getElementById("body").innerHTML = "#{@body.inspect}";])

… will not work.

8

That is kind of the point. Inspect escapes other quotes in relation to these wrapping un-escaped quotes.

Neither of these work if @body contains double quotes:

@d.execute_script(%[document.getElementById("body").innerHTML = "#{@body}";])

@d.execute_script(%[document.getElementById("body").innerHTML = "#{@body}";].inspect)

This works for @body that contains both single and double quotes.

@d.execute_script("document.getElementById('body').innerHTML = #{@body.inspect}")