Глубокая связь для динамических модов начальной загрузки - PullRequest
Новая
       7

Глубокая связь для динамических модов начальной загрузки

0 голосов
/ 06 декабря 2018

ОК. Итак, я смотрю на два метода здесь и пытаюсь выяснить, как объединить их в один.

Во-первых, у нас есть модалы, которые динамически заполняются с помощью атрибутов данных.У меня есть список, который загружается из нашей серверной базы данных и заполняет атрибут данных releaseid идентификационным номером.Затем, когда модальный запускается, он берет этот идентификационный номер, запускает ajax-вызов к действию Java, которое захватывает контент и заполняет тело модального.

Когда модальный закрыт, заголовок и телоосвобождаются, чтобы освободить место для следующего модала.

HTML: 

<c:forEach var="pRelease" items="${prList}">
<li><a href="#" data-toggle="modal" data-target="#prDetailModal" data-releaseid="${pRelease.releaseId}">${pRelease.heading}</a></li>
</c:forEach>

<div class="modal fade" id="prDetailModal" tabindex="-1" role="dialog" aria-labelledby="prDetailModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h3 class="modal-title text-center"></h3>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">

          </div>
        </div>
      </div>
    </div>

JS: 

$('#prDetailModal').on('show.bs.modal', function (event) {
                var button = $(event.relatedTarget);
                var releaseId = button.data('releaseid');
                var modal = $(this);

                $.ajax({
                    url: "viewpressreleasedetail.action?releaseid=" + releaseId,
                    dataType: "json",
                    success: function(data) {
                        modal.find('.modal-title').text(data.heading);
                        if (data.sub_heading){
                            var subHeading = data.sub_heading;
                            modal.find('.modal-body').append("<h5 class='text-center'>"+subHeading+"</h5>");
                        }
                        if (data.cover_image){
                            var coverImage = "https://s3.amazonaws.com/halleonard-coverimages/"+data.cover_image;
                            modal.find('.modal-body').append("<p class='text-center'><img class='img-fluid' src="+coverImage+"></p>");
                        }
                        var content = data.content;
                        modal.find('.modal-body').append(content);
                    }
                }); 
            });

            $('#prDetailModal').on('hidden.bs.modal', function (event) {
                var modal = $(this);
                modal.find('.modal-title').text();
                modal.find('.modal-body').empty();
            });

Во-вторых, я хотел бы использовать скрипт с глубокими ссылками, чтобы при запуске модального окна он изменял URL-адрес в окне браузера и добавлял хэш PLUS, когда пользователь возвращается на страницу с хешированным URL-адресом, модальный автоматическизагружается с правильным динамическим содержимым.

Пример JS (я публикую пример, который я использую для получения глубоких ссылок в содержимом с вкладками начальной загрузки) : 

let url = location.href.replace(/\/$/, "");

            if (location.hash) {
                const hash = url.split("#");
                $('#eventsTab a[href="#'+hash[1]+'"]').tab("show");
                url = location.href.replace(/\/#/, "#");
                history.replaceState(null, null, url);
                setTimeout(() => {
                    $(window).scrollTop(0);
                    $("#eventsTabContent").addClass("loaded");
                }, 400);
            } else {
                setTimeout(() => {
                    $("#eventsTabContent").addClass("loaded");
                    $("#conventions-tab").addClass("active");
                }, 400);
            }

            $('a[data-toggle="tab"]').on("click", function() {
                let newUrl;
                const hash = $(this).attr("href");
                if(hash == "#conventions") {
                    newUrl = url.split("#")[0];
                } else {
                    newUrl = url.split("#")[0] + hash;
                }
                history.replaceState(null, null, newUrl);
            });

Кто-нибудь знает, как, возможно, объединить эти два, чтобы он работал как нужно?

...