moox / pjax Goto Github PK

Yeah it's needed.

Thanks for this great project!

I am attempting to implement a PJAX redirect with Pjax.prototype.loadUrl(). The actual code is

options = {
        elements: ['a', '.pjax'],
        selectors: ["#pjax"]
};
Pjax.prototype.loadUrl('/', options);

When I attempt to run call this, I get an error

TypeError: Cannot read property 'debug' of undefined
    at Object.Pjax.log (http://localhost:9000/bower_components/pjax/src/pjax.js:213:25)
    at Object.Pjax.loadUrl (http://localhost:9000/bower_components/pjax/src/pjax.js:408:12)
    at Scope.$scope.processForm (http://localhost:9000/scripts/controllers/getStartedController.js:11:22)
    at http://localhost:9000/bower_components/angular/angular.js:10567:21
    at http://localhost:9000/bower_components/angular/angular.js:18627:17
    at Scope.$eval (http://localhost:9000/bower_components/angular/angular.js:12412:28)
    at Scope.$apply (http://localhost:9000/bower_components/angular/angular.js:12510:23)
    at HTMLFormElement.<anonymous> (http://localhost:9000/bower_components/angular/angular.js:18626:21)
    at HTMLFormElement.jQuery.event.dispatch (http://localhost:9000/bower_components/jquery/dist/jquery.js:4409:9)
    at HTMLFormElement.elemData.handle (http://localhost:9000/bower_components/jquery/dist/jquery.js:4095:28) angular.js:9778
(anonymous function) angular.js:9778
(anonymous function) angular.js:7216
Scope.$apply angular.js:12512
(anonymous function) angular.js:18626
jQuery.event.dispatch jquery.js:4409
elemData.handle jquery.js:4095

I fixed this error by adding this.options = options to the very beginning of the loadUrl() function. However, after I fixed that error, I got a new error:

Pjax switch fail:  
TypeError {stack: (...), message: "Cannot read property '#pjax' of undefined"}
 pjax.js:432
(anonymous function) pjax.js:432
request.onreadystatechange pjax.js:395

So with this second error, it falls back to the window.location() option, which is not the behavior that I am looking for. I have messed around with the code in order to fix this error but I have yet to find a solution.

Using v0.1.4, I'm getting this error:

                this.options.analytics = this.options.analytics || function(t) {
                    window._gaq && _gaq.push(["_trackPageview"]),
                    window.ga && ga("send", "pageview", {
                        page: t.url, # Uncaught TypeError: Cannot read property 'url' of undefined
                        title: t.title
                    })
                }

Hi MoOx! If I click on a link twice... The page is refreshed.

Reproductible on your own site :)

Any idea?

Pjax switch fail:  
TypeError: this.onSwitch is not a function(…)(anonymous function) @ vendor.bundle.js:277 

Stack Trace

module.exports.outerHTML (vendor.bundle.j…v=20160105:740)
(anonymous function) (vendor.bundle.j…v=20160105:722)
module.exports (vendor.bundle.j…v=20160105:390)
(anonymous function) (vendor.bundle.j…v=20160105:713)
module.exports (vendor.bundle.j…v=20160105:697)
Pjax.switchSelectors (vendor.bundle.j…v=20160105:174)
Pjax.loadContent (vendor.bundle.j…v=20160105:225)
(anonymous function) (vendor.bundle.j…v=20160105:272)
request.onreadystatechange (vendor.bundle.j…v=20160105:860)

Happens in switches.js outerHTML and innerHTML

See https://github.com/defunkt/jquery-pjax/pull/395/files

ref https://github.com/defunkt/jquery-pjax/blob/863b802a84af8a9c72def4984d4d38163541fe6d/jquery.pjax.js#L302-L318

Hi, I tried using the latest version but it breaks on a HierarchyRequestError. I tracked down the bug:

Here you call trigger(document, ...), but trigger will add the element to the DOM if it doesn't have a parentNode (which document doesn't) here. The result is a call like document.body.appendChild(document) which breaks.

After downgrading to 0.1.4 this error disappeared.

To remove focus on a clicked/tapped link (eg on ipad, a attached tooltip can remain visible after the new page load, which is weird)

Hi - wonder if anyone could help me, I need to somehow access the anchor that was actually clicked to trigger the pjax:send event. I figured I could do this by listening for the click on any but this event happens after the pjax:send. Any ideas?

When I try to implement the demo in the readme (sideBySide switch) I get an error.

Pjax switch fail:  ReferenceError {stack: (...), message: "forEach is not defined"}
 pjax.js:431
(anonymous function) pjax.js:431
request.onreadystatechange

This error only happens with using sideBySide switch

switches: {
            ".js-Pjax": Pjax.switches.sideBySide
          }

using outerHtml or innerHtml does not throw this error. I'm using the latest Chrome browser.

Ok, this may be that I am a total idiot, cause I am a designer first and foremost, but I can't find the pjax.js file.

I've tried both the ZIP download and the bower installation, but there is no such file.

Should the pjax events attach to links that are injected through a previous pjax call by default or do you have to do something special to attach new pjax events to those newly inserted links? Currently, even though the links I am inserting follow the selector defined in elements, they are causing hard refreshes (not pjax events).

Why I always get TypeError: Cannot set property 'firstrun' of undefined in the console. Am I doing something wrong?

Pjax({
    selectors: "main.main",
    switches: {
        "main.main": Pjax.switches.sideBySide
    },
    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"
            }
        }
    }
});

with pjax disabled & a button to enable pjax with different effects TO SHOW THE POWER of this module (compared to jquery-pjax ?).

defunkt/jquery-pjax#401

I see that you intend to add a few demos...

Would it be possible to add a demo which uses jsScroll or a similar infinite scroll add-on?

This is because i cannot see how to get this to work with your pjax.

Thanks very much!!

Ref defunkt/jquery-pjax#443
Solution defunkt/jquery-pjax@863b802

Hi there!

I've been using jQuery Smoothstate to add custom animations to page transitions. Support has disappeared so I'm interested in replacing it. I looked into jQuery pjax but the lack of ability to allow a specified duration for CSS animations put me off and in turn, led me here. I've had a good read of your docs and it seems perfect, I just want to clear a few things up before I make the jump.

Is it be possible to change the exiting animations based on which link was clicked? I'm trying to have it feel like a horizontal slideshow so that I have left and right exiting/entering navigation. So if I click on the left link the screen animates out left and vice versa with the right link.

Further from this, I'd need to alter the animation on the following page, depending on the exiting animation. Does that make sense? This site is a good example (click the left and right links, they animate out and in according to which item you click.

Other than that I just need to be able to re-fire any JS that needs to be loaded once the page has loaded but I'm pretty sure you have that covered?

Finally, how closely are you planning to keep this to jQuery pjax, feature wise?

Many thanks,
Mike

Great project! You have a scroll option, which is useful for when NEW content is loaded.

However, if i do the following:

• visited a link
• scrolled down the page
• clicked on a new link
• viewed the new page
• hit the back button

I am taken to the top of the page again. So i have to scroll all the way back down, trying to find where i was before.

When i click a link, can pjax not record my scroll position before loading the new content, then when i go back to a page, take me back to the same scroll position?

This would be very helpful.

Thanks very much.

Hey @MoOx never done this before (npm/bower wise).

Can you tell me how to go about it? Do I just up the version numbers in package.json/bower.json and push a release tag or do I need to do other things?

I think now that the main library is "functional" we should push it out as is and then deal with issues as they come up.

When clicking a link which triggers a redirect (302 or whatever), PJAX disregards it and pushed the state with the link's URL.

I think it should push, in the state, the URL as sent in the response's header "Location". Also, probably worth looking at that header to check if the URL is external and if it is, then don't try to do PJAX on it.

I want reload content pjax selector.

Please give me example about Extend Pjax or anyway solution to solve this problem

It works, but the request header looks like it's missing the X-PJAX header, trying to setup my backend to just return body content for pjax request.

defunkt/jquery-pjax#400

This can be fun.
A bookmarklet to enable pjax on any website.
Just for the demo.

The eval-script module is slick! But it doesn't address if the inline JS to eval is dependent on an external script that's loaded in the new DOM elements, e.g.

<script src="//somewebsite.com/coolThing.js"></script>
<script>coolThing();</script>

Would you be open to a pull request for that? Or is there a reason why you wouldn't want to do that?

Currently the way things are (shitty) done, the trick to "mock" api for unsupported browser is awful cause you can for eg use Pjax.switches.blah.
After refactor on testling branch, I need to do something else.
Like just add a .isSupported method & document the fact that every call & ref usages should be prefixed by this test ?

There's no git tags for v0.1.3 or v0.1.4.

I can't run the example code correctly.

The browser Console Shows (Firefox 43.0.1)

GET 
http://localhost:3000/pjax.js [HTTP/1.1 404 Not Found 2ms]
Document initialized: "http://localhost:3000/index.html" example.js:2:1
ReferenceError: Pjax is not defined

same behavior also in Internet Explorer 11.

I did the following commands:

git clone "https://github.com/MoOx/pjax.git"
cd pjax
node -v
v5.3.0
npm i
npm i -g serve
npm run example
> [email protected] example C:\Development\temp\pjax
> echo '
==> Open http://localhost:3000/example in your browser.'; serve .

'

     (nothing served yet)
cd example
serve .

After that, I opened http://localhost:3000/index.html in the browser window, opened the console window and saw the errormessage I already posted above ...ReferenceError: Pjax is not defined...

A static method that allows invocation instead of relying on declarative options.

This would open the door to things like

• dynamic links (instead of relying on href), could be based on runtime vars like time or attributes
• non-a links
• non-click (mobile taps, hovers, keypresses)
• or any number of processing steps to yield a target url to load
• different switch options

This method could also return a Promise, and puts us closer to $.pjax.

v0.1.4 is the last known working version; it shuold be tagged as latest so that npm install pjax will fetch that.

npm tag [email protected] latest

https://developers.google.com/web/updates/2015/09/history-api-scroll-restoration

if ('scrollRestoration' in history) {
  // Back off, browser, I got this...
  history.scrollRestoration = 'manual';
}

Hey there,

I've been fiddling around with your library. Works well!

I found a small bug. This regex (https://github.com/MoOx/pjax/blob/master/src/pjax.js#L346) doesn't match <html>. It matches <html lang="en"> and a lot of other possibilities. But not plain old <html>!

Or maybe this (https://github.com/MoOx/pjax/blob/master/src/pjax.js#L349) should be if (matches && matches.length)

Thought I'd let you know.

Edit: Crap, let me rephrase this: String.prototype.match returns null if nothing is matched. It seems like that was what you were trying to do on that line. That's probably the issue.

I have a page with multiple elements whose content pjax controls and each of those might use a different "switch" to swap the old content out for the new. After every page transition I have a bunch of scripts that handle how the new content is supposed to behave. Some of these need to also update on 'resize'.

The problem is that pjax triggers 'resize' and 'scroll' on every element "switch", so in my case would trigger resize & scroll 6 times for every page transition. The method responsible for that is: https://github.com/MoOx/pjax/blob/master/index.js#L72

My solution was to override the aforementioned onSwitch method with the following:

let switched = true;
Pjax.prototype.onSwitch = function onSwitch() {
    if (!switched) return;

    switched = false;
    // 'once' is implemented to fire event cb once and then de-attach
    once(window, 'pjax:complete', () => {
        Pjax.trigger(window, 'resize scroll');
        switched = true;
    });
};

This seems to work so far, but I am wondering whether there is a better way and/or whether pjax should handle triggering resize & scroll only once after a page transition internally.

thank you for this great pjax.

but I may found a bug when it run with google analytics.

options.analytics() didn't have any param. so ga("send", "pageview", {"page": options.url, "title": options.title}) got an error Cannot read property 'url' of undefined.

I fixed it by replaced with ga("send", "pageview", {"page": location.pathname, "title": document.title}).

@darylteo I don't really like using milestone for small project like this one. Let's just merge PR and release (btw, I just came back and will release a new version asap).

At the moment, events are emitted via document using native dispatchEvent.

This (I think) causes issues if multiple instances of pjax are used.

Better to have Pjax as a EventEmitter emit its own events. This does increase the size of the library (4-5kb?).

Interesting PR that can be ported defunkt/jquery-pjax#379

This can make sense if you have transition (eg: slide) on user click on a link that is the same url that it is already. Doing nothing is a bad idea, so a different kind of effect should be used to not use a slide just to reload the current page.

Ref #14

Do you have an example project that shows, in the simplest manner possible, how to set up a webpage to use this project?

I am new to the pjax concept, as well as require.js, and there seem to be a lot of intermediate steps missing that describe how to set up your require calls in order to correctly load and call the pjax project's dependencies. A simple example project with two html pages showing the basic pjax loading functionality would answer all these setup questions.

Thank you.

I've just tried to install this within Visual Studio for an Umbraco Install and I get the following output:

No files or folders are added to the solution and re running the instal produces the same result.

was expecting the following folder to be added "/node_modules/pjax"