Скрыть элемент div, используя AJAX - PullRequest
Новая
       7

Скрыть элемент div, используя AJAX

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

Я загружаю страницы, используя AJAX. На каждой веб-странице у меня есть 2 общих div - заголовок div и контент div. Теперь, когда я перехожу с одной страницы на другую, а не загружаю содержимое следующей страницы в текущую страницу, используя

$("#content").load(URL+" #content");

Теперь, когда я использую AJAX для загружать страницы, поэтому я меняю URL и манипулирую историей с помощью History API. Так что теперь, когда кто-то нажимает кнопку «Назад» в браузере, возникает проблема: оба заголовка div обеих страниц отображаются во время загрузки, но исчезают после завершения загрузки. Кто-нибудь может мне помочь, как скрыть заголовок div страницы загрузки.

Вот код, который я использую для обработки кнопки возврата браузера 

  function swap(href) {

   var x = document.getElementById("myTopnav");
   x.className = "topnav";
   var req = new XMLHttpRequest();
   req.open("GET",
       "http://localhost/" +
         href.split("/").pop(),
       false);
   req.send(null);

   if (req.status == 200) {
      document.getElementById("content").innerHTML = req.responseText;
      $("#content").load(" #content");
      return true;
   }

      return false;
  }

  window.addEventListener("popstate", function(e) {
     swap(location.pathname);
     e.preventDefault();
  });

1 Ответ

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

Я думаю, это должно работать. Он переносит ответ в DIV, если #content является самым внешним элементом, так как .find() только ищет содержимое. 

function swap(href) {
  $("#myTopNav").addClass("topnav");
  var url = href.split('/').pop();
  $.get('http://localhost/' + url, function(response) {
      var fragment = $("<div>", {
        html: response
      });
      $("#content").replaceWith(fragment.find("#content"));
    }
  });
}

window.addEventListener("popstate", function(e) {
  swap(location.pathname);
  e.preventDefault();
});
...