Question

所以我一直在努力让pjax在我的网站上工作，但运气不佳。我想做的是非常基本和简单。我只想在我的主页上创建两个链接，这两个链接都加载了一个公共页面。但是一个链接会使用pjax加载它，因此只更改div的内容，而另一个链接不会使用pjax，从而加载整个页面。

这是我的主页（main.html）的代码 -

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
        <title>Pjax Tutorial</title>
        <script src='node_modules/pjax/pjax.js' type="text/javascript"></script>
        <script src='main.js' type="text/javascript"></script>
    </head>
    <body>  
        <h1>Welcome to Pjax tutorial</h1>
        <a id="first-link" class="js-Pjax" href="first.html">First link</a>
        <a id="second-link" href="first.html">Second link</a>   

                <div id="first-div">Index page!</div>
    </body>

</html>

这是两个链接引用的公共页面的代码（first.html） -

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
        <title>Pjax Tutorial</title>
        <script src='node_modules/pjax/pjax.js' type="text/javascript"></script>
        <script src='main.js' type="text/javascript"></script>
    </head>
    <body>  
        <h1>Welcome to Pjax tutorial</h1>
        <a id="first-link" class="js-Pjax" href="first.html">First link</a>
        <a id="second-link" href="first.html">Second link</a>   

                <div id="first-div">This is the first page! If you came here from the first link, then you can notice that the page didn't load but only the URL and the contents of this div were changed. Yay! If you came here from the second link then you can notice that the page actually loaded and each and everything was re-executed(JS) and re-applied(CSS) again. Boo!</div>
    </body>

</html>

这是我正在使用的javascript（main.js） -

var a = new Pjax({
    elements: "a.js-Pjax",
    selectors: ["#first-div"]
});

它应该做的是如果我点击第一个链接，它应该只替换div的内容并更改页面的URL，而如果我点击第二个链接，它应该加载页面而不是只是更改div和URL。

我在play框架（MVC）中编写了相同的代码并且它运行得很好但是根据我的说法，我不应该只需要MVC来运行这么多代码。

我从这里得到了Pjax：https://github.com/MoOx/pjax。通过npm安装。

我已经运行Pjax.isSupported()命令并返回true。

感谢任何帮助！

Answer 1

这里有两件事要注意，其中的组合解决了我的问题。

首先，对main.js的调用或我编写的javascript文件必须在body标签的末尾完成。像这样的东西 -

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
        <title>Pjax Tutorial</title>
        <script src='node_modules/pjax/pjax.js' type="text/javascript"></script>
    </head>
    <body>  
        <h1>Welcome to Pjax tutorial</h1>
        <a id="first-link" class="js-Pjax" href="first.html">First link</a>
        <a id="second-link" href="first.html">Second link</a>   

                <div id="first-div">Index page!</div>
       <script src='main.js' type="text/javascript"></script>
    </body>

</html>

第二，我确实需要运行服务器来使pjax工作。它正在使用play框架和npm。没有服务器就行不了。

希望这有助于某人。

pjax没有在网站上工作

1 个答案: