How to convert text with new lines into JavaScript new lines using Smarty

Question

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?

Answer 1

This is how you put JavaScript strings into source. You cannot simply go to new line.

For example the following code is working

alert('1 2 3 4');

but the following does not:

alert('1
2 3 4');

and the following again works:

alert('1' +
'2 3 4');

If you want to make any changes in Smarty you could do it this way:

{assign var="string" value="1
2
3
4"}
<script>

    alert ("{$string|replace:array("\n","\r"):array(' ', '')}");
</script>

using replace modifier you change \\r and \\n into space - it makes small content change but if you don't care it should work.

The other solution is to convert new line endings into plain \\n string that makes JavaScript to treat them as new line so you could change above example into:

{assign var="string" value="1
2
3
4"}
<script>

alert ("{$string|replace:array("\n","\r"):array('\n', '\n')}");
</script>

and now in alert you will show new lines.

So in your case you should probably change line:

add_task_row("{$task.task_id}","{$ID}","{$task.name}","{$task.description}","{$task.status}","{$task.priority}","{$task.type}","{$task.sort_order}","{$task.heading}");

into

add_task_row("{$task.task_id}","{$ID}","{$task.name}","{$task.description|replace:array("\n","\r"):array('\n', '\n')}","{$task.status}","{$task.priority}","{$task.type}","{$task.sort_order}","{$task.heading}");