defunkt / jquery-pjax Goto Github PK

Could this work?
jQuery('form[method=get]').pjax();

Of course this form has the data-pjax='' tag.

Please add the functionality if this is reasonable.
Thanks for all!

Lets say I'm on the following page:

http://localhost/exchange#log

The hash selects a jquery tab by default.

I have an edit button on this page which loads my content into the container, works so far. Now If I press the back button pjax doesn't load the content until it hits a URL without a hash. So it has no trouble going back to http://localhost/exchange but can't go back to the URL I provided.

They seem to be removed by jquery for me. I'm also using a fragment from a full html page (page caching ftw) so perhaps that complication is also causing problems. I'll try to come up with a minimized example case.

Currently a canceled pjax request will also trigger pjax:end event while the 'result' property of the event keeps undefined , which left no way to make out whether the request is finished or canceled.

So maybe 2 solutions:

1. Add a pjax:cancel event instead pjax:end for canceled pjax request.
2. Fulfil the 'result' property of the pjax:end event. There IS such a property now but it's always 'undefined'.

HTTP_X_PJAX is not sent correctly unless / or file extension is added to the URL.

This do not send the header: < a href="/contact" >contact< /a >
These ones do: < a href="/contact/" >contact< /a > < a href="/contact.html">contact< /a >

It would be nice if pjax supported History.js to solve those pesky cross-browser compatibility bugs and also optionally support HTML4 browsers.

I just went to the example page in heroku for the first time, and is not working. This is the error I get in chrome console: "Unsafe JavaScript attempt to access frame with URL http://pjax.heroku.com/dinosaurs.html from frame with URL http://www.youtube.com/embed/GcjxwXCxBBU. Domains, protocols and ports must match."

The following two snippets have the same effect in unsupported browsers:

$.pjax({
  url: '/defunkt',
  type: 'POST',
  data: 'first_name=Chris',
  container: '#pjax'
})

window.location = '/defunkt'

That is to say, in unsupported browsers the POST data is not submitted (I found this somewhat surprising, as I think of $.pjax as a wrapper around $.ajax). There's an easy workaround:

$.ajax({
  url: '/defunkt',
  type: 'POST',
  data: 'first_name=Chris',
  success: function(html){ $('#pjax').html(html) }
})

Perhaps handing non-GET requests to $.ajax in unsupported browsers is a better fallback than setting window.location?

Would be more readable. Awesome ASCII art should still work as it's properly 'nested'. Thanks! :-D

Hey Guys,

In my application I use this technique:

body id="action" class="controller"

Is there a way pjax send this?

I check the checkbox and click the links and the clock changes. Sometimes I see that the checkbox gets unchecked on page load and then it gets checked again. Made jing movie
chrome 14.0.835.186 windows

As I wrote in #25:

There's a problem with callbacks in pjax, however: they don't get run when returning to a pjax'd page after navigating away.

For example:

$('a').pjax('#main', { success: function(){
  console.log('pjax!')
}})

This code will log "pjax!" until you navigate away from the page. Once you return (via the back button) from navigating away, nothing will be printed. We can't persist callbacks with the History API.

This is a problem for the existing success, error, and complete user defined callbacks.

Instead, people should use the start.pjax and end.pjax events. We should probably not let anyone use anything else and add more pjax-specific events to make up for it.

Unfortunately, it's not that simple. Take the above example. If multiple pjax handlers are using #main, how can you tell if the end.pjax event fired is the one you anticipated?

Hi,
I found a weird behavior.

Accessing pjax.heroku.com (pjax enabled) -> /dinosaurs.html -> github.com/defunkt/jquery-pjax, then back to /dinosaurs.html, I couldn't see whole dinosaurs page.
That is, browser shows partial page (which is the response of pjax request).

My environment is:
Google Chrome 10.0.648.204 and Firefox 4.0 on MacOSX 10.6.7 doesn't work as I expected.
Safari 5.0.4 on MacOSX 10.6.7 does work as I expected.

I think it may be a bug or an issue around Chrome and Firefox, but I'm not sure.

Excuse me if this behavior is a known issue.

Regards,

Hey.

Both Chrome dev and Firefox 4.0 seem to be converting the name of the header to X-Pjax, so looking for X-PJAX serverside didn't work for me.

Figured out the solution myself, but putting it here for googleability if someone else has the same problem.

We saw the following behavior: if I'm on page /a and click a pjax link to page /b, everything is fine. But when I click a link from there on to page C, the link will say /c?_pjax=true and that's the URL I will see after following it.

The issue is simply that since pjax adds the _pjax=true parameter in its Ajax request for reasons of browser caching, the links in your view may render with that parameter included, depending on how you generate their URLs.

What I did in Ruby on Rails was simply a params[:_pjax] = nil in the controller (a before filter might be appropriate) before rendering the view. Doesn't interfere with the caching but helps the links render without that parameter.

Hello,
I think it would be really great if it was possible to use effects, for example to show the new content.

@brianmario says:

keep track of the last xhr request, when another one is attempted abort the last if its readyState is < 4

On redirects with HTTP 301, pjax loads the right page, but updates to the wrong (requested) url while it should update to the page the redirect was to.

I tried the compression code and it didn't work for me:

curl
-d output_info=compiled_code
-d compilation_level=ADVANCED_OPTIMIZATIONS
-d code_url=https://github.com/defunkt/jquery-pjax/raw/master/jquery.pjax.js
http://closure-compiler.appspot.com/compile

I mean I got the result and when I replaced it with the original it didn't work (as if I don't have pjax at all).

Please advise.

I struggled with why I couldn't get the simplest of test apps working with pjax. It was something like..

index.html

<html>
<head>
    <title></title>
    <script src="http://pjax.heroku.com/jquery.js"></script>
    <script src="http://pjax.heroku.com/jquery.pjax.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('a').pjax('#container', {
                fragment: '#container',
            })
        });
    </script>
</head>
<body>
    <a href="page.html">PJAX!</a>
    <div id="container">
        Replace this..
    </div>
</body>
</html>

page.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div id="container">
        <h1>Heading!</h1>
        With this..
    </div>
</body>
</html>

Issue 1

The issue turned out to be that pjax does a .find() on the ajax response. There are two issues with this:

1. The elements jquery applies the .find() to might vary per browser: http://api.jquery.com/jQuery/#creating-new-elements
2. .find() searches the descendants of each element in a set (http://api.jquery.com/find/)

In my case #container was in the matched set. Wrapping the #container div in another div fixed this issue.

Issue 2

The second problem I had was with the text inside of the remote #container div did not get transferred into the current pages #container div.

I solved this issue by changing.. data = $fragment.children(); to.. data = $fragment.contents(); in jquery.plax.js

Summary

1. Make sure your fragment element is not the first element in the body
2. DOM elements with nodeType #text will not be copied over unless wrapped in some other element

I hope to submit a pull request if I can think of a simple way to .find() on the selection, and its children.

I've been trying to get pjax to work on my development site but I just can't get it to work.
Everytime I clicked on a link, I can see in the firebug console that it's trying to load the page but before the request is completed, I got navigated away to that page instead of loading the content through AJAX.

All pjax:XXX events should be forwarding the DOM link that was clicked via event.relatedTarget so it can be used downstream if needed (for example active/inactive tabs and such).

This should be done fairly easy by modifying the handleClick function.

If the example is any indication, it appears that clicking another PJAX link won't do anything while there is a request loading.

This is very unlike how the browser works. In this case, PJAX should stop the prior request and issue a new one.

Hi all, i'd like to call $.pjax inside a click(function(){}) such that I can use $(this) to get the attributes of a selected pjax-ified link. The goal is to send POST data specific to which link was clicked.

Here's some example code:

*div id="main></div*
*a class="each_link" title="title_1">link_1</a*
*a class="each_link" title="title_2">link_2</a*

$('a.each_link').live('click', function(){ 
var title=$(this).attr('title');
$.pjax({url: '/link' , type: 'POST', data: 'posted_data='+title+'' }); 

i'd like to be able to send "title_1" or "title_2" along as data but clicking either of these links kills my browser (chrome or firefox).

Can anyone advise on whether this is a $.pjax specific quirk?

thanks,
tim

Can we haz (Yes, I'm lazy)?

Has anyone noticed this? I've got pjax() working fine but sometimes it just fails. It seems like failure correlates with size of loaded content or frequency of clicking links or back button. By fails, i mean it does a full page load on the selected href rather than ajax loading. The console error says can't recognize jQuery object and it can happen in chrome or firefox.

thanks,
tim

On one of my pages, my pjax request sends a custom header. Eg:

var request = $.pjax({
  headers:    {'X-SL-CONTEXT': 'sort and filter'},
  url:        url,
  timeout:    0,
  container:  container,
  fragment:   container
});

In popstate events, that custom header should be sent. Unfortunately, it isn't.

One solution is to patch jquery-pjax so that it stores the headers object in the state object, and sends the headers in popstate events.

That feels like a lame solution, because other options might've been passed to the original $.pjax() call that should be included in popstate events, such as accepts, data, etc. Because of that, I feel like all of the options that are passed to $.pjax() that can be serialized should be stored in the state object.

What do you guys think?

http://pjax.heroku.com/ is not working on both Safari and Chrome, didn't try Firefox but I guess that is the same.
The time stamp change every time I change click on a link.

[ EDIT ] Works on firefox 8.0.1 on OSX 10.6.8

I'm trying to get pjax to work. I have this simple site https://github.com/silvenon/waldorfcamp/tree/master/source, I tried doing $('nav a').pjax('#main') (it's not currently there so you can imagine it), but it didn't work, meaning it was still refreshing each time, no AJAX. Is there something I missed...?

I'm trying to delay pjax from loading the next page until after my fadeout is complete, however pjax ignores the delay.

<script type="text/javascript">
    $(document).ready(function() {

        $('a.pjax').click(function() {
            $('#container').fadeOut(1000, function() {
               console.log('YOYOYO');
            });
        }).delay(1000).pjax({
            container: '#container',
            fragment: '#container'
        });
        $('#container').bind('end.pjax', function() {
            $('#container').fadeIn(1000) 
        });
    });
</script>

The code works almost completely when jQuery noConflicts mode is on, however, one small line seems to break, and this breaks popState functionality, meaning no back button.

Changing line 166 from $ to jQuery fixes everything.

For example a link to http://caniuse.com/#search=pushstate

Title says it all :) It's not happening all the time, just sometimes. I can't quite figure it out.

Hello,

I am using PJAX for filling a container with a page that contains dysqus comments.

When the page is loaded as a full request the dysqus comments are rendered.

But when the request is made by PJAX the dyscus comments are not shown. I think the javascript code is not being executed.

Any ideas?

The method success() in jquery.pjax.js sends unvalidated data to a web browser on line 160, which can result in the browser executing malicious code.

In jquery-pjax.js, line 160, the success method doesn't properly validate the malicious input returned from making the hash. Mind you, it is only as strong as the client protections enabled on the browser.

Using Safari 5.0.5 on Mac:

• load http://pjax.heroku.com/ (check pjax if not already checked)
• click one of the pages (works fine)
• hit back button

What happens is that the URL in the address bar changes, but the page content stays the same. This seems to only apply to whatever the initial state is - moving back through other PJAX'd states appears to work fine.

My one concern with this is will it be spiderable by Google, etc since the content is loaded via jquery?

I don't where to file this issue, but it appears that Safari's Reader doesn't follow pjaxed links and always opens the last fully refreshed page.

I am using Sinatra and want to use Pjax but for some reason that I don't understand it is not working.

App:

get '/docs/*' do                                           
  if request.xhr?
    puts "Sending a pjax request"  
    puts "docs/#{params[:splat].join('/')}.html"
    haml :"docs/#{params[:splat].join('/')}.html", :layout => false
  else
    haml :"docs/#{params[:splat].join('/')}.html", :layout => :'docs_layout'
  end  
end      

Log:

Sending a pjax request
docs/introduction.html
127.0.0.1 - - [29/Jun/2011 19:37:24] "GET /docs/introduction?_pjax=true HTTP/1.1" 200 1636 0.2096
[2011-06-29 19:37:24] ERROR Errno::ECONNRESET: Connection reset by peer
    /Users/Nerian/.rvm/rubies/ruby-1.9.2-p180/lib/ruby/1.9.1/webrick/httpserver.rb:56:in `eof?'
    /Users/Nerian/.rvm/rubies/ruby-1.9.2-p180/lib/ruby/1.9.1/webrick/httpserver.rb:56:in `run'
    /Users/Nerian/.rvm/rubies/ruby-1.9.2-p180/lib/ruby/1.9.1/webrick/server.rb:183:in `block in start_thread'
127.0.0.1 - - [29/Jun/2011 19:37:25] "GET /docs/introduction HTTP/1.1" 200 11345 0.1347

Javascript:

$(function() {  
    $('#index a').pjax('#doc')   
});                 

HTML

http://pastebin.com/uVXmBzL1

It seems that an ajax request is made but then something goes wrong and a non-ajax request is made, reloading the entire page. I am not sure where is the error.

I did a:

wget --header="X-Requested-With: XMLHttpRequest" http://localhost:3000/docs/validation?_pjax=true

And it gave me the right page, without layout. Maybe the problem is in the client side? But then, why the

ERROR Errno::ECONNRESET

In the server log?

I hope you can point me in the right direction :)
Thanks

I am often getting requests aborted in Firefox and Google Chrome.
I tried to debug this and found this piece of code

    if ( xhr && xhr.readyState < 4) {
        xhr.onreadystatechange = $.noop
        xhr.abort()
    }

which makes perfectly sense but the requested aborted problem occurs also if there isn't another request pending.
I verified this with this code

    if ( xhr && xhr.readyState < 4) {
        alert('already pjaxing...');
    }

The popup isn't shown but the request often gets aborted. Server side everything works fine.
Any idea about this behaviour?

I was looking at how to populate multiple areas using pjax and noticed this post where you say you dont want to over complicate pjax.

#7

I think it would be beneficial to have an event that could be triggered just before pjax updates the container. This would allow users to do any pre-processing of data they needed (probably not a requirement but could be useful to some) and importantly would allow users to update multiple places.

From what i have created its a very simple change and uses the event system already being used.

My current implementation only updates the container if the beforeRender callback returns true, although this could be changed to return the content if the pre-processing feature mentioned above might be of use.

If your interested i can tidy up the code a bit more and do some more testing.

The one we actually made a request to, not the one the user sees. There might some extra data in the query string to help make the request more pjaxy.

Hello,

If I set $.pjax.defaults.timeout = 3000; (example) before set the Pjax for links, will it work?

Like:

    $.pjax.defaults.timeout = 3000;
    $('a.pjax').pjax('#container');

If not, could be added this option?

Thx!

The first example in readme doesn't work:

$('a[data-pjax]').pjax()
>> Uncaught pjax container must be a string selector!

Options passed to $("a").pjax(...) aren't available on back buttons - maybe exposing a $.pjax.settings object like facebox does would do the trick. What do you think?

It looks like Safari spinning wheel never stops after reloading a page that used pjax and then navigating back to the page that called pjax. You can see it live at the demo page.

0. Visit the demo: http://pjax.heroku.com/

1. Click on dinosaurs or aliens

2. Reload: Command + R

3. Back: Command + [

4. Safari spinning wheel never ends

Safari version: 5.1
OS: 10.6.8

The current approach solves the problem:

I want to replace the content of an element with a new element from a url on the server.

But there are often other things which will need to be changed when this happens. A simple example is menus. If you have a hierarchical menu (the hierarchy of which is only known to the server-side application) and you want to represent the new active menu hierarchy (update the classes of links in some element), this approach can't work unless you PJAX an element from quite a bit higher in the DOM, which will reduce the utility.

I suggest that instead of setting what element gets replaced on the client side, and replacing that element with the entire response, we simply specify a URL, and allow the server side code to send back several elements, then replace those in the active page based on matching ids.

This would solve the menu example, but also any number of potential others, such as allowing for updates to an user alert box.

When following pjax-ified links on an iPhone or iPad, the URL does not match the current page.

The first link clicked updates the URL appropriately, but subsequent clicks are one behind the currently loaded content.

Please see this screenshot to see an example. The page title and content are correct, but the URL is not.

When refreshing the page, the URL changes to the correct URL and the proper page is reloaded.

The method success() in jquery.pjax.js sends unvalidated data to a web browser on line 167, which can result in the browser executing malicious code.

The current version of jquery.pjax.js isn't working for me on a client side setup by using the 'fragment' option:
$("a.pjax").pjax({container:"#maincontent",fragment:"#maincontent"});
After clicking an appropriate link I get a blank page and a couple of network errors (404). After removing the fragment option the target page will be loaded completly, without a pjax-call.
I'm wondering which pull request merge/update caused this issue, since I've downloaded the jquery.pjax.js which is still working for me just two month ago.