Início / coding / Perguntas / 79591515
Accepted
mathieu lefrancois
Asked: 2025-04-25 06:00:52 +0800 CST

Carregamento e execução dinâmicos de arquivos JavaScript

  • 772

aqui está a execução do meu javascript:

ee_btn.addEventListener('click', () => {
        //Ajax GET request to get data form and rendering it
        RequestEEFormData(container, bounds).then(()=>{
            // Loading a javascript file. it get loaded.
            // I can call function from this file then.
            loadScript('/static/js/locationConverterWidget.js');
        });
        
    });

function loadScript(url) {
    const script = document.createElement('script');
    script.src = url;
    script.async=false;
    script.onload = function(){
        //trying to querySelector newly added content
        console.log(document.querySelector('#id_item);
    }
    document.head.appendChild(script);
  }

em caso:


async function RequestEEFormData(container, bounds) {
    $.ajax({
        type: 'GET',
        url: 'someURL/',

        success: function (response) {
           container.innerHTML=response;
           someFunction(bounds)
        },
        error: function(response){
          console.log(response);
        },
        cache:false,
        contentType: "application/json",
        processData: false
     });
}

o console.log retorna um Nodelist vazio.

Se eu chamar o mesmo consol.log de um botão 1 segundo depois, funciona.

Claramente há algo com o async que não entendo.

Alguém pode me explicar o que estou fazendo errado?

o objetivo é que eu queira que o arquivo javascript recém-baixado consulte o conteúdo recém-adicionado do querySelector, mas ele parece ser executado antes que o HTML seja completamente renderizado.

obrigado

javascript

1 respostas

  1. Best Answer

    requestEEFormData()não está retornando a promessa retornada por $.ajax(), então o chamador .then()não está esperando a solicitação AJAX terminar.

    Como $.ajax()retorna uma promessa explicitamente, você não precisa usar async. Mas precisa retornar o valor dela.

    function RequestEEFormData(container, bounds) {
  return $.ajax({
    type: 'GET',
    url: 'someURL/',

    success: function(response) {
      container.innerHTML = response;
      someFunction(bounds)
    },
    error: function(response) {
      console.log(response);
    },
    cache: false,
    dataType: "json",
  });
}

    Além disso, a contentTypeopção é irrelevante para GETrequisições, já que elas não enviam nenhum conteúdo. Para especificar que o servidor retorna JSON, use dataType: "json". Mas me pergunto se isso realmente acontece, já que você está atribuindo a resposta a container.innerHTML, o que implica que ela retorna HTML. Se for esse o caso, você deve usar dataType: "html".

    Da mesma forma, processData: falseé desnecessário porque não há dados para processar.

    • 1

relate perguntas