With Chrome: Uncaught SyntaxError: Unexpected token <

php javascript google-chrome syntax-error

14,897

Solution 1

...

        e.innerHTML = " . json_encode($html) . " ;

Solution 2

The error "Uncaught SyntaxError: Unexpected token <" is an appropriate error for what you are showing in your second code block, because it is invalid JavaScript and should fail in all browsers. You are assigning e.innerHTML equal to an unquoted string:

e.innerHTML = <ul style="list-style: none; margin: 0; padding: 0;">
<li style="background-color: #0000FF; margin: 0;"><img src="/asset/icon/info.gif" alt="Info: " /> working</li>
<li style="background-color: #008000; margin: 0;"><img src="/asset/icon/success.gif" alt="Success: " /> Got it</li>
</ul>
 ;

See the "<" right after the "="? - that is the unexpected token.

You don't seem to use any single quotes within that string, so the simplest fix is just to wrap it in single quotes. I don't know PHP, but something like this:

echo "
    <script type=\"text/javascript\">
    var e = document.getElementById('message');
    e.innerHTML = '" . $html . "';
    e.style.display = 'block';
    </script>";

Or whatever the PHP syntax is to get this result returned to the browser:

e.innerHTML = '<ul style="list-style ...   </ul>';

By the way, it doesn't make sense to set two different headers for the same response. What you are returning is one page that is html, which happens to have a script block at the bottom. The "text/javascript" content type is more for linked JS files, which do not contain html (no script tags), just JS.

14,897

Author by

RoboTamer

Liveaboard trimaran sailor & hobby programmer.

Updated on June 17, 2022

Comments

RoboTamer almost 2 years

I am getting this error Uncaught SyntaxError: Unexpected token < from chrome but everything works fine with FireFox. I have found many similar posts but no solution.

So I am wondering if there is a way of sending a second page to the browser after it has been build, with it's own header. The idea came, when I saw that Firefox places, what I echo in the function below, after the html closing tag , versus Chrome places it before the closing tag.

Basically, I like to send in this order:

header('Content-Type: text/html; charset= utf-8');
<html></html>

header('Content-Type: text/javascript; charset= utf-8'); 
<script></script>

This is my php script, I would like to uncomment the header code and send it independently from the html page.

public static function jsShow($html)
{
    //header('Content-Type: text/javascript; charset= utf-8');
    echo "
        <script type=\"text/javascript\">
        var e = document.getElementById('message');
        e.innerHTML = $html ;
        e.style.display = 'block';
        </script>";
}

This is what the page looks like in Firefox, and this works:

</body>
</html>

<script type="text/javascript">
var e = document.getElementById('message');
e.innerHTML = <ul style="list-style: none; margin: 0; padding: 0;">
<li style="background-color: #0000FF; margin: 0;"><img src="/asset/icon/info.gif" alt="Info: " /> working</li>
<li style="background-color: #008000; margin: 0;"><img src="/asset/icon/success.gif" alt="Success: " /> Got it</li>
</ul>
 ;
e.style.display = 'block';

</script>

I thought that I can maybe use ob_start() & ob_end_flush(), but you can't control headers with that only content.