Открытие html в div с помощью XMLHttpRequest вызывает ошибку синхронизации

Я пытаюсь загрузить htm в div в другом htm, но я продолжаю получать ошибку ниже:

Синхронный XMLHttpRequest в главном потоке не рекомендуется из-за его пагубного влияния на работу конечного пользователя. Для получения дополнительной помощи проверьте https://xhr.spec.whatwg.org/ .

Вот мой сценарий:

Первый.html (html)

<div id="selectedPage"></div>

Первый.html (скрипт)

<script>
function loadHTML2Div(htmlPage){
    var xmlHttp = new XMLHttpRequest();

    xmlHttp.onreadystatechange = function() {
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
        {
            $("#selectedPage").html(xmlHttp.responseText);           
        }
    };

    xmlHttp.open("GET", htmlPage, true); // true for asynchronous
    xmlHttp.send(null);                
}


$(document).ready(function(){               
    loadHTML2Div("Second.htm");            
});
</script>

Второй.htm (html)

<body>
    <div class="container">
      <div class="row">
        <div class="col-md-12">
            <div class='jumbotron'>
                <span>Verifique as datas disponíveis e agende seu evento.</span>
            </div>
            <div data-provide="calendar" id="calendar"></div> 
        </div>
      </div>
    </div>


    <div class="modal fade" id="preReservaModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                  <h4 class="modal-title" id="modaldate"></h4>
                </div>
                <div class="modal-body ">
                    <div class="form-group">
                        <label for="exampleInputNome">Nome Completo</label>
                        <input class="form-control" id="exampleInputNome" placeholder="Digite seu nome completo" type="nome">
                        <br/>
                        <label for="exampleInputEmail1">Email</label>
                        <input class="form-control" id="exampleInputEmail1" placeholder="Digite seu email" type="email">
                        <br/>
                        <label for="exampleInputTelefone">Telefone para contato</label>
                        <input class="form-control" id="exampleInputTelefone" placeholder="Digite seu telefone para contato" type="telefone">
                        <br/>
                        <label for="exampleInputPlano">Pacote</label>
                        <select class="input-large form-control">
                            <option value="" selected="selected">Selecione um pacote</option>
                            <option value="DI" >Diamante</option>
                            <option value="ES">Esmeralda</option>
                            <option value="RU">Rubi</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                  <a href="#" data-dismiss="modal" class="btn">Fechar</a>
                  <a href="#" class="btn btn-primary">Confirmar</a>
                </div>
            </div>
        </div>
    </div>

    <script src='bootstrap/js/bootstrap-combobox.js'></script>
    <script src="bootstrap/js/bootstrap-year-calendar.js"></script>
</body>

У меня также есть navbar-nav от bootstrap поверх моего первого.htm для навигации, и у меня также есть третий.htm и четвертое.htm, который можно открыть при нажатии на навигационную панель. Я использую loadHTML2Div для переключения между содержимым . Я не знаю, является ли это лучшим подходом.

Поскольку я искал эту ошибку Synchronous XMLHttpRequest, я бы исправил ее с помощью ajax async call. Я пытался использовать xmlHttpRequest, как упоминалось выше, и я также пытался использовать .ajax асинхронный

function loadHTML2Div(htmlPage){
    $.ajax({
        async: true,
        type: "GET",
        url: htmlPage,
        success: function(data){
            $("#selectedPage").html(data);
        }
    });               
}

Но я получил ту же ошибку.

Пожалуйста, посоветуйте мне, как избежать этой ошибки синхронизации. Как вы можете видеть, я пробовал разные способы, прежде чем развивать этот вопрос.
Если вам нужна дополнительная информация, пожалуйста, дайте мне знать.

Отредактировано
Я продолжал тестирование и исправил эту ошибку в некоторых htmls. Проблема заключалась в том, что я добавлял Jquery и bootstrap js как в первом, так и в третьем html, например.
Я удалил объявление скрипта из третьего.htm например и оставил только объявление в’ верхнем ‘ html (First.формат HTML.) Таким образом, каким-то образом объявление его на обоих файлах вызывало у меня ошибку.
К сожалению, у меня до сих пор проблемы со второй.htm который я скопировал к этому вопросу. Этот htm имеет календарь и bootstrap combobox. Если я удалю их из второго.htm и запишите их в первую.htm, это не работает.

    <script src='bootstrap/js/bootstrap-combobox.js'></script>
    <script src="bootstrap/js/bootstrap-year-calendar.js"></script>

У меня также есть несколько сценариев для clickDay и setMinDate во втором.htm, как показано ниже, которые терпят неудачу, если я удаляю объявление скриптов и перемещаю его в верхний первый.htm.

$('#calendar').data('calendar').setMinDate(todayDt);

Таким образом, мне кажется, что мой недостаток знаний ведет меня к этой проблеме. Вероятно, это очень просто решить, если кто-то может помочь мне, я буду признателен.

2 ответа

  1. установите атрибут The ajax asyncв значение false

    $.ajax({
        async: false,
        type: "GET",
        url: htmlPage,
        success: function(data){
            $("#selectedPage").html(data);
        }
    });    
    
  2. Наконец-то я понял, в чем проблема.
    Я переместил объявление скриптов из второго.htm к первому.htm

    <script src='bootstrap/js/bootstrap-combobox.js'></script>
    <script src="bootstrap/js/bootstrap-year-calendar.js"></script>
    

    Затем я изменил html с

    <div data-provide="calendar" id="calendar"></div>
    

    к

    <div id="calendar"></div>
    

    и создал календарь в функции ready

    <script>
        $( document ).ready(function() {
                $('#calendar').calendar();
        });
    </script>
    

    Поскольку я новичок в веб-разработке, я знаю, что это все еще не лучший способ структурировать навигацию по веб-сайту с помощью navbar из bootstrap. А сейчас я уйду отсюда.
    Моя цель состоит в том, чтобы мой первый htm с navbar и содержание из каждого элемента navbar в различных htms (как у меня сейчас), но я хочу, чтобы url-адрес измениться, как я щелкаю каждый элемент:

    www.mywebsite.com/First.htm
    www.mywebsite.com/Second.htm
    www.mywebsite.com/Third.htm
    

    И сейчас у меня есть только

    www.mywebsite.com/First.htm
    

    Где все мои скрипты включены в первый.htm. Это значит, что я загружаю календарь.js, даже если я не открываю страницу календари.

    Ну, я надеюсь, что я помогу кому-то с моим вопросом/ответом в будущем, даже если это немного запутанно. Обещаю, в следующий раз у меня будет больше знаний.