I'm trying to write a site with content loaded into a div at runtime using PJAX. The PHP files that i request with the PJAX all include a header and footer, which only produce content if isset($_SERVER['X-PJAX'])
However, when i use the PJAX to load the PHP file, the entire page refreshes. I would assume it's something wrong with my PJAX code, but loading a plain HTML file works fine.
EDIT: In case it is of help, i'm currently running all this on WAMP Server 2.2 running on localhost. It's what i do all my dev stuff in.
for reference, here's the JS i'm using to load the content, and an example of a php page
JS:
if ( $.support.pjax ) {
//disable <a> tabs, store value of href so pjax can use it
$('header a').each(function () {
$(this)
.attr('pjax', $(this).attr('href'))
.removeAttr('href')
.css('cursor','pointer')
})
//link up the pjax
.live('click', function () {
var link = $(this)
$('#content').animate({opacity:0}, {duration:500, complete:function(){
$.pjax({
url: link.attr('pjax'),
container: '#content',
complete: function() {
$('#content').animate({opacity:1}, 500);
}
});
}});
});
}
PHP:
//header.php
<?php
//If we are loading with pjax, ignore the header
if (!isset($_SERVER['X-PJAX'])) {
?>
<!-- head section, opening body tags, etc -->
<div role="main" id="content">
<?php } ?>
//foo.php
<?php include 'header.php'; ?>
<p>sample content</p>
<?php include 'footer.php'; ?>
//footer.php
<?php
if (!isset($_SERVER['X-PJAX'])) {
?>
</div>
<!-- load scripts, etc-->
<?php } ?>
i always have more luck with just using
$_SERVER["HTTP_X_PJAX"]
Here is the github repo i made of a fully functional PJAX php example, for those that need all the source code to look at to get up and running, and may help anyone else out there searching for PJAX php inplementation
https://github.com/Jrizzi1/pjaxphp
Related
I'm developing a Wordpress video plugin. I want the video to start loading AFTER the rest of the page has loaded. I have:
Created videosplash.php which contains code to create a div #video-splash.
Created videosplash-video.php which contains code for loading the video itself. This code works perfectly when it is included directly within the above DIV.
Attempted to use jquery bind the second PHP file to div #video-splash with directions for this to happen AFTER the rest of the page has loaded.
Both PHP files are within the same plugin directory.
I've tried the following ways of doing this with no luck; and I can't find any clarification of the matter by searching online.
Attempted Method 1
As a JS script normally calls things from whatever directory it is running from, I would have thought this should work - but it doesn't:
<script type="text/javascript">
$(window).bind("load", function() {
$('#video-splash').load('videosplash-video.php');
});
</script>
Attempted Method 2
I've also tried this way to load the file dynamically, but I don't think the plugins_url is a valid means of calling the file in javascript:
<script type="text/javascript">
$(window).bind("load", function() {
$('#video-splash').load( plugins_url('/assets/php/videosplash-video.php',__FILE__ ) );
});
</script>
and
<script type="text/javascript">
$(window).bind("load", function() {
$('#video-splash').load( plugins_url('/videosplash-video.php',__FILE__ ) );
});
</script>
What am I missing folks? And thank you in advance
You cannot include wordpress plugins url via javascript,
one thing you can do, first hide the video div by giving the style="display:none", then on load you can make it display:block using javascript
for example consider this following is your video div,
<div id="video-splash" style="display:none;">
some video content inside
</div>
then use javascript to enable it after page load like this,
$(document).on("load", function() {
$('#video-splash').show();
});
I use google charts js library in only one page in my project and I have external and global head and footer. head tags are in head.php file and required js libraries are included in there. Anatomy of my pages are like this:
<?php
require('header.php');
?>
<div>my body elements of this page lie here </div>
<?php
require('footer.php');
?>
I can include google charts library in header.php. It will be loaded in every page, but I need it in only one page. So, I do not want to make the loading progress slow. How can I include that library only if I am loading this particular page? Is it possible? Thanks in advance.
Simply add a variable before you include the header, and check for that variable within header.php
<?php
//page that requires the js
$chartjs = true;
require('header.php');
?>
<div>my body elements of this page lie here </div>
<?php
require('footer.php');
?>
.
<?php
//header.php
if(isset($chartjs) && $chartjs){
//inlcude js file here
}
Alternatively, You could load it conditionally via JavaScript depending on the context of the page, I'll use jQuery here for ease of use with the Ajax side of it, so for example:
Page Body:
<div class="chart"></div>
Header.php
<script>
var $charts = $('.chart');
if ( $charts.length ) {
$.getScript("charts.js", function(){
$charts.plot(); //init.
});
}
</script>
This will delay the loading of the chart however though. Also, for reference how to load without the jQuery library, see Load scripts after page has loaded? for some good references on post-page load scripts.
Reference $.getScript
You have several options. One is what Steve recommended in his answer.
I'd like to use this in chart page:
require('header.php');
?>
<script type="text/javascript" src="chart.js"></script>
<div>my body elements of this page lie here </div>
<?php
require('footer.php');
The other is to check the $_SERVER["REQUEST_URI"], and include only in header, it this is the specified page.
<?php include('header.php'); ?>
<div data-role="page" data-theme="a" id="site-wrapper">
//Here I want to keep appending the information without having to include
//header and footer files in every external page
</div>
<?php include('footer.php'); ?>
Here's where you first land when entering the site:
<div data-role="main">
<div class="center-wrapper" id="landing-container">
<h2>Välkommen</h2>
<p><b>Befintlig användare?</b></p>
Logga in
<p><b>Ny användare?</b></p>
Registrera dig
</div>
</div>
Now if I click on "registrera dig" (register) I want to grab the contents of the file and append it to the #site-wrapper div above. As it works now it grabs the contents and loads a new page without the header and footer files being included since I don't have them as includes in the file. From my understanding I thought that Jquery Mobile would do this automatically but it doesn't, do I have to manually make an ajax call with Jquery and then append the content to the div or is there a way to make this happen automatically using already built-in Jquery Mobile functions? Haven't been able to find an answer from my searches so hopefully I can get one here.
You need AJAX to achieve this.
$( "#site-wrapper" ).load( "folder/page.html", function() {
// Callback function
});
This snipped would solve your problem. Replace the url with your file!
I need to create an HTML header and footer file from my WordPress php. I need to provide these files for a third-party that builds the page for me. the basic layout is:
header.html
their content
footer.html
how can i dynamically create the header.html and footer.html?
If you don't think you are going to change your theme any time soon, just save the source of one of the pages and then cut and paste.
Alternatively you could browse to whatever include file your template stores the header in and then do a view source save as header.html and likewise for the footer.
user JQuery to load the inc file into the body of the html page
<html>
<script src="path/to/jquery">...
...
<body>
loading include
</body>
<script>
$(document).ready(function($) {
$('body').load('path/to/include.php', function() {
/// do nothing
});
});
</script>
</html>
or even better still, I assume they will give you a page that has your header, their crap, your footer. If thats true
header...
<html>
...
<body>
<div id="their-crap">
footer...
</div>
</body>
</html>
and then where ever you want to put that data, do
<script>
$(document).ready(function($) {
$('selector-you-want').load('path/to/renderedpage#their-crap', function() {
/// do nothing
});
});
</script>
I have this anchor link in my index.php:
<a name="blog"></a>
I would like this anchor link to work When next_posts_link and previous_posts_link are clicked on so it doesn't go all the way to the top of the page. I have no idea how to go about doing this for WordPress pagination though.
Here is my code for the pagination:
<div class="pagenavi">
<?php if( function_exists( 'wp_pagenavi ' ) ) {
wp_pagenavi();
} else {
next_posts_link ('<div class="arrow-back"></div>'); }
previous_posts_link('<div class="arrow-forward"></div>') ; }
Solution 2:
Adding anchor tag #blog to the prev/next links in a blogpost using jQuery
<script type="text/javascript">
$(document).ready(function() {
$('.pagenavi a').each(function(i,a){$(a).attr('href',$(a).attr('href')+'#blog')});
});
</script>
Demo:
http://jsfiddle.net/mfeldheim/EkMfP/12/
unfortunately the wp_pagenavi function seems to encapsulate the complete link building.
If you can't configure a generic postfix in your wordpress or plugin configuration I don't recommend to change Wordpress code.
Instead you could execute a small JavaScript which moves the browser page to the anchor on load.
This example uses jQuery. Paste it into a bottom location of your template.
<script type="text/javascript">
$(document).ready(function() {
$('html, body').scrollTop(
$('[name="blog"]').offset().top
);
});
</script>
Couldn't test this but should work. Even simple scripts are the hell to write on a iPhone keyboard..
EDIT:
Works like a charm, check this out for a demo
http://jsfiddle.net/mfeldheim/EkMfP/7/