javascript error of unterminated string

Question

I want pass a parameter of javascript functiona which is a string. This javascript function is a hintbox on mousehover..

and the string i am using is like this:

Hemmed Finish: Every side/edge (1/2" to 2") of the banner are folded and glued (special vinyl solution) or heat pressed. This is the most common and best finish option.

Stitched Finish: Every side/edge (1" to 2") of the banner are folded in the back and stitched/sewed with white thread. This is not a common option as thread can be seen on the banner.

Now in the hintbox on mousehover the above given text has to be display as it is displayed above along with the paragraph break.. But when i pass the above as parameter in that function along with appending some backslashes to recognise some punctuation, iots till gives me javascript error of unterminated string...

I am doing this:

onMouseover="showhint('Hemmed Finish\: Every side/edge \(1/2\'\' to 2\'\'\) of the banner are folded and glued \(special vinyl solution\) or heat pressed. This is the most common and best finish option.Stitched Finish\: Every side/edge \(1\'\' to 2\'\'\) of the banner are folded in the back and stitched/sewed with white thread. This is not a common option as thread can be seen on the banner', this, event, '250px')"

pls could u help me in rectifying the issue...

Answer 1

Check this :

onMouseover="showhint('Hemmed Finish: Every side/edge (1/2\'\' to 2\'\') of the banner are folded and glued (special vinyl solution) or heat pressed. This is the most common and best finish option.Stitched Finish: Every side/edge (1\'\' to 2\'\') of the banner are folded in the back and stitched/sewed with white thread. This is not a common option as thread can be seen on the banner', this, event, '250px')"

you do not need to escape : brackets like (

<script type="text/javascript">
<!--//
function alert2()
{
alert ("Don't forget the curly "+
"brackets - \nThey are essential!");
}
//-->
</script>

Answer 2

I see two potential problems here.

1. JavaScript, like many other programming languages, uses the " character to mark the beginning and the end of a string. Your hintbox text contains a ", so when JavaScript encounters it, it thinks that your string has ended. To fix the problem, you should refer to each " in your string as \". This tells JavaScript that you don't intend to end the string, but rather you plan to put a " inside your string.

2. Similarly, JavaScript does not allow you to place a "paragraph break" directly inside a string. Instead, you must type \n each time you want a carriage return inside your string.

So, here is how you should define your hintbox string:

hintbox = "Hemmed Finish: Every side/edge (1/2\" to 2\") of the banner are folded and glued (special vinyl solution) or heat pressed. This is the most common and best finish option.\n\nStitched Finish: Every side/edge (1\" to 2\") of the banner are folded in the back and stitched/sewed with white thread. This is not a common option as thread can be seen on the banner.";

This is typically called "escaping strings", and a quick Google should give you much more information on the toppic.

Happy programming!

Answer 3

Ok, I have the solution:

<element onMouseover="showhint('&lt;p&gt;Hemmed Finish: Every side/edge (1/2&quot; to 2&quot;) of the banner is folded and glued (special vinyl solution) or heat pressed. This is the most common and best finish option.&lt;/p&gt;&lt;p&gt;Stitched Finish: Every side/edge (1&quot; to 2&quot;) of the banner is folded in the back and stitched/sewed with white thread. This is not a common option as thread can be seen on the banner&lt;/p&gt;', this, event, '250px')" />

You have to escape the quotes XML-style, using ".

See a working example here.

Answer 4

Whilst the example works for me, it's pretty ugly. Avoid inline event handlers and the crazy escaping problems that come with them. Put the data elsewhere, such as in a JS variable or an attribute value where appropriate. For the case of a tooltip, the title attribute is best:

<span title="Hemmed Finish: Every side/edge (½″ to 2″) of the banner are folded and glued (special vinyl solution) or heat pressed. This is the most common and best finish option.&#10;&#10;Stitched Finish: Every side/edge (1″ to 2″) of the banner are folded in the back and stitched/sewed with white thread. This is not a common option as thread can be seen on the banner.">
    finish options...
</span>

Whilst that works as a tooltip in itself, you can use progressive enhancement to replace that native-HTML tooltip with a scripted one if you want eg. the more flexible styling that comes with it:

var spans= document.getElementsByTagName('span');
for (var i= spans.length; i-->0;)
    if (spans[i].title)
        replaceTitle(spans[i]);

function replaceTitle(element) {
    var title= element.title;
    element.title= '';
    element.onmouseover= function(event) {
        showhint(title, this, event||window.event, '250px');
    };
    element.onmouseout= function(event) {
        hidehint(...);
    };
}