Froala не удается загрузить Ajax textarea после нескольких раз с использованием инициализации и уничтожения - PullRequest
Новая
       15

Froala не удается загрузить Ajax textarea после нескольких раз с использованием инициализации и уничтожения

1 голос
/ 12 апреля 2019

Чтобы обновить некоторые данные блога, нажатие кнопки «РЕДАКТИРОВАТЬ» инициирует вызов Ajax, который загружает текстовое поле для Froala и инициализирует Froala в той же процедуре. Это показывает правильно. Я нажимаю кнопку «Отправить», которая является еще одной процедурой, которая уничтожает экземпляр Froala и очищает текстовую область, чтобы начать заново в другом блоге.

Кажется, что это работает в течение нескольких циклов (1,2 или 3 - не согласовано) редактирования / отправки, затем происходит сбой, и текстовая область больше не отображается как интерфейс Froala.

Я действительно накапливаю ошибки Javascript, но мне трудно понять и отследить их источник, так как большинство указывает на проблемы Jquery. Я подозреваю, что это ключ, но, возможно, кто-то может указать на что-то очевидное, когда я изо всех сил пытаюсь понять эти ошибки. Я выложу несколько из них в конце. 

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

Ожидая, что инициализация и уничтожение Froala должны были выполнить свою задачу даже при загрузке новых <textarea> с каждый раз.

ОШИБКИ JAVASCRIPT: 

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)

... Есть еще ошибки, но не уверен, насколько они будут полезны для публикации здесь.

Я должен добавить, что Фроала приводит простой пример инициализации и уничтожения здесь .

1 Ответ

0 голосов
/ 12 апреля 2019

Код выше работает нормально. Проблема заключалась в конфликте с двойной загрузкой заголовочного файла, содержащего несколько файлов javascript (jquery, tagit, bootstrap и т. Д.), Что приводило к тому, что накопление ошибок в конечном итоге вызывало странное поведение. После исправления этой проблемы, функция запуска / уничтожения Froala отлично работала!

...