SyntaxError: unterminated string literal <script>...</script> tag not working within a string variable

Question

Please look my code.

var id = 1;
var htmlText = '<div id="horizontalUserPopup"><ul id="tabs1" class="rtabs"></ul><div class="panel-container"><div id="view1"><script>viewMiniProfile("'+id+'",this);</script></div><div id="view2"></div><div id="view3" style="display:none;">Blah Blah Blah</div><div id="view4" style="display:none;">444444</div></div></div>';
$('#contents').html(htmlText);

Above code i am getting following error -

If i remove </script> its working fine. Please check and let me know.

EDIT:

Complete Code -

function modelInfo(id, username) {
                var pageUrl = $('#pageurl').val();
                $('#model-popup-box1 h3').addClass('newsfeed');
                var content_area = $('#model-popup-content1');
                content_area.html('Please wait...');
                $('#model-popup-box-title1').html('About ' + username);
                $('#model-popup-body1').show();

                content_area.html('<div id="horizontalUserPopup"><ul id="tabs1" class="rtabs"></ul><div class="panel-container"><div id="view1"><script>viewMiniProfile("'+id+'",this);</script></div><div id="view2"></div><div id="view3" style="display:none;">Blah Blah Blah</div><div id="view4" style="display:none;">444444</div></div></div>');

                var innerHtml = "<li><a href=\"#view1\" id='miniprofile-view1' onclick=\"viewMiniProfile('"+id+"',this)\">Mini-Profile</a></li>" +
                        "<li><a href=\"#view2\">Tokens</a></li>" +
                        "<li><a href=\"#view3\">Notes</a></li><li><a href=\"#view4\">PM Logs</a></li>";

                var ul = document.getElementById("tabs1");
                ul.innerHTML = innerHtml;


                $('#horizontalUserPopup').responsiveTabs({
                    rotate: false,
                    startCollapsed: 'accordion',
                    collapsible: 'accordion',
                    setHash: true,
                    disabled: [4, 5]
                });

            }

Answer 1

I'm going to assume your quoted code is in a script tag, like this:

<script>
// ...stuff here...
$('#contents').html('<div id="horizontalUserPopup"><ul id="tabs1" class="rtabs"></ul><div class="panel-container"><div id="view1"><script>viewMiniProfile("'+id+'",this);</script></div><div id="view2"></div><div id="view3" style="display:none;">Blah Blah Blah</div><div id="view4" style="display:none;">444444</div></div></div>');
// ...stuff here...
</script>

If so, the problem is that the outer script tag is terminated in the middle of your string, because the HTML parser in the browser doesn't interpret JavaScript code, it just scans through it looking for </script> to figure out where the tag ends. So the code that gets handed to the JavaScript parser is

$('#contents').html('<div id="horizontalUserPopup"><ul id="tabs1" class="rtabs"></ul><div class="panel-container"><div id="view1"><script>viewMiniProfile("'+id+'",this);

...which does indeed have an unterminated string literal.

You can fix that by:

1. Putting your JavaScript code in a .js file and linking to it, or

2. Putting a backslash before the / in the ending script tag in your string:

   $('#contents').html('...<script>...<\/script>...');
   

   The \ prevents the browser's parser from seeing the sequence </script>, and to so it doesn't think the script ended there. In a JavaScript string, however, \/ is just /.