I get the error: TypeError: Cannot read property 'document' of null on Infragistics.lob.js:880

Steps to recreate:

1: Hit script link which executes previewHTMLContent function (append the html to htmlEditor div).

2: Hit edit button which executes loadHTMLEditor function. This clears the content/styles/css of the htmlEditor div then loads the HTML editor with the content html.

3: Change the script by clicking on a new script link and the previewHTMLContent function is executed again with the new HTML

4: Hit edit button for new script. This is where the div empties out and the javascript error occurs. 

Once you load the HTMLEditor, are you unable to reload it?

HTML:

<div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<button class="btn btn-info pull-right" type="button"><span class="glyphicon glyphicon-plus"></span> Add</button>
<h3>Script Documents</h3>
<div class="clearfix"></div>
</div>
<div class="panel-body">
<ul class="nav nav-pills">
@foreach (var script in @Model)
{
<li>
<span class="glyphicon glyphicon-arrow-right pull-right"></span>
<a href="BLOCKED SCRIPTvoid(0);" class="btn btn-default btn-script" data-id="@script.ID">@script.Name</a>
</li>
}
</ul>
</div>
</div>
</div>
<div class="col-md-8">
<div class="panel panel-default">
<div class="panel-heading">
<button id="Edit" class="btn btn-info pull-right" type="button" data-id=""><span class="glyphicon glyphicon-pencil"></span> Edit</button>
<h3>Details</h3>
<div class="clearfix"></div>
</div>
<div class="panel-body">
<div id="container">
<div id="htmlEditor"></div>
</div>
</div>
</div>
</div>
</div>

Javascipt:

$(function () {
$('a.btn-script').click(function () {
var id = $(this).data('id');
$.ajax({
url: "/Scripts/Display/",
type: "POST",
data: { id: id},
success: function (result) {
clearContent();
previewHTMLContent(result.script);
setEditDataId(id);
}
});
});

$('#Edit').click(function () {
$.ajax({
url: "/Scripts/Display/",
type: "POST",
data: { id: $(this).data('id') },
success: function (result) {
clearContent();
loadHTMLEditor(result.script);
}
});
});
});

function setEditDataId(id) {
$('#Edit').data('id', id);
}

function previewHTMLContent(script) {
var contentText = $("<div/>").html(script).text();
$("#htmlEditor").append(contentText);
}

function loadHTMLEditor(script) {
var height = $('html').hasClass('touch') ? 500 : 800,
contentText = $("<div/>").html(script).text();
var $igTBar = null;

$("#htmlEditor").igHtmlEditor({
height: height,
width: "98%",
customToolbars: [
{
name: "DeleteContentButton",
collapseButtonIcon: "ui-igbutton-collapse",
expandButtonIcon: "ui-igbutton-expand",
items: [{
name: "appendDeleteButton",
type: "button",
handler: appendDeleteButton,
scope: this,
props: {
isImage: {
value: false,
action: '_isSelectedAction'
},
imageButtonTooltip: {
value: "Clear all content",
action: '_tooltipAction'
},
imageButtonIcon: {
value: "ui-icon-contact",
action: '_buttonIconAction'
}
}
}]
}]
});

$("#htmlEditor").igHtmlEditor("setContent", contentText, "html");

changeToolbarsPosition();
}

function appendDeleteButton(ui) {
$("#htmlEditor").igHtmlEditor("setContent", "", "html");
}

function changeToolbarsPosition() {
$($("#htmlEditor").find("span[id*='insertObjectToolbar'].ui-igtoolbar")).insertAfter($("#htmlEditor").find("span[id*='textToolbar'].ui-igtoolbar"));
}

function clearContent() {
$("#htmlEditor").empty();
$("#htmlEditor").removeClass();
$("#htmlEditor").removeAttr('style');
}

Controller:

public ActionResult Index()
{
List<CRMScript> scripts = _CrmScriptRepository.GetAllScripts();

return View(scripts);
}

[HttpPost]
public ActionResult Display(int? id)
{
List<CRMScript> scripts = _CrmScriptRepository.GetAllScripts();

string script = scripts.FirstOrDefault(s => s.ID == id).Script;

if (script == null) HttpNotFound();

return Json(new {success = true, script});
}