在获取内容之前，AJAX重新加载页面

Question

I am using FullPage.js plugin, i am trying to make navigation between pages with AJAX.

When i am using .load(); i am catching page i need, but, as i see now i need to reload fullpage.js, because loaded page isnt active, script doesnt work with it.

Here is my code:

$('.click a').click(function(event) {
            event.preventDefault();

            $.ajax(this.href, {

                cache: false,
                success: function(data) {
                    $('#fullpage').html($(data).find('#fullpage > *'));

                    location.search = "reloaded=1";
                    console.log('The page has been successfully loaded');
                },
                error: function() {
                    console.log('An error occurred');
                }
            });
        });

How can i refresh plugin, or can i load page before i get its content with AJAX?

Maybe i can load page with AJAX already been loaded?

Answer 1

If you are creating sections or slides on the fly, then you would need to destroy and initialize fullPage.js again. To do so, you would need to use the destroy('all') function of fullPage.js and then initialize it again.

Something like:

//initializing fullpage.js for the 1st time.
initFullpage();

function myFunction() {
    $('.click a').click(function (event) {
        event.preventDefault();

        $.ajax(this.href, {

            cache: false,
            success: function (data) {
                $('#fullpage').html($(data).find('#fullpage > *'));

                location.search = "reloaded=1";
                console.log('The page has been successfully loaded');

                //destroying fullpage.js completely
                $.fn.fullpage.destroy('all');

                //initializing it again so it can detect new sections.
                initFullpage();
            },
            error: function () {
                console.log('An error occurred');
            }
        });
    });
}

function initFullpage(){
     $('#fullpage').fullpage();
}