pjax broken? #182

thewatts · 2012-09-06T06:52:01Z

So initially I tried doing this thing with WordPress, with no dice. In response, I tried doing it with basic HTML & JS.

Still no dice.

index is the main page, has one anchor that links to third.html (which is just plain text).

As you can see below, I am putting a timestamp within the h1 so that I can verify that the pjaxy goodness works.

However, I can't get it to work.

I've also tried another file, second.html, that had full html / head tags and the text within a paragraph tag (I used the fragment method - also with no luck).

Doesn't work in Safari / Chrome / Firefox.

Would appreciate any help that can be given!

Thanks so much!

index.html ::

<!doctype html>
<html>
<head>
  <title>Testing PJAX</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
  <script type="text/javascript" src="pjax.js"></script>

    <script>
        var time = new Date().getTime();

        $(document).ready(function(){

            $('.time').html(time);

            $("a.pjax").pjax("#main" });

        });
    </script>
</head>
<body>

    <h1>TIME: <span class='time'></span></h1>

    <a class="pjax" href="third.html">PJAX</a>

    <div id="main">
        <h1>This is me testing PJAX!!!</h1>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    </div>

</body>
</html>

third.html
Bacon ipsum dolor sit amet strip steak short ribs jowl pork loin tri-tip, meatball bacon andouille. Biltong swine spare ribs, pork chop turducken pancetta ball tip brisket turkey tenderloin. Chicken corned beef bresaola drumstick boudin pancetta. Pastrami short loin ball tip venison turducken. Flank shankle ham hock ribeye bacon sausage jowl meatloaf turkey tail fatback. Jerky meatloaf venison cow tri-tip, shoulder bacon hamburger ham pork chop.

The text was updated successfully, but these errors were encountered:

mirzadelic · 2012-09-07T01:05:50Z

Try to replace(you have typo error):

$("a.pjax").pjax("#main" });

with:

$("a.pjax").pjax({ container: "#main" });

thewatts · 2012-09-07T01:23:10Z

Thanks for the response mirzadelic!

Unfortunately, it is still not working :/

console is logging "true" in regards to $.support.pjax

<!doctype html>
<html>
<head>
  <title>Testing PJAX</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
  <script type="text/javascript" src="pjax.js"></script>

    <script>

        var time = new Date().getTime();
        console.log(time);

        $(document).ready(function(){

            $('.time').html(time);

            $("a.pjax").pjax({ container: "#main" });

            console.log($.support.pjax);

        });

    </script>
</head>
<body>

    <h1>TIME: <span class='time'></span></h1>

    <a class="pjax" href="second.html">PJAX</a>

    <div id="main">
        <h1>This is me testing PJAX!!!</h1>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    </div>

</body>
</html>

mirzadelic · 2012-09-07T01:44:44Z

Wrap this text from second.html in div, and then try.
<div id="main">Bacon ipsum dolor sit amet strip steak short ribs jowl pork loin tri-tip, meatball bacon andouille. Biltong swine spare ribs, pork chop turducken pancetta ball tip brisket turkey tenderloin. Chicken corned beef bresaola drumstick boudin pancetta. Pastrami short loin ball tip venison turducken. Flank shankle ham hock ribeye bacon sausage jowl meatloaf turkey tail fatback. Jerky meatloaf venison cow tri-tip, shoulder bacon hamburger ham pork chop.</div>

and then:

$("a.pjax").pjax({ container: "#main" , fragment: "#main" });

thewatts · 2012-09-07T02:54:30Z

Still nothing :/

Thanks for taking the time to help!

index.html

<!doctype html>
<html>
<head>
  <title>Testing PJAX</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
  <script type="text/javascript" src="pjax.js"></script>

    <script>

        var time = new Date().getTime();
        console.log(time);

        $(document).ready(function(){

            $('.time').html(time);

            $("a.pjax").pjax({ container: "#main", fragment: "#main" });

            console.log($.support.pjax);

        });

    </script>
</head>
<body>

    <h1>TIME: <span class='time'></span></h1>

    <a class="pjax" href="second.html">PJAX</a>

    <div id="main">
        <h1>This is me testing PJAX!!!</h1>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    </div>

</body>
</html>

second.html
`

Bacon ipsum dolor sit amet strip steak short ribs jowl pork loin tri-tip, meatball bacon andouille. Biltong swine spare ribs, pork chop turducken pancetta ball tip brisket turkey tenderloin. Chicken corned beef bresaola drumstick boudin pancetta. Pastrami short loin ball tip venison turducken. Flank shankle ham hock ribeye bacon sausage jowl meatloaf turkey tail fatback. Jerky meatloaf venison cow tri-tip, shoulder bacon hamburger ham pork chop.

`

thewatts · 2012-09-07T22:06:12Z

Fixed!

Had to be running on an actual server...?

Thanks for your help @mirzadelic !!

mirzadelic · 2012-09-07T22:20:53Z

It doesn't work on localhost ?

thewatts · 2012-09-07T22:51:37Z

I was running it through general html files as opposed to using my localhost (that was the issue).

However, I don't know that I understand the fragment option...

Can fragment be declared as any element on the page that needs to be loaded - or does it have to be the same as the main container element?

ex:

$('a.pjax').pjax('#main", { fragment: '#differentContainer' });

The above doesn't work for me.

In order for it to work, I have to put:

$('a.pjax').pjax('#main", { fragment: '#main' });

mirzadelic · 2012-09-07T23:02:05Z

It doesn't need to be the same div, if you can load any element to that #main:

$('a.pjax').pjax({ container: '#main', fragment: '#differentContainer' });

pjax will find #differentContainer and put all it contents in current #main div.

thewatts · 2012-09-07T23:08:26Z

I have that set up to work, and it "changes" to the next page, but no content loads into the #main container.

I've even tried setting ajax to not cache, still empty #main.

mirzadelic · 2012-09-07T23:26:40Z

You need to have #differentContainer on next page, so it will take content from that div and put it in #main.
Can you post HTML markup ?

thewatts · 2012-09-07T23:34:53Z

I can!

Thanks!!

second.html

<!doctype html>
<html>
<head>
  <title>TITLE!</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="">
</head>
<body>
     <div id="shim">
        Bacon ipsum dolor sit amet strip steak short ribs jowl pork loin tri-tip, meatball bacon andouille. Biltong swine spare ribs, pork chop turducken pancetta ball tip brisket turkey tenderloin. Chicken corned beef bresaola drumstick boudin pancetta. Pastrami short loin ball tip venison turducken. Flank shankle ham hock ribeye bacon sausage jowl meatloaf turkey tail fatback. Jerky meatloaf venison cow tri-tip, shoulder bacon hamburger ham pork chop.
     </div>
</body>
</html>

index.html

<!doctype html>
<html>
<head>
  <title>Testing PJAX</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
  <script type="text/javascript" src="/pjax.js"></script>

    <script>

        var time = new Date().getTime();
        console.log(time);

        $(document).ready(function(){

            $('.time').html(time);

            $("a.pjax").pjax("#container", { fragment: "#shim" });

            console.log("PJAX SUPPORT: " + $.support.pjax);

        });

    </script>
</head>
<body>

    <h1>TIME: <span class='time'></span></h1>

    <a class="pjax" href="/second.html">PJAX</a>

    <div id="container">
        <h1>This is me testing PJAX!!!</h1>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    </div>

</body>
</html>

mirzadelic · 2012-09-07T23:52:22Z

You need to wrap text from #shim in div:

<div id="shim">
        <div>Bacon ipsum dolor sit amet strip steak short ribs jowl pork loin tri-tip, meatball bacon andouille. Biltong swine spare ribs, pork chop turducken pancetta ball tip brisket turkey tenderloin. Chicken corned beef bresaola drumstick boudin pancetta. Pastrami short loin ball tip venison turducken. Flank shankle ham hock ribeye bacon sausage jowl meatloaf turkey tail fatback. Jerky meatloaf venison cow tri-tip, shoulder bacon hamburger ham pork chop.</div>
</div>

This works to me..

thewatts · 2012-09-08T12:59:34Z

BOOM! Worked!

Looks like in order to return a response, the content needs to be wrapped by an element within the fragment div.

So,

Bacon ipsum....

works, as does

Bacon ipsum....

Thanks @mirzadelic !!!

mirzadelic · 2012-09-09T22:08:59Z

I'm glad that it works. :)

thewatts closed this as completed Sep 7, 2012

thewatts reopened this Sep 7, 2012

thewatts closed this as completed Sep 8, 2012

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

pjax broken? #182

pjax broken? #182

thewatts commented Sep 6, 2012

mirzadelic commented Sep 7, 2012

thewatts commented Sep 7, 2012

mirzadelic commented Sep 7, 2012

thewatts commented Sep 7, 2012

thewatts commented Sep 7, 2012

mirzadelic commented Sep 7, 2012

thewatts commented Sep 7, 2012

mirzadelic commented Sep 7, 2012

thewatts commented Sep 7, 2012

mirzadelic commented Sep 7, 2012

thewatts commented Sep 7, 2012

mirzadelic commented Sep 7, 2012

thewatts commented Sep 8, 2012

mirzadelic commented Sep 9, 2012

pjax broken? #182

pjax broken? #182

Comments

thewatts commented Sep 6, 2012

mirzadelic commented Sep 7, 2012

thewatts commented Sep 7, 2012

mirzadelic commented Sep 7, 2012

thewatts commented Sep 7, 2012

thewatts commented Sep 7, 2012

mirzadelic commented Sep 7, 2012

thewatts commented Sep 7, 2012

mirzadelic commented Sep 7, 2012

thewatts commented Sep 7, 2012

mirzadelic commented Sep 7, 2012

thewatts commented Sep 7, 2012

mirzadelic commented Sep 7, 2012

thewatts commented Sep 8, 2012

mirzadelic commented Sep 9, 2012