Sunday, January 16, 2011

IE8 : jquery : ajaxfileupload : Syntax Error: Unterminated string constant

The problem
Write a web app to upload a file, read the content then return the content in HTML table using JSON format then display the result dynamically at current HTML page. Below is the JSON return by a PHP script.
{filename: 'input.dat',total_recipient: '1',totalcolumn: '3',samples: '<table width="400px"><thead><tr><th>Column 1</th><th>Column 2</th><th>Column 3</th></tr></thead><tbody><tr><td>name</td><td>phone no</td><td>address</td></tr></tbody></table>',columntag: '{Col_1},{Col_2},{Col_3},'}
As usual it work perfectly on FF 3.5.3, but when come to IE8 I got the error message "Syntax Error: Unterminated string constant".

The catch
From the JSON alert on IE8, a linefeed (\r) follow by newline (\n) is inserted on some HTML tag. JSON result has following content.
{filename: 'input.dat',total_recipient: '1',totalcolumn: '3',samples: '\r\n<table width="400px">\r\n<thead>\r\n<tr>\r\n<th>Column 1</th>\r\n<th>Column 2</th>\r\n<th>Column 3</th></tr></thead>\r\n<tbody>\r\n<tr>\r\n<td>name</td>\r\n<td>phone no</td>\r\n<td>address</td></tr></tbody></table>',columntag: '{Col_1},{Col_2},{Col_3},'}

The solution
The quick hack is to remove the \r\n before it pass to browser to process. Edit the ajaxfileupload javascript file. At uploadHttpData function, look for the data type is JSON. Add following line before it run the eval() function.
data = data.replace(new RegExp( "[\\n|\\r]", "g" ), "");
  • Broswer : Internet Explorer 8.07600.16385
  • OS: Window 7
  • HTML Doc Type: DTD HTML 4.01
  • JS Lib: jquery  1.4.4
  • Jquery Plug-in: ajaxfileupload v1.0


No comments:

Post a Comment