0

I'm currently building a single page style site that loads all content through AJAX, but will degrade back to a standard page load if javascript isn't present.

I have done AJAX loading in the past through wordpress so know my way around it. However I haven't loaded in the contents of an entire page before.

What I'm wanting to do is:

  1. Hijack clicks to internal URLs and AJAX load the content of their urls into a main content div.

  2. I'll wrap the header/footer/sidebars in my post/page template files in a function to check if the load request was made by ajax. If it was it will not echo those in the file.

To do this I need to know how to get the html content of a url in my functions.php. After hours of searching I can't find anything that will let me do it. All the things I've relate to echoing out small portions of the content and not then entire page HTML.

It would be great if someone could point me in the right direction!

Cheers

Improve this question

2 Answers 2

Reset to default
1

An AJAX request is a request from a client like any other request. Just request the URL like normal, but with Javascript. As far as that goes, this should be simple. If you've done item #2-- "I'll wrap the header/footer/sidebars..."-- correctly there should be no problem except that page specific functions won't run. That is going to be the problem you have to tackle. I can see it being a problem in a number of circumstances.

Say you have something hooked to wp_head that only executes, and needs to execute, when a specific theme template loads. In your system that would work only if the initial page load is for that template. If you load some other page and then load the template over AJAX, functions hooked to wp_head, or to any conditionally executed hooks`, will not run.

Your AJAX callback is going to have to process a number of hooks-- wp_header, wp_head, wp_footer... I am sure there are more. It could get complicated.

Improve this answer
7
  • Thanks. I was under the impression that all Ajax calls should be done through admin-ajax.php though? That's why I'm not looking for a function to pull through the HTML of a page/post in my functions.php
    – Rob Leach
    Commented Aug 27, 2013 at 15:09
  • Nearly all :) If you are loading the whole page you may as well just load the whole page. It doesn't make sense to pipe it through the AJAX API. If you were only loading part of the page, then yes you'd want the AJAX API and that may be the ultimate solution but with a lot of careful thought and refactoring of pretty much everything you are thinking about doing to make it work.
    – s_ha_dum
    Commented Aug 27, 2013 at 15:16
  • I've just implemented the entire page load method (really easy compared to piping it through). I'm worried about these complications that you mention in terms of hooks. Any advice for what I need to look out for? I'm trying to think of where I may need hooks for specific pages.
    – Rob Leach
    Commented Aug 27, 2013 at 15:19
  • 1
    What you are doing is complicated. Honestly, I tempted to vote to close as "too broad" or even "primarily opinion based". And I do not have time to work out the details. Maybe someone else will. @g-m is on a roll right now :)
    – s_ha_dum
    Commented Aug 27, 2013 at 15:25
  • 1
    @RobLeach, I think s_ha_dum intend that having a look here should help you.
    – gmazzap
    Commented Aug 28, 2013 at 2:02
0

Have you tried HTML5 history API?

http://html5doctor.com/history-api/

As far as the AJAX, I just use the jQuery .load() method, pull in the url, and select an id to bring in.

Lets say your main page has HTML that looks like this:

<body>
  <header><h1>Site Title</h1></header>
  <a class="trigger" href="#">Load Ajax</a>
  <section id="ajaxBin">
    <p>Content of the section</p>
  </section>
</body>

Then on the page you will load with AJAX, you have the following HTML: enter code here

<body>
  <header><h1>Site Title</h1></header>
  <aside id="sidebar">
    <h2>Sidebar Info</h2>
    <p>This is content that should not load</p>
  </aside>

  <section id="container">
    <p>All of the content you want to load with AJAX</p>
  </section>

</body>

So if all of your content is within the '#containter' element on the page you wish to load with ajax, you can do this:

var hrefVariable = $(this).attr('href')+'#container';

jQuery('body').on('click', 'a.trigger', function(e){
  // prevent link from doing it's thang
  e.preventDefault();
  // load specific content from an element within a new url into current pages element (#ajaxBin) 
  jQuery('#ajaxBin').load(hrefVariable, callbackFunction);
});

This can save you from having to write extra templates, as you can just arrange your HTML to be able to pull in the content that you want.

This is a good tutorial on that method.

Improve this answer
1
  • Thanks. I was going to use history.js to handle all the push state stuff for me. Thanks for the tutorial link, some good ideas in there.
    – Rob Leach
    Commented Aug 27, 2013 at 15:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.