Данные не загружаются после преобразования из одной страницы в многостраничное приложение

Question

Я новичок в веб-интерфейсе и веб-разработке и столкнулся с блокировщиком.Первоначально я разработал свой веб-сайт как одностраничное приложение, после некоторых отзывов я решил преобразовать его в многостраничное приложение.Все отлично работает как одна страница, но когда я загружаю тот же HTML, что и другая страница, данные из моих вызовов ajax и HTML, который я генерирую с помощью javascript, не отображаются.

Соответствующий код (пожалуйста,я знаю, если мне нужно предоставить больше).

после нажатия exp-button, сгенерированного этим методом:

let generateCards = function (data) {
    experiments = data;
    data.forEach(element => {
        let end = new Date(element.endDate);
        daysLeft = dateDiffInDays(today(), end);


        if (daysLeft <= 0) {
            daysLeft = "Experiment Ended";
        }

        if (daysLeft === 1) {
            daysLeft = "Ends Today";
        }

        let cardHtml = '<div class="card-container .col-md-4 .offset-md-4">' +
            '<div class="cardImg">' +
            '</div>' +
            '<div class="experiment">' +
            'EXPERIMENT' +
            '</div>' +
            '<div class="experiment-name">' +
            element.title +
            '</div>' +
            '<div class="experiment-description">' +
            element.shortDescription +
            '</div>' +
            '<div class="experiment-time-remaining">' +
            daysLeft + ' days left' +
            '</div>' +
            `<a class="exp-button"  data-experiment="${element.id}">` +
            '<div class="experiment-button">' +
            '<div class="button-text">' +
            'LEARN MORE' +
            '</div>' +
            '</div>' +
            '</a>' +
            '</div>';
        $('#cards-container').append(cardHtml);
    });
};

примечание Я также пробовал эту строку кода вместо метода ниже:

`<a class="exp-button" href="experiment.html" onclick=loadLearnMore(${element.id}) data-experiment="${element.id}">`

метод щелчка (внутри $(document).ready(function ()):

$(document).on('click', '.exp-button', function (event) {
    //event.preventDefault();
    id = $(this).attr("data-experiment");
    loadLearnMore(id);
    window.location.href= "/experiment.html";
});

Этот метод должен срабатывать, я сталкиваюсь с точками останова в некоторых попытках конфигурации, но никогдаотображаемые данные:

let loadLearnMore = function (id) {
    $.ajax({
        method: "POST",
        url: "http://localhost:55345/api/ExperimentParticipant",
        dataType: "json",
        contentType: "application/json",
        data: JSON.stringify(id),
        success: function (res) {
        },
        error: function (data, err) {
            console.log(err);
        }
    }).done(function (result) {
        $("#participants").html('');
        $("#participants").append(result);
        experiment = experiments.filter(e => e.id == id);
        $("#days-remain").html('');
        $("#days-remain").append(dateDiffInDays(today(), new Date(experiment[0].endDate)));
        $(".experiment-text-learn").html('');
        $(".experiment-text-learn").append(experiment[0].title);
        $(".about-text").html('');
        $(".about-text").append(experiment[0].longDescription);
        $(".duration-text").html('');
        $(".duration-text").append(longDate(new Date(experiment[0].startDate)) + ' - ' + longDate(new Date(experiment[0].endDate)));
        $('#join-button').attr("data-experiment", id);
        loadRequirements(id);
        loadUpdates(id);
        loadNextStaps(id);

    });
};

Другие методы, использованные в предыдущем методе:

let loadNextStaps = function (id) {
    $.ajax({
        method: "GET",
        url: "http://localhost:55345/api/join/" + id,
        dataType: "json",
        contentType: "application/json",
        success: function (res) { },
        error: function (data, err) {
            console.log(err);
        }
    }).done(function (result) {
        let steps = (JSON.parse(result));
        let content = '';
        steps.forEach(element => {
            var media;
            content += `<div>${element.number}.&nbsp;&nbsp;${element.step}</div>`;
            if (element.isApp === true) {
                media = element.mediaUrl.split(' ');
                if(media[0] != 'null'){
                    content += `<a href='${element.appleUrl}' target='_blank'><img src='${media[0]}' alt='app store logo'></img></a>`;
                }
                if(media[1] != 'null'){
                    content += `<a href='${element.androidUrl}' target='_blank'><img src='${media[1]}' alt='google play logo'></img></a>`;
                }
            }
        });
        $("#next").html('');
        $("#next").append(content);
    });
};

let loadUpdates = function (id) {
    $.ajax({
        method: "GET",
        url: "http://localhost:55345/api/updates/" + id,
        dataType: "json",
        contentType: "application/json",
        success: function (res) { },
        error: function (data, err) {
            console.log(err);
        }
    }).done(function (result) {
        let updates = (JSON.parse(result));
        let content = '';
        updates.forEach(element => {
            content += `<div class='update-time'>${timeSince(element.date)}</div>` + //time since
                `<div class='update-title'>${element.title}</div>` + //title
                "<div class='update-text-container col-md-8'>" +
                "<div class='update-text'>" +
                `${element.content}` + //update content
                "</div>" +
                "</div>";
        });
        $("#profile").html('');
        $("#profile").append(content);
    });
};

let loadRequirements = function (id) {
    $.ajax({
        method: "GET",
        url: "http://localhost:55345/api/requirements/" + id,
        dataType: "json",
        contentType: "application/json",
        success: function (res) { },
        error: function (data, err) {
            console.log(err);
        }
    }).done(function (result) {
        let requirements = (JSON.parse(result));
        $('.requiirement-list').html('');
        requirements.forEach(element => {
            $('.requiirement-list').append(`<li class="requiirement-item">${element.content}</li>`);
        });

    });
};

Answer 1

Проблема, которую я вижу в вашем коде:

При нажатии .exp-button функция loadLearnMore будет выполняться для текущей страницы (скажем, index.html), а затем сразу же после ее выполнения выпереходите на новую страницу (эксперимент.html), поэтому любые изменения, которые только что внесенный на страницу код javascript не будет отображать, как вы сейчас находитесь на новой странице.

Я полагаю, что когда .exp-buttonПри щелчке вы сначала переходите на новую страницу (например, experiment.html и передаете идентификатор в качестве параметра новой странице), а затем на этой странице вы выполняете запрос javascript / ajax.

Вот некоторые основныекод, показывающий, как он может работать (я знаю, что вы генерируете html динамически, и это тоже будет работать нормально, но я просто жестко запрограммировал его для демонстрации):

index.html (текущая страница)

<!DOCTYPE html>
<html>
<head>
<title>Index page</title>
<script src="jquery.min.js"></script>
<script>
$(document).ready(function(){

  $(document).on('click', '.exp-button', function (event) {
    //event.preventDefault();
    id = $(this).attr("data-experiment");
    //navigate to experiment.html passing the id as a parameter.
    window.location.href= "experiment.html?id=" + id;
  });

});
</script>

</head>
<body>
  <div id="cards-container">
    <a class="exp-button" data-experiment="1">learn more</a>
  </div>
</body>
</html>

эксперимент.html

<!DOCTYPE html>
<html>
<head>
<title>Experiment page</title>
<script src="jquery.min.js"></script>
<script>
//get the url parameters sent
var urlParams = new URLSearchParams(window.location.search);
//get the id parameter and store it in a global variable
var id = urlParams.get('id');
console.log(id);

$(document).ready(function(){
  //do ajax request with the id parameter. This could also be in a loadLearnMore function but Im keeping it basic for demonstration purposes.
   $.ajax({
        method: "POST",
        url: "http://localhost:55345/api/ExperimentParticipant",
        dataType: "json",
        contentType: "application/json",
        data: JSON.stringify(id),
        success: function (res) {
        },
        error: function (data, err) {
            console.log(err);
        }
    }).done(function (result) {
      //now that we have the data/result we can insert it to the elements of the current page that we are on as follows.
      $("#participants").html('');
      $("#participants").append(result);
    });
});
</script>
</head>
<body>
  <div id="participants"></div>

</body>
</html>

Answer 2

window.location.href= "/experiment.html";

удалить эту строку

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