Turbolinks: JavaScript срабатывает до полной загрузки DOM - PullRequest
Новая
       57

Turbolinks: JavaScript срабатывает до полной загрузки DOM

0 голосов
/ 18 апреля 2020

В настоящее время я работаю над приложением Rails 6, используя JavaScript. У меня есть файл javascript/packs/posts.js, который, кажется, запускается до завершения загрузки DOM. Я безуспешно попробовал следующее: 

document.addEventListener('readystatechange', event => {
 if (event.target.readyState === "complete") {
} })

А также добавив document.addEventListener('turbolinks:load', event => { //code here })

Однако это не работает, когда я перехожу на сайт и получаю сообщение об ошибке.

TypeError: profileAvatarBlock имеет значение null

Не уверен, что это может быть. 

document.addEventListener('turbolinks:load', event => {
//  if (event.target.readyState === "complete") { 
  const fileUploadElement = document.getElementById('file-upload');
  console.log(fileUploadElement)

  if(fileUploadElement) {
    fileUploadElement.addEventListener('change', function(){
      const fileName = document.getElementById("post_image").files[0].name
      const fileNameElement = document.getElementById('file-name');

      fileNameElement.innerText = `${fileName}`
    })
  }

/**
 * Display the image in the file input when added to the form.
 * Replace avatar with image selected.
 */
  let profileAvatarBlock = document.getElementById('profile-avatar');

  function showImage(input) {
    if (input.files && input.files[0]) {
      var reader = new FileReader();

      reader.onload = function (e) {
        let avatarPreview = document.getElementById('profile-avatar-preview');
        let imageEl = avatarPreview.children[1]

        imageEl.setAttribute("src", e.target.result);

        ['width', 'height'].forEach(attribute => { 
          imageEl.removeAttribute(attribute)
        });

      };

      reader.readAsDataURL(input.files[0]);
    }
  }

  profileAvatarBlock.addEventListener('change', function() {
      showImage(this);
  })
//  }
});

Почему let profileAvatarBlock = document.getElementById('profile-avatar'); возвращает нулевое значение, хотя элементы существовать? 

    <div class="rounded-full h-24 w-24 flex items-center justify-center upload-btn-wrapper" id="profile-avatar-preview">
      <%= f.file_field :avatar, as: :file, id: "profile-avatar" %>
      <%= cl_image_tag "#{ UsersHelper::AVATAR_ADD_ICON }", width: '50', height: '50', class: 'hover:bg-transparent' %>
    </div>

В файле console.log из следующей строки также возвращается null в строке console.log(fileUploadElement)

enter image description here

Что я могу сделать в этом случае? Это проблема JavaScript или проблема с Turbolinks?

1 Ответ

1 голос
/ 18 апреля 2020

Трудно точно определить, в чем проблема, не имея возможности взаимодействовать с приложением, и посмотреть, существует ли этот элемент на самом деле. Вот хороший способ попытаться отладить эту проблему синхронизации, как бы то ни было. Попробуйте использовать MutationObserver (https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) с целевым узлом как document.

. Что-то вроде следующего должно помочь в отладке этого 

const m = new MutationObserver((mutations, obs) => {
	for (const mut of mutations) {
  	if (mut.type === "childList" && mut.target.id === 'profile-avatar')
    	console.log(mut);
  }
});

m.observe(document, { childList: true, subtree: true });
...