Wednesday, May 25, 2016

"Unexpected token ILLEGAL" when getting markup from the server?

Getting “Unexpected token ILLEGAL“ (maybe “Unexpected EOF” in Safari)  when retrieving your HTML from the server and parsing it? Even worse the stack trace is pointing you to some weird place (in my case it’s some line column in jquery.min.js).
Newlines are to suspect here..
The story here is that I was retrieving a form markup with an ajax request from a PHP backend, that’s getting the data from MySQL and filling the form template with the result, sending the form to the browser then placing this markup into a div with jQuery ( $(“#somediv”).html(markup) ).
The form had a textarea and a script that compared the value of that field to some other value, and that was the problem, when the field (textarea value) had a newline, Javascript would just breakdown, so if you have a similar situation, read along..



Why is this happening

Javascript (and every other language for that matter, AFAIK) can’t have line breaks between the quotes of a string, that’s because when JS encounters a line break it will consider that new line an indication that it’s the end of a command (statement - piece of code) and proceeds to the next line imagining it’s a new command and that would make it treat the new quote character as an opening, not closing quote and boom.. that’s why we have the “\n” thingy.


The catch

JS recognizes the “\n” with no problems, but HTML does not, it has a special entity for the line break.
After investigating, I found out that PHP saves the new lines from the textarea as a vertical tab (ASCII code 013) and a backspace (ASCII code 010).
HTML understands the vertical tab (through a special entity) and that’s how newlines can be displayed in a textarea without problems.

I needed not to alter what’s being saved but rather change how it’s displayed.

The solution

The HTML version of a vertical tab is 
 so we need to replace every “013” ASCII character with it’s HTML version before sending it to the browser, we will also get rid of the backspace character because it would cause problems (ASCII code 010).

So, in PHP (in my case) write down the code that will do exactly that..
//Starting off with an empty string the will hold the address after modifications
$newAddress = "";
$address = $row['address']; //Address returned from the database query
//Loop through the string characters
for ($char = 0; $char < strlen($address); $char++) {
    //ord() gets the ASCII code for the current character
    if (ord($address[$char]) == 13){
        $newAddress .= ' &#013;';
    }
    //Getting rid of the backspace character
    elseif (ord($address[$char]) != 10){
        $newAddress .= $address[$char];
    }
}
//$row is what is being used to fill out the form template with data, so that's what’s being placed in the textarea and what’s being compared in the script
$row['address'] = $newAddress;


Just note that the address when used in the script will have &#013; in place of new lines (that shouldn’t be a problem though) .


That’s it, feel free to fill the gaps and ask questions.

No comments:

Post a Comment