To update some Blog Data, a click on an EDIT button initiates an Ajax call that loads a textarea for Froala and initialize Froala in the same routine. It shows correctly. I click on a submit button, which is another routine that destroys the Froala instance and empties the textarea to start over again on another blog.
This seems to work for a few cycles (1,2, or 3 - not consistent) of edit/submit, then fails and the textarea no longer renders as a Froala interface.
I do get a buildup of Javascript errors, but am having a difficult time understanding and tracing the source of them as most point to Jquery issues. I suspect these are key, but maybe someone can point out something obvious as I struggle to understand these errors. I'll post a few of them at the end.
//The textarea is appended to id="edit_data"
//It is: '<textarea id="article">{blog data here}</textarea>'
//this would be the (data) that comes through Ajax.
//HTML:
<div id="edit">
<div id="edit_data"></div>
</div>
//would get this after Ajax call
<div id="edit_data">
<textarea id="article">{Froala blog data here}</textarea>
</div>
//JS code when edit button clicked that appends textarea and initializes Froala
$(document).on('click', '#edit_blog', function(){
$.ajax({
type: "POST",
url: 'blog_list_ajax.php',
async : false,
data: { "action":'edit_blog',
"post_id":post_id},
success: function(data) {
$('#edit_data').append(data);
$('#edit').fadeIn(1000);
},
error: function() {
alert('Ajax Failed');
}
});
// Froala Initialize action.
if (!$('#article').data('froala.editor')) {
$('#article').froalaEditor();
}
});
//JS code when submit button clicked that destroys Froala and empties textarea
$(document).on('click', '#update', function(){
//Destroy Froala instance
if ($('#article').data('froala.editor')) {
$('#article').froalaEditor('destroy');
}
$('#edit_data').empty();
$('#edit').hide();
});
Expecting that the Froala initialize and destroy should have done the trick even with loading in new <textarea>s each time.
JAVASCRIPT ERRORS:
VM17117:29 Uncaught TypeError: $.widget is not a function
at <anonymous>:29:7
at <anonymous>:590:3
at m (VM17076 jquery-3.3.1.min.js:2)
at Function.globalEval (VM17076 jquery-3.3.1.min.js:2)
at text script (VM17076 jquery-3.3.1.min.js:2)
at Ut (VM17076 jquery-3.3.1.min.js:2)
at k (VM17076 jquery-3.3.1.min.js:2)
at XMLHttpRequest.<anonymous> (VM17076 jquery-3.3.1.min.js:2)
at Object.send (VM17076 jquery-3.3.1.min.js:2)
at Function.ajax (VM17076 jquery-3.3.1.min.js:2)
VM17119:7 Uncaught TypeError: Cannot read property 'POPUP_TEMPLATES' of undefined
at <anonymous>:7:287
at <anonymous>:7:240
at <anonymous>:7:257
at m (VM17076 jquery-3.3.1.min.js:2)
at Function.globalEval (VM17076 jquery-3.3.1.min.js:2)
at text script (VM17076 jquery-3.3.1.min.js:2)
at Ut (VM17076 jquery-3.3.1.min.js:2)
at k (VM17076 jquery-3.3.1.min.js:2)
at XMLHttpRequest.<anonymous> (VM17076 jquery-3.3.1.min.js:2)
at Object.send (VM17076 jquery-3.3.1.min.js:2)
VM17120:7 Uncaught TypeError: Cannot read property 'DEFAULTS' of undefined
at <anonymous>:7:284
at <anonymous>:7:240
at <anonymous>:7:257
at m (VM17076 jquery-3.3.1.min.js:2)
at Function.globalEval (VM17076 jquery-3.3.1.min.js:2)
at text script (VM17076 jquery-3.3.1.min.js:2)
at Ut (VM17076 jquery-3.3.1.min.js:2)
at k (VM17076 jquery-3.3.1.min.js:2)
at XMLHttpRequest.<anonymous> (VM17076 jquery-3.3.1.min.js:2)
at Object.send (VM17076 jquery-3.3.1.min.js:2)
...There are more errors, but not sure how useful they will be to post here.
I should add that Froala gives a simple example of initialize and destroy here.
The code above works fine. The issue was a conflict with a double load of a header file containing several javascript(jquery, tagit, bootstrap, etc.) files, which caused error buildups to eventually cause odd behavior. After correcting this issue, the Froala initiate/destroy function worked perfectly!