Как начать заново после смены страницы ajax - PullRequest
Новая
       24

Как начать заново после смены страницы ajax

0 голосов
/ 23 октября 2019

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

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

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

<body class="bodyHome">
    <div class="contenitore">

        <section class="contenuto">

            <header class="headerHome">
                <h2 class="logoInit">MN</h2>
                <h1 class="logoDesc">MyName<br> Web-Designer</h1>
            </header>
            <nav class="menu">
                    <ul class="menuul">
                        <li class="menuitm"><a class="menuopt link-ajax" href="index.html">home</a></li>
                        <li class="menuitm"><a class="menuopt link-ajax anchor" href="about.html">about</a></li>
                        <li class="menuitm"><a class="menuopt link-ajax" href="#">jobs</a></li>
                        <li class="menuitm"><a class="menuopt link-ajax" href="#">contacts</a></li>
                    </ul>
            </nav>
        </section>

    </div>

        <footer class="foothome">
*irrelevant code*
        </footer>


*links to GSAP and then to my js file*
    </body>

Вот часть JS 

function ingrPage() {

    var linkAjax = document.getElementsByClassName("link-ajax");

    events();


    function events() {

        for (let i = 0; i < linkAjax.length; i++) {

            linkAjax[i].addEventListener("click", function (e) {
                e.preventDefault();
                window.console.log("click link --->", linkAjax[i].getAttribute('href'));

                getPage(linkAjax[i].getAttribute('href'));

                return false;

            });

        }
    }

    function getPage(link = null) {
        if (link !== null) {
            fetch(link)
                .then(response => {
                    if (response.ok) {
                        return Promise.resolve(response);




                    } else {
                        return Promise.reject(new Error('Failed to load'));
                    }
                })
                .then(response => response.text()) // parse response as JSON
                .then(data => {
                    // success
                    history.pushState("", "", link);
                    var parser = new DOMParser();
                    var doc = parser.parseFromString(data, "text/html");
                    let newTarget = doc.getElementsByClassName('contenitore');
                    let oldTarget = document.getElementsByClassName('contenitore');
                    newTarget = newTarget[0];
                    oldTarget = oldTarget[0];
                    window.console.log('ok data ---> ', newTarget);
                    TweenLite.to(oldTarget.getElementsByClassName('contenuto')[0], 0.5, {
                         autoAlpha: 0
                     });
                    TweenLite.set(newTarget.getElementsByClassName('contenuto')[0], {
                        autoAlpha: 0
                    });
                    setTimeout(() => {
                        oldTarget.append(newTarget.getElementsByClassName('contenuto')[0]);
                        console.log("cambio eseguito");
                        TweenLite.to(oldTarget.getElementsByClassName('contenuto')[1], 0.5, {
                            autoAlpha: 1
                        });

                        oldTarget.getElementsByClassName('contenuto')[0].remove(); 
                    }, 550)
                })

                .catch(function (error) {
                    console.log(`Error: ${error.message}`);
                });


        }
    }}

Как я должен заново инициализировать документ после изменения страницы ajax, чтобы он работал правильно? Спасибо!

...