Pjax.switches not working?

[dreerr]

I installed Pjax with bower and tried to get your example with switches: { ".js-Pjax": Pjax.switches.sideBySide } working but it fails in the browser with console error undefined is not an object (evaluating 'Pjax.switches.sideBySide')

[MoOx]

It supposed to be fixed in 0.1.4. What version are you using?

[dreerr]

Latest version pjax#0.2.3, tried with bower and also with npm. And as I see it Pjax.switches.sideBySide should not be undefined, right?

[MoOx]

Yeah. It's defined here https://github.com/MoOx/pjax/blob/b96b0f41a7d7887929e71539c3022481f945174a/lib/switches.js#L18

[MoOx]

I think I changed the API with 0.2.x. Can you try instead to use require("pjax/lib/switches.js").sideBySide ?

[Bezmundo]

I'm currently using version 0.2.4 and getting the same error when trying to use sideBySide.

I tried changing to the code to your above recommendation but still no luck. Here's the standard pjax call from your demo code I am testing with:

` document.addEventListener("DOMContentLoaded", function () { var pjax = new Pjax({

                selectors: [".js-Pjax"],
                switches: {
                    ".js-Pjax": Pjax.switches.sideBySide /* NOTE THIS IS LINE 165 IN CODE */
                },
                switchesOptions: {
                    ".js-Pjax": {
                        classNames: {
                            // class added on the element that will be removed
                            remove: "Animated Animated--reverse Animate--fast Animate--noDelay",
                            // class added on the element that will be added
                            add: "Animated",
                            // class added on the element when it go backward
                            backward: "Animate--slideInRight",
                            // class added on the element when it go forward (used for new page too)
                            forward: "Animate--slideInLeft"
                        },
                        callbacks: {
                            // to make a nice transition with 2 pages as the same time
                            // we are playing with absolute positioning for element we are removing
                            // & we need live metrics to have something great
                            // see associated CSS below
                            removeElement: function (el) {
                                el.style.marginLeft = "-" + (el.getBoundingClientRect().width / 2) + "px"
                            }
                        }
                    }
                }
            })
            console.log("Pjax initialized.", pjax)
        })`

Which results in the following console.log error: (index):165 Uncaught TypeError: Cannot read property 'sideBySide' of undefined

[dalebaldwin]

Fixed in the readme.md example #74 Try that it should work now.

[MoOx]

Thanks.

[wongsynee]

After I implemented with require("pjax/lib/switches.js").sideBySide I have an error on console that says Uncaught ReferenceError: require is not defined

[dalebaldwin]

@wongsynee are you using webpack/browserify?

[wongsynee]

Thank you for the prompt reply. However, I'm not too familiar with either, do I browserify my custom js file or the entire pjax folder that I have downloaded with bower?

[dalebaldwin]

You will want to bundle up all your JS into one file, see below for example (old project)

const Pjax = require('pjax');
const iFrameResize = require('iframe-resizer/js/iframeResizer.min.js');
const IdealImageSlider = require('ideal-image-slider');

function whenContainerReady() {

    var productSlider = new IdealImageSlider.Slider({
        selector: '#product-slider',
        height: 400, // Required but can be set by CSS
        interval: 4000,
        effect: 'fade'
    });

    productSlider.start();
    if(document.getElementById("tour-product-page-book")){
        iFrameResize();
    }
}

whenContainerReady()

new Pjax({
    elements: "a",
    selectors: ["title", "meta", "#main"],
    analytics: true,
    cacheBust: false,
    switches:{
        "#main": require("pjax/lib/switches.js").sideBySide
    },
    switchesOptions:{
        "#main":{
            classNames:{
                remove: "Animated Animated--reverse Animate--fast Animate--noDelay",
                add: "Animated",
                backward: "Animate--slideInRight",
                forward: "Animate--slideInLeft"
            },
            callbacks:{
                removeElement: function(el) {
                el.style.top = "-" + (document.body.scrollTop) + "px"
                }
            }
        }
    }
})

document.addEventListener("pjax:success", whenContainerReady)

`

[wongsynee]

Got it, thank you!