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}); }