Emlog Web-free loading via pjax-perfect solution for CNZZ statistics and JavaScript failure issues

To learn more about Pjax, you need to check the official website

or see this site article: jQuery.pjax.js: Use Ajax and Pushstate no Refresh Load Web page (official website tutorial Chinese translation)

See the effect of this station, music without refreshing play, code highlighting and copying JS loading success ~

Preparing Files

Edit Template header.php The head to add the necessary files:

jquery-1.11.1.min.js: Baidu network disk download

jquery.pjax-1.8.2.min.js: Baidu network disk download

After downloading to the template's scripts directory, add the following two sentences to the front of the

Click to preview

<script type= "Text/javascript" src= "<?php echo template_url;? >scripts/jquery-1.11.1.min.js" ></ Script><script type= "Text/javascript" src= "<?php echo template_url;? >scripts/jquery.pjax-1.8.2.min.js" ></script>

Note: jquery requires 1.7. The Pushstate package is available for more than 0 versions

using Pjax

Edit Template footer.php Insert before the end of the/body tag:

< script type= "Text/javascript" > $ (document) Pjax (' A[target!=_blank] ', ' #contentleft ', {fragment: ' #  Contentleft ', timeout:8000}); </script>

Parameter explanation:

1. A[target!=_blank]: Bind the page to all links that are not in the new window open

2. #contentleft: After the link click, just update the contents of the #contentleft container, the other content of the page is unchanged, you need to modify this parameter yourself

3. fragment: ' #contentleft ': #contentleft选择器的碎片从Ajax响应提取

4. timeout:8000: Ajax timeout is 8 seconds, refresh page directly if not responding

Note: How do you find this #contentleft?

The method of the little finger is to open the template echo_log.php, find the Parcel article page Div ID is, is generally the first second

ID name is contentleft,content or main, according to this method is generally OK, if not back to me ~

Solve Pjax Buffer--Add wait animation

Edit Template footer.php Insert the following code before the/body tag

Click to preview

<div class= "qingzz_pjax_loading" > <div class= "Qingzz_pjax_spinner" > <div class= "Qingzz_pjax_rect1 "></div><div class=" Qingzz_pjax_rect2 "></div><div class=" Qingzz_pjax_rect3 "></div ><div class= "Qingzz_pjax_rect4" ></div><div class= "Qingzz_pjax_rect5" ></div> </div ></div><script>$ (document). On (' Pjax:send ', function () {//pjax link is displayed after the load animation; $ (". Qingzz_pjax_loading" ). CSS ("Display", "block");}); $ (document). On (' Pjax:complete ', function () {//pjax link loaded after loading is complete, $ (". Qingzz_pjax_loading"). CSS ("display", "none");}); </script>

Add CSS to the end of the template CSS file without using the music plugin:

. qingzz_pjax_loading {height: 100%;width: 100%;p osition: fixed;top: 0;left: 0; Z-index: 1000;background-color: rgba (90,90,90,.5);d Isplay: none;}. qingzz_pjax_spinner {  margin: 300px auto;  width: 50px;   height: 60px;  text-align: center;  font-size: 10px;}. qingzz_pjax_spinner > div {  background-color:  #67CF22;   height:  100%;  width: 6px;  display: inline-block;  -webkit-animation:  stretchdelay 1.2s infinite ease-in-out;  animation: stretchdelay 1.2s  infinite ease-in-out;}. qingzz_pjax_spinner .qingzz_pjax_rect2 {  -webkit-animation-delay: -1.1s;   Animation-delay: -1.1s;}. qingzz_pjax_spinner .qingzz_pjax_rect3 {  -webkit-animation-delay: -1.0s;   Animation-delay: -1.0s;}. qingzz_pjax_spinner .qingzz_pjax_rect4 {  -webkit-animation-delay: -0.9s;   Animation-delay: -0.9s;}. qingzz_pjax_spinner .qingzz_pjax_rect5 {  -webkit-animation-delay: -0.8s;   animation-delay: -0.8s;} @-webkit-keyframes stretchdelay {  0%, 40%, 100% { -webkit-transform:  scaley (0.4)  }  20% { -webkit-transform: scaley (1.0)  } @keyframes  stretchdelay {  0%, 40%, 100% {    transform:  ScaleY (0.4);     -webkit-transform: scaley (0.4);   }  20% {     transform: scaley (1.0);     -webkit-transform: scaley (1.0 );   }}

Refresh, it's cool ~

Resolve failed submissions and multiple say do not load the problem:

Edit the footer.php of the template and add the following code before the/body tag:

Click to preview

<script>$ (document). On (' Submit ',  ' form ',  function (event)  {//  Resolve submit invalidation issues      $.pjax.submit (event,  ' #contentleft ', {fragment:  ' #contentleft ', timeout: 8000}) ;  }); $ (document). On (' Pjax:complete ',  function ()  {    pajx_loadduodsuo ();// Pjax call overloaded multi-function} after loading is complete; Function pajx_loadduodsuo () {    var dus=$ (". Ds-thread");     if ($ (dus). Length==1) {        var el  = document.createelement (' div ');         el.setattribute (' Data-thread-key ', $ (dus). attr ("Data-thread-key"));//Required Parameters          El.setattribute (' Data-url ', $ (dus). attr ("Data-url"));         duoshuo. Embedthread (EL);         $ (dus). html (EL);    }}< /script>

Inside the #contentleft need to change to the front of the container ID Oh ~

summarize footer. the code that PHP needs to add:

Click to preview

<div class= "qingzz_pjax_loading" >    <div class= "Qingzz_pjax_spinner" >        <div class= "Qingzz_pjax_rect1" ></div>< div class= "Qingzz_pjax_rect2" ></div><div class= "Qingzz_pjax_rect3" ></div>< div class= "Qingzz_pjax_rect4" ></div><div class= "Qingzz_pjax_rect5" ></div>     </div></div><script>//  bind links and containers $ (document). Pjax (' A[target!=_blank] ',   ' #contentleft ', {fragment:  ' #contentleft ', timeout: 8000});  $ (document). On (' Submit ',   ' form ',  function (event)  {//  Resolve commit failure     $.pjax.submit (event,  ' # Contentleft ', {fragment:  ' #contentleft ', timeout: 8000});  }); $ (document). On (' Pjax:send ',  function ()  { //pjax link Click to show load animation;     $ (". qingzz_pjax_loading"). CSS ("display" ,  "block");}); $(Document). On (' Pjax:complete ',  function ()  { //pjax after the link loading is complete, hide the load animation;     $ (". Qingzz_pjax_loading "). CSS (" display ", " none ");     pajx_loadduodsuo ();// Pjax call overloaded multi-function} after loading is complete; Function pajx_loadduodsuo () {    var dus=$ (". Ds-thread");     if ($ (dus). Length==1) {        var el  = document.createelement (' div ');         el.setattribute (' Data-thread-key ', $ (dus). attr ("Data-thread-key"));//Required Parameters          El.setattribute (' Data-url ', $ (dus). attr ("Data-url"));         duoshuo. Embedthread (EL);         $ (dus). html (EL);    }}< /script>

resolves a JavaScript event in a container that fails Question: Focus

Question: After Pjax comment box does not load, Ajax comments can not be submitted and so on.

Cause: The original container-bound event was replaced by the new container, and the new container's div has no binding event, so the click is invalid.

Workaround One: Use Pjax's load to complete the callback function and rebind the event.

Workaround Two: Add JavaScript to the echo_log.php container, which is generally added to the end of the container, which is the/div label.

More accurate way to view this site article:

Pjax JavaScript failure resolution (Pinky Pro Test)

Add JavaScript to containers added to the echo_log.php

The principle is that the contents of the container are refreshed and reloaded, so putting JavaScript here will reload ~

Here is only a list of common, other specific self-groping to add it ~

Better put it at the end of the container/div front Oh ~

Resolving code highlighting questions added:

<script src= "<?php echo blog_url;? >admin/editor/plugins/code/prettify.js" Data-no-instant></script ><script>prettyprint ();</script>

Resolve CN The zz statistic problem, preceded by explaining the concrete method at the end:

Pjax CNZZ Statistical failure resolution (Pinky Pro Test)

Solve Baidu statistical problems:

Pjax Baidu Statistical failure resolution (Pinky Pro Test)

Well, the perfect solution, hahaha ^_^.

Emlog Web-free loading via pjax-perfect solution for CNZZ statistics and JavaScript failure issues