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}); }
Hi Kyle Wingate,
Thank you for using Infragistics products!
I have a problem to run your code because of missing parts of it: CRMScript, _CrmScriptRepository...
It will be more convenient and easier to investigate if you send a small sample of your project as attachment, where the issue is isolated. Sending of code is acceptable when you want to show only few lines. Otherwise, often some parts of the project are missing and it is impossible to assemble working project (as it is in your case). As soon as we receive working sample, we can start investigate the issue you complaining of.
I've attached a sample with the aforementioned code in Controllers/ScriptController and Model/CRMScript
I investigated your project and found that when you call JS method clearContent you execute $("#htmlEditor").empty(); which "Remove all child nodes of the set of matched elements from the DOM." (source - https://api.jquery.com/empty/).
But after executing this method the igHtmlEditor is still existing. And when you try to re-create it in loadHTMLEditor method, actually it does not re-create it, but just re-initialize it. It means that it does not call _create() method of the wigdet, but only _init(). (More information about these methods: _create, _init)
And here is the root of the problem, because we create the inner document in the _create() method and in the _init() it is accessed and used. Once you try to re-initialize it, without re-create it, you actually try to access element that is not created. This causes the error.
The fix for this is to destroy the widget
$("#htmlEditor").igHtmlEditor("destroy")
instead of just remove its child nodes with $("#htmlEditor").empty();
Hope this helps you!
Thanks a ton, Petko, and I hope this serves someone in the future.
I needed a way to see if the widget had been initialized before i can destroy it because if you try to destory the widget before initialization an error is thrown.
I think I've found a solution for that:
// Check if the HTML Editor control has been initalized
if (typeof $("#htmlEditor").igHtmlEditor() !== "undefined") {
// Destroys HTML Editor control $("#htmlEditor").igHtmlEditor("destroy"); }
I'm glad I could help.
Just in case, I'm sharing this post from our forums, related to "cannot call methods on ... prior to initialization", but I think you also handled it properly.