Pjax + inline script + ajax #510

nskarl · 2015-03-28T04:38:35Z

Hi all!
i'm trying add pjax to existing site
This site have many inline scripts and inline ajax

bug#1: all inline script like < script scr=" somescript.js " >< / script > do not have time to load before loading < script > some javascript < / script > that is why all inline-javascript not working. But if go back to this page again - scripts will be loaded and inline-script will work. I'm using $(document).on('ready pjax:end', function()

bug#2: some pages using ajax-query for select (for example choose country, region and city) or in im-page for checking new messages. On first load page this ajax-queries not working (bug#1). On second loading this page ajax-query will work (bug#1) but thats ajax-query will doing in all other pages. But that's not all. On next viewing this page ajax-query will be duplicated.

I mean next:

First viewing page with ajax-query, console.log:

POST http://mysite.com/ajax/get/ 200 OK 90ms

Second viewing this page, console.log:

POST http://mysite.com/ajax/get/ 200 OK 90ms
POST http://mysite.com/ajax/get/ 200 OK 90ms

Third viewing this page, console.log:

POST http://mysite.com/ajax/get/ 200 OK 90ms
POST http://mysite.com/ajax/get/ 200 OK 90ms
POST http://mysite.com/ajax/get/ 200 OK 90ms

etc.
and this ajax-queries will do on all pages that loaded by pjax

sorry for my bad english

nskarl · 2015-03-30T03:25:51Z

bug with ajax has been resolved by removing "pjax:end" from "document.ready"
but if ajax called by setTimeOut from page (checking new message) - query will duplicated and will calling on all other pages

mislav · 2015-03-30T16:00:43Z

What you're experiencing in bug#1 is a valid issue of pjax-enabled sites not behaving completely the same as static sites when it comes to script loading. Please follow issue #331 (comment) for discussion and updates on the topic. This is still unsolved.

The double POST requests you're getting after pjax navigation sound like double event binding discussed in #473 (comment). That is indicative of the problematic pjax setup for form submit on your site. You need to ensure that pjax will be set up only once for forms on your site and not repeated several times. So, please look at where you're setting up pjax and ensure that that setup code can't possibly get loaded and run more than once.

nskarl · 2015-03-31T05:41:45Z

@mislav thanks for answer
its not form submit, its simple javascript

pjax included one time (once?) on footer (footer not updating by pjax):

<body>
    <div id="#wrapper">
        content
    </div>

    <script>
    $( document ).ready( function() {
        if ( $.support.pjax ) {
            $( document ).pjax( 'a', '#wrapper', { fragment: '#wrapper' } );
        }
     });
    </script>
</body>

ajax-query of checking new messages only on one page (im) and it started by setTimeOut

<body>
    <div id="#wrapper">
        content

        <script>
        function refresh() {
            setTimeout( function ()  {
                $.get(
                    "ajax/url",
                    function ( data ) {
                        refresh();
                    },
                    'JSON' 
                );
            }, 7001);
        }
        refresh();
        </script>
    </div>
</body>

I had to disable pjax on this page by $.pjax.disable();
but i want to use pjax on this page too, but i cant - this ajax query will do on all other pages =(

mislav · 2015-04-02T10:24:54Z

OK that code helped me understand your problem a bit better. I've amended the formatting of the code examples in your previous comment. In the future, if you want to paste blocks of code in conversations on GitHub, use this syntax:

This is my regular text

```html
<p>This is a block of example HTML</p>
```

This is the rest of regular text

In short, surround each block of code that you paste with 3 backticks.

On to your problem. I don't think I can help you much here. The problem is that you load a certain page that has inline <script> on it that starts an Ajax polling loop, but that loop keeps polling even if you navigate away from the page. Then, when you navigate back to this page, another loop is started, and now you have duplicate requests. (I don't know where the POST requests from your original topic come from. This example code shows that you do GETs in a loop.)

This is your original inline script:

function refresh() {
  setTimeout(function()  {
    $.get(
      "ajax/url",
      function(data) {
        refresh();
      },
      'JSON'
    );
  }, 7001);
}
refresh();

I propose the addition of timer and xhr variables so you can cancel them when the page navigates away:

var timer, xhr

function refresh() {
  timer = setTimeout(function() {
    xhr = $.get(
      "ajax/url",
      function(data) {
        refresh()
      },
      'JSON'
    )
  }, 7001)
}
refresh()

// Handle the next pjax navigation event (either click or popstate)
$(document).one("pjax:start", function() {
  // Cancel the setTimeout in progress
  clearTimeout(timer)
  // Cancel the Ajax request in progress
  if (xhr) xhr.abort()
})

Other than this, I can't help you much with breakages in your own site's JavaScript. You'll have to handle each breakage on a case-by-case basis. Pjax sites are slightly different than regular static sites.

milos-v · 2015-11-25T06:58:17Z

I had the same issue, and this part was making the problem.
$( document ).pjax( 'a', '#wrapper', { fragment: '#wrapper' } );

When you set such a global selector as 'a' pjax acts even on ajax calls. So better idea would be to limit the scope of this selector with some parent class or with adding some custom attribute to it like [data-pjax]. Than the code would look something like this:
$( document ).pjax( 'a[data-pjax]', '#wrapper', { fragment: '#wrapper' } );

mislav closed this as completed Apr 2, 2015

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Pjax + inline script + ajax #510

Pjax + inline script + ajax #510

nskarl commented Mar 28, 2015

nskarl commented Mar 30, 2015

mislav commented Mar 30, 2015

nskarl commented Mar 31, 2015

mislav commented Apr 2, 2015

milos-v commented Nov 25, 2015

Pjax + inline script + ajax #510

Pjax + inline script + ajax #510

Comments

nskarl commented Mar 28, 2015

nskarl commented Mar 30, 2015

mislav commented Mar 30, 2015

nskarl commented Mar 31, 2015

mislav commented Apr 2, 2015

milos-v commented Nov 25, 2015