I am trying to render HTML inside textarea
and I have an ajax
call from the controller to read the value and parse it as var
to the render()
function.
I followed the question here
However, the render()
function failed when I tried to use ResizeObserver
within the ajax
call. If I specifically define var explain = "<b style ="color:blue;">Risky</b>";
, the content can be rendered in onload
but not within the ajax
call.
May I know what am I missing here?
These are my codes:
@Html.TextArea("", new { @id = "box", @oninput = "render()"})
<script type="text/javascript">
$(document).ready(function () {
var job_ID = "1";
var explain = "";
onload = function () {
LoadJobResult(job_ID);
}
function render() {
var inp = document.getElementById("box");
var data =
`<svg xmlns="http://www.w3.org/2000/svg" width="${inp.offsetWidth}" height="${inp.offsetHeight}">
<foreignObject width="100%" height="100%">
<div xmlns="http://www.w3.org/1999/xhtml" style="font-style: normal; font-variant: normal; font-size:13.3px;padding:2px;">
${inp.value} <i style="color:red">Model Explanation</i>
</div>
</foreignObject>
</svg>`;
var blob = new Blob([data], { type: 'image/svg+xml' });
var url = URL.createObjectURL(blob);
inp.style.backgroundImage = "url(" + URL.createObjectURL(blob) + ")";
}
function LoadJobResult(ID) {
$.ajax({
url: '/controller/Get_JobResult',
type: 'Get',
dataType: 'json',
contentType: "application/json; charset=utf-8",
data: { 'job_ID': ID },
success: function (result) {
var res = JSON.parse(result);
$("#box").val(res[0]['DRP_Explanation_Txt']);
explain = res[0]['DRP_Explanation_Txt'];
render();
ro = new ResizeObserver(render());
ro.observe(document.getElementById("box"));
},
error: function (emp, err) {
console.log('my message' + err);
}
});
}
});
</script>