diff --git a/Resources/public/js/grid.js b/Resources/public/js/grid.js
index 06315ed2..8d5471e1 100644
--- a/Resources/public/js/grid.js
+++ b/Resources/public/js/grid.js
@@ -21,6 +21,9 @@ function enableMode(mode, lexikTranslationId, locales, url, csrfToken) {
             document.getElementById('inputContent-' + lexikTranslationId + '-' + locales[i]).style.display = 'block';
         }
     } else if (mode == 'view') {
+
+        let update = false;
+
         editButton.style.display = 'block';
         deleteButton.style.display = 'block';
         saveButton.style.display = 'none';
@@ -30,7 +33,8 @@ function enableMode(mode, lexikTranslationId, locales, url, csrfToken) {
             var newValue = document.getElementById('inputContent-' + lexikTranslationId + '-' + locales[i]).value;
 
             if (oldValue !== newValue) {
-                saveUpdatedLexikTranslations(lexikTranslationId, locales[i], newValue, url, csrfToken);
+                update = true;
+                document.getElementById('content-' + lexikTranslationId + '-' + locales[i]).innerText = newValue;
             }
 
             document.getElementById('content-' + lexikTranslationId + '-' + locales[i]).style.display = 'block';
@@ -38,6 +42,9 @@ function enableMode(mode, lexikTranslationId, locales, url, csrfToken) {
             document.getElementById('btnDelete-' + lexikTranslationId + '-' + locales[i]).style.display = 'none';
             document.getElementById('btnKeyDelete-' + lexikTranslationId).style.display = 'none';
         }
+        if (update) {
+            saveUpdatedLexikTranslations(lexikTranslationId, locales[i], url, csrfToken);
+        }
     } else if (mode == 'delete') {
         editButton.style.display = 'none';
         deleteButton.style.display = 'none';
@@ -49,11 +56,9 @@ function enableMode(mode, lexikTranslationId, locales, url, csrfToken) {
     }
 }
 
-function saveUpdatedLexikTranslations(lexikTranslationId, locale, newValue, url, csrfToken) {
+function saveUpdatedLexikTranslations(lexikTranslationId, locale, url, csrfToken) {
     let params = [];
 
-    document.getElementById('inputContent-' + lexikTranslationId + '-' + locale).value = newValue;
-    document.getElementById('content-' + lexikTranslationId + '-' + locale).innerText = newValue;
     var saveButton = document.getElementById('saveButton-' + lexikTranslationId);
     var trElement = saveButton.closest('tr.content');
     var tdElements = trElement.querySelectorAll('td');
@@ -416,7 +421,7 @@ function constructHtmlTr(item) {
             </td>
             ${Object.keys(item).filter(key => key !== '_id' && key !== '_domain' && key !== '_key').map(locale => `
             <td>
-                <span id="content-${item._id}-${locale}" class="locale">${item[locale]}</span>
+                <span id="content-${item._id}-${locale}" class="locale">${escapeHtml(item[locale])}</span>
                 <div>
                     <textarea id="inputContent-${item._id}-${locale}" name="column.index" class="form-control" style="display: none">${item[locale]}</textarea>
                 </div>
@@ -449,6 +454,16 @@ function constructHtmlTr(item) {
     return tr;
 }
 
+function escapeHtml(unsafe)
+{
+    return unsafe
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#039;");
+}
+
 function displayNoTranslations()
 {
     let div =
@@ -457,4 +472,4 @@ function displayNoTranslations()
             </div>`;
 
     return div;
-}
\ No newline at end of file
+}