I have a Template that uses Smart in a SugarCRM Module I am building.
The smarty code in question is below, it basically iterates over a PHP Array calling a JavaScript function for each Array Item...
{foreach from=$TASKS key=key item=task}
add_task_row("{$task.task_id}","{$ID}","{$task.name}","{$task.description}","{$task.status}","{$task.priority}","{$task.type}","{$task.sort_order}","{$task.heading}");
{/foreach}
And here is the JavaScript Function shown above...
function add_task_row(taskid,projectid,name,description,status,priority,type,sort,heading){
var ii = document.getElementById("project_tasks");
var num = document.getElementById("tasks_count").value;
// If TaskID is EMPTY, then assign it a new one from the row count
var taskIDTimeStamp = new Date().getTime();
//console.log('ID1: '+id);
if(taskid){
var taskid = taskid;
}else{
var taskid = taskIDTimeStamp;
}
num++;
//var prioritySelHtml = createOptions(priority);
var e = document.createElement("div");
e.setAttribute('id','task_'+num);
e.setAttribute('class','task_row');
e.innerHTML = '<span class="handle"></span>';
e.innerHTML += '<input name="taskid_'+num+'" id="taskid_'+num+'" size=15 type="hidden" value="'+taskid+'">';
e.innerHTML += '<input name="projectid_'+num+'" id="projectid_'+num+'" size=15 type="hidden" value="'+projectid+'">';
e.innerHTML += '<input name="sort_order_'+num+'" id="sort_order_'+num+'" class="sort_order" size=15 type="hidden" value="'+sort+'">';
e.innerHTML += '<input name="heading_'+num+'" id="heading_'+num+'" class="heading" size=15 type="hidden" value="'+heading+'">';
if(heading == 1){
// Add a Task Heading
e.innerHTML += '<input name="name_'+num+'" id="name_'+num+'" class="task-heading" size=45 type="text" value="'+name+'" placeholder="Type a Project Task List Heading Here...">';
e.innerHTML += '<div style="display:none; float: left; width: 400px;"><textarea name="description_'+num+'" id="description_'+num+'" rows="4" cols="50">'+description+'</textarea></div>';
e.innerHTML += '<div style="display:none; float: left; width: 100px;"><select name="status_'+num+'" id="status_'+num+'" class="status">'+buildFormSelection(statusArray, status)+'</select></div>';
e.innerHTML += '<div style="display:none; float: left; width: 90px;"><select name="priority_'+num+'" id="priority_'+num+'" class="priority">'+buildFormSelection(prioritiesArray, priority)+'</select></div>';
e.innerHTML += '<div style="display:none; float: left; width: 100px;"><select name="type_'+num+'" id="type_'+num+'" class="type">'+buildFormSelection(typesArray, type)+'</select></div>';
}else{
// Add a Task
e.innerHTML += '<input name="name_'+num+'" id="name_'+num+'" size=45 type="text" value="'+name+'">';
//e.innerHTML += '<input name="description_'+num+'" id="description_'+num+'" size=45 type="text" value="'+description+'">';
e.innerHTML += '<textarea name="description_'+num+'" id="description_'+num+'" class="edit_description" rows="1" cols="50">'+description+'</textarea>';
e.innerHTML += '<select name="status_'+num+'" id="status_'+num+'" class="status">'+buildFormSelection(statusArray, status)+'</select>';
e.innerHTML += '<select name="priority_'+num+'" id="priority_'+num+'" class="priority">'+buildFormSelection(prioritiesArray, priority)+'</select>';
e.innerHTML += '<select name="type_'+num+'" id="type_'+num+'" class="type">'+buildFormSelection(typesArray, type)+'</select>';
}
//e.innerHTML += '<button type="button" onclick="remove_item_row('+num+')"><img src="index.php?entryPoint=getImage&imageName=id-ff-clear.png"></button>';
e.innerHTML += '<button type="button" onclick="remove_item_row('+num+')"><img src="./modules/apoll_Web_Projects/assets/images/cross.png"></button>';
e.innerHTML += '<br style="clear:both;">';
document.getElementById("tasks_count").value = num;
ii.appendChild(e);
}
Everytime my JavaScript function add_task_row()
is called, it inserts a new Project Tasks Div into the DOM and populates form fields in each Row.
This works great most of the time, however I just saved a different value to the Database and now when it loads this value, it causes JavaScript Errors like this... Uncaught SyntaxError: Unexpected token ILLEGAL
When I view the page source I can see that it is 1 database record causing the problem in my source code....
add_task_row("1411445999407","205e34c6-7381-92eb-e6ab-54125429cd2a","ghjfghjh","dfg dhfjhg dfgosdjkfgosdfk hgdjfhdhikfgj gsidgisfdgh
fh
dfgh
d tgh
tgj
hfghj
fg hjgh0dgoh igkoiiuwidth: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;width: 679px;","In Progress","Low","Other","3","0");
So in this above code, you can see that this long database value is not wrapped in Quotes for some reason.
Any idea how to fix this issue that only happens when the DB value has like special characters it seems?
UPDATE, upon further inspection, I see that the long value is wrapped in Quotes, and with more testing, it is not the special characters that caused the problem, it is the line breaks!
add_task_row("1411445999407","205e34c6-7381-92eb-e6ab-54125429cd2a","ghjfghjh","gdf;dgdfdfg 679px;width: 679px;width: 679px;
dsgdfgsdfg
dfgsdfgsdfg
dfgsdfg","In Progress","Low","Other","3","0");
Any ideas how I can make strings with these line breaks not cause JavaScript errors?