JQuery HTML Unterminated String Literal Error If HTML Contains Spaces

Question

This code gets inserted into the page's HTML, by setting it as part of an element's innerHtml. It creates a button-like span that when clicked, opens a JQueryUI window with some constant text and with the text "Thiswindow" below that.

string custom_training_html = "Thiswindow"; // Note this line here.
link = "<span class=\"start_course_button\" onclick=";
link += "javascript:$(\"#temp_test_window\").dialog({minWidth:800,minHeight:600});$(\"#temp_test_custom_html\").html('" + custom_training_html + "');>Test JQueryUI";
link += "</span>\n";

However, if I change the text "Thiswindow" to "This window", I get:

SyntaxError: unterminated string literal

It's the presence of a space, anywhere in this HTML, that breaks the code. Other questions on this site say the problem is line breaks in the HTML, but I haven't got any, I think. I'm just building a string containing the <span> code, and the only difference between a working version and a non-working version is that one contains a space character. What's wrong?

FYI, the window that gets opened looks like this:

<div id="temp_test_window" title="Chaucer's Prologue (The Monk)">
    A monk there was, one made for mastery<br />... [snip]
    <div id="temp_test_custom_html">Content Goes Here</div>
</div>

EDIT: I've cleaned up the code to put the JS into its own function, but that hasn't solved the problem. In my main .aspx file I have:

function GenerateTestTrainingContent(content)
            {
                $('#temp_test_window').dialog({minWidth:800,minHeight:600});
                $('#temp_test_custom_html').html(content);
            }
[and later, outside the <script> tags:]
<div id="temp_test_custom_html">Content Goes Here</div>

And in the .aspx.cs file I have this code creating some HTML as "link":

link = "<span class='start_course_button' onclick=javascript:GenerateTestTrainingContent('OneWord');>";
link += "Test JQueryUI</span>\n";

That works, giving me a link that summons a pop-up JQueryUI window in which the text "OneWord" appears. However, if I change 'OneWord' to 'One Word' in the same code, I get:

SyntaxError: unterminated string literal
javascript:GenerateTestTrainingContent('One

So again, no space = works, any spaces = doesn't work.

JavaScript does not have such thing as "string" variable definition, you always use keyword "var" for those... — Mauno Vähä
– Mauno Vähä, Commented Sep 26, 2016 at 17:18
I should have noted: the code above is C# that creates JS. The string variable is a C# variable. — Snow
– Snow, Commented Sep 26, 2016 at 17:33
The C# error suggests that the string is not terminated properly. But it does not indicate which specific String or portion of the string. I suspect that you're missing a quote wrapper for the content of the onclick attribute. I would also suggest moving the JS code to it's own script block to avoid confusion. — Twisty
– Twisty, Commented Sep 26, 2016 at 20:11

Twisty · Accepted Answer · 2016-09-26 20:24:25Z

1

As I mentioned in my comment, I would move the JS to it's own <script> block. I would also cleanup the use of " versus ' to make things less confusing.

string custom_training_html = "This window"; // Note this line here.
string link = "";
link += "<span class='start_course_button'>Test JQueryUI</span>\r\n";
link += "<script>\r\n";
link += "$('#temp_test_window').dialog({ autoOpen: false, minWidth:800, minHeight:600 });\r\n";
link += "$('#temp_test_custom_html').html('" + custom_training_html + "');\r\n";
link += "$('.start_course_button').click(function(){ $('#temp_test_window').dialog('open'); });\r\n";
link += "</script>\r\n";

answered Sep 26, 2016 at 20:24

Twisty

31k2 gold badges30 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Snow Over a year ago

Moving the JS to its own block and checking the use of quote marks are good ideas. However, I'm still in a situation where a string with no spaces works, but one with spaces does not. See edited post.

Twisty Over a year ago

@Snow That's a really odd one, but I think it's related to C# and not JS. I don't have a ASP.NET test area, so I can't really test that element of the problem. You may want to edit your post, include details about what .NET Framework you're using etc.

Twisty Over a year ago

@Snow can you not call the click event from the separated JS code? Why are you running it in the onclick attribute?

Twisty Over a year ago

Also have you tried encoding the string?

link = "<span class='start_course_button' onclick=javascript:GenerateTestTrainingContent('One%20Word');>"; link += "Test JQueryUI</span>\n";

Collectives™ on Stack Overflow

JQuery HTML Unterminated String Literal Error If HTML Contains Spaces

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related