iLoveElysia/pjax
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 9 Wiki Activity

Pjax.switches not working? #68

New Issue
Closed
opened 2016-04-24 13:36:47 -05:00 by dreerr · 12 comments
dreerr commented 2016-04-24 13:36:47 -05:00 (Migrated from github.com)
Copy link
Copy source

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')

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 commented 2016-05-03 02:08:47 -05:00 (Migrated from github.com)
Copy link
Copy source

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

It supposed to be fixed in 0.1.4. What version are you using?
dreerr commented 2016-05-03 02:12:27 -05:00 (Migrated from github.com)
Copy link
Copy source

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?

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 commented 2016-05-03 02:22:12 -05:00 (Migrated from github.com)
Copy link
Copy source

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

Yeah. It's defined here https://github.com/MoOx/pjax/blob/b96b0f41a7d7887929e71539c3022481f945174a/lib/switches.js#L18
MoOx commented 2016-05-03 02:31:54 -05:00 (Migrated from github.com)
Copy link
Copy source

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

I think I changed the API with 0.2.x. Can you try instead to use `require("pjax/lib/switches.js").sideBySide` ?
Bezmundo commented 2016-07-24 06:14:12 -05:00 (Migrated from github.com)
Copy link
Copy source

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

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
👍 1 😕 1
dalebaldwin commented 2016-09-27 02:14:28 -05:00 (Migrated from github.com)
Copy link
Copy source

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

Fixed in the readme.md example #74 Try that it should work now.
MoOx commented 2016-09-27 02:21:50 -05:00 (Migrated from github.com)
Copy link
Copy source

Thanks.

Thanks.
wongsynee commented 2017-05-25 19:20:00 -05:00 (Migrated from github.com)
Copy link
Copy source

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

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 commented 2017-05-25 19:22:52 -05:00 (Migrated from github.com)
Copy link
Copy source

@wongsynee are you using webpack/browserify?

@wongsynee are you using webpack/browserify?
wongsynee commented 2017-05-25 19:44:46 -05:00 (Migrated from github.com)
Copy link
Copy source

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?

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 commented 2017-05-25 19:46:42 -05:00 (Migrated from github.com)
Copy link
Copy source

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)

`

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 commented 2017-05-25 20:00:29 -05:00 (Migrated from github.com)
Copy link
Copy source

Got it, thank you!

Got it, thank you!
Sign in to join this conversation.
No Branch/Tag Specified
Labels
Clear labels
bug
dependencies
Pull requests that update a dependency file
 duplicate
enhancement
invalid
question
wontfix
No labels bug
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
iLoveElysia
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: iLoveElysia/pjax#68