0

I have used this tutorial to implement ajax page transitions on my website. After looking in to some issues, I found that on most forum post people suggest to "use" admin-ajax.php.

I looked into that but I'm afraid I don't really understand how it works.

Here's my current page-transition.js, which is starting to work pretty good. What would change (not necesseraly in the code, but more in the way it works) if I were to use admin-ajax.php, and is it really "mandatory" ?

jQuery(document).ready(function (event) {

    // get rooturl via localize script
    var rootUrl = aws_data.rootUrl; 
    var isAnimating = false, 
        newLocation = '', 
        firstLoad = false;

    // Internal Helper
    $.expr[':'].internal = function(obj, index, meta, stack){
        // Prepare
        var
            $this = $(obj),
            urlinternal = $this.attr('href')||'',
            isInternalLink;

        // Check link
        isInternalLink = urlinternal.substring(0,rootUrl.length) === rootUrl || urlinternal.indexOf(':') === -1;

        // Ignore or Keep
        return isInternalLink;
    };



    //trigger smooth transition from the actual page to the new one on relevant links
    $('main').on('click', 'a[href]:internal:not(.no-ajaxy,.love-button,[href^="#"],[href="#"],[href*="#respond"],[href*="wp-login"],[href*="wp-admin"])', function (event) { 
        event.preventDefault();
        //detect which page has been selected
        var newPage = $(this).attr('href');
        //if the page is not already being animated - trigger animation
        if (!isAnimating) changePage(newPage, true);
        firstLoad = true;
    });
    //detect the 'popstate' event - e.g. user clicking the back button
    $(window).on('popstate', function (e) {
        if (firstLoad) {
            /*
            Safari emits a popstate event on page load - check if firstLoad is true before animating
            if it's false - the page has just been loaded 
            */
            var newPageArray = location.pathname.split('/'), //this is the url of the page to be loaded 
                //newPage = newPageArray[newPageArray.length - 1];
                newPage = window.location.href;
            if (!isAnimating && newLocation != newPage) changePage(newPage, false);
        }
        firstLoad = true;
    });

    function changePage(url, bool) {
        isAnimating = true;
        // trigger page animation
        $('body').addClass('page-is-changing');
        $('.cd-loading-bar').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function () {
            loadNewContent(url, bool);
            newLocation = url;
            $('.cd-loading-bar').off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend');
        });
        //if browser doesn't support CSS transitions
        if (!transitionsSupported()) {
            loadNewContent(url, bool);
            newLocation = url;
        }
    }

    function loadNewContent(url, bool) {

        url = ('' === url) ? rootUrl : url; 
        //var newSection = 'cd-' + url.replace(rootUrl, ""); 
        var section = $('<div class="cd-main-content"></div>');

        $.ajax({url: url, 
            success: function(data){
                data = data.replace("<body", "<container").replace("body>", "container>");
                var classes = $(data).filter("container").attr("class"); 
                $("body").attr("class", classes + " page-is-changing"); 
            } 
        });

        section.load(url + ' .cd-main-content > *', function (response, status, xhr) {


            // load new content and replace <main> content with the new one
            $('main').html(section);
            //if browser doesn't support CSS transitions - dont wait for the end of transitions
            var delay = 1200; 

            //function to execute after dom is loaded
            $(document).foundation();
            makeFooterSticky();
            window.scrollTo(0, 0);
            $(".ajax-load-more-wrap").ajaxloadmore();
            //ga('send', 'pageview', window.location.pathname);

            setTimeout(function () {
                //wait for the end of the transition on the loading bar before revealing the new content
                $('body').removeClass('page-is-changing');
                $('.cd-loading-bar').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function () {
                    isAnimating = false;
                    $('.cd-loading-bar').off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend');
                });
                if (!transitionsSupported()) isAnimating = false;
            }, delay);
            if (url != window.location && bool) {
                //add the new page to the window.history
                //if the new page was triggered by a 'popstate' event, don't add it
                window.history.pushState({
                    path: url
                }, '', url);
            }
        });

    }

    function transitionsSupported() {
        return $('html').hasClass('csstransitions');
    }
});
2

You are mixing things up a bit here. What you are currently doing is adding an optional layer on top of your website. For users with JavaScript you make the page load look different, as you use custom events/effects, instead of relying on the browser.

admin-ajax.php is relevant, when you want to access specific methods via AJAX. As described in the codex, you can create custom functionality with this.

To sum it up:

  • Your page transition script is an optional addon on top of WordPress. The site will properly function without it
  • When writing a plugin and you want to do AJAX calls, use either admin-ajax.php or the REST endpoints. If those are removed, the plugin will stop functioning as expected.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.