Показать товар перед загрузкой AJAX ответить

Question

Я пытаюсь показать элемент, если пользователь нажимает на мою кнопку, которая связана с моим AJAX ответом. Div должен отображаться после нажатия кнопки и скрываться после загрузки всей страницы.

My AJAX:

document.getElementById('mainContent').style.display = 'none';
document.getElementById('productDetail').style.display = 'block';
//ajax
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("response").innerHTML =
    this.responseText;
  }
};
xhttp.open("GET", "product/" + id + "/", true);
xhttp.send();

Я пытаюсь это: (Я добавил показ Div, если код загружен, и я хотел скрыть его после загрузки)

document.getElementById('divForShow').style.display = 'block';
document.getElementById('mainContent').style.display = 'none';
document.getElementById('productDetail').style.display = 'block';
//ajax
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("response").innerHTML =
    this.responseText;
  }
};
xhttp.open("GET", "product/" + id + "/", true);
xhttp.send();
document.getElementById('divForShow').style.display = 'none';

Я также пытался (Код скрытия, который я хотел связать с событием onload в последнем div из ответа ajax)

document.getElementById('divForShow').style.display = 'block';
document.getElementById('mainContent').style.display = 'none';
document.getElementById('productDetail').style.display = 'block';
//ajax
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("response").innerHTML =
    this.responseText;
  }
};
xhttp.open("GET", "product/" + id + "/", true);
xhttp.send();

* и добавлена ​​функция загрузки на конце моего div в html AJAX response

</div id="myLastDivFromAjaxRespone" onload="hiddenDiv()">

document.getElementById('divForShow').style.display="none"; //hiddenDiv function

Как показать div после нажатия кнопки и скрыть, если весь AJAX Ответ был загружен.

Answer 1

Вы можете просто разделить код на 2 функции. Затем, по нажатию кнопки, вызывает before_ ajax (), затем Пример:

function before_ajax(){
document.getElementById(".element").innerHTML = "<b>Loading...</b>";
}

function do_ajax(){
document.getElementById('mainContent').style.display = 'none';
document.getElementById('productDetail').style.display = 'block';
//ajax
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("response").innerHTML =
    this.responseText;
  }
};
xhttp.open("GET", "product/" + id + "/", true);
xhttp.send();
}
function reload_page(){
window.location.reload();
}