Using AJAX on my TextPattern site as easy as 1-2-3?

LeeStewart · 2009-02-18 20:56:08

I looked through the Forum (and elsewhere) – there seems to be a bunch of different ways to handle Ajax with Textpattern. I tested a few of the suggestions I came across and finally put something together that works pretty well. I thought I’d put an overview here to see if anyone has opinions.

My website with the test code is on RandomOddness. When you go there you’ll see the loading delay that I put in for the right side column. Also clicking “About” will perform an ajax load of the new content.

You should note that I’m using jQuery – these basic steps should work fine for other tools:

1. New TextPattern page called “ajax”
Ajax requests are sent as a POST to this page, so the new page is basically a blob of PHP code that reads parameters and renders the output. I’ve included the actual code at the end of this post – it’s not very sophisticated. There’s plenty of room for enhancement, like adding parameters (number of articles to display, for example).

I’m probably going to make this a plugin – I don’t like adding PHP functionality this way.

2. Create a new Section called “ajax”.
The new section is needed so that all incoming requests can be routed to the right page. I’m using clean URLs and all Ajax requests get sent to my site as http://www.RandomOddness.com/ajax/ This section is hooked into a page called “ajax” (created in step 1).

3. Code to make an Ajax call.
First I included the jQuery library to the default page. It’s pretty straightforward, I’m using the latest release and the minified version. At some point I’ll be running with a copy from the Google code cache to help speed things up.

Now I can do an Ajax request. I use the standard mechanism for calling this JavaScript when the page is fully loaded:

$(document).ready(function() {
  $("#ajax_sidecol").hide().load("/ajax/", {section: 'sidecol', form: 'sidecol', action: 'article'}, function () {
    $('#ajax_sidecol').fadeIn('slow');
  });
});

Basically the load() call requests the Ajax page and the ‘sidecol’ section and ‘sidecol’ form are used to create a list of posts, format them, and send them to the browser. I’ve got a div tagged as #ajax_sidecol and the new data is faded in.

4. Other stuff.
That’s all it takes to get rolling with Ajax. I hooked up my navigation (which is more complicated than I care to admit).

I also created an lxs_ajax_link plugin to help me add Ajax calls where I need them, like submitting forms and such. Makes life easier than hand coding items all the time.

Last I modified my lxs_log plugin, which keeps track of all page hits and a ton of other stuff about user visits. This was modified to be smart enough to map any page requests to the “ajax” section into the section/form that was delivered.

<txp:php>
if (array_key_exists('debug', $_POST)) {
    echo '<h3>Things passed as POST parameters:</h3>';
    foreach ($_POST as $k=>$v) {
        echo "$k = $v<br />";
    }
    echo '<h3>DONE</h3>';
}

$ajax_action = array_key_exists('action', $_POST)? $_POST['action']: '';
if ($ajax_action == 'article') {
    $ajax_atts = array();

    if (array_key_exists('section', $_POST)) {
        $ajax_atts['section'] = $_POST['section'];
    }
    if (array_key_exists('form', $_POST)) {
        $ajax_atts['form'] = $_POST['form'];
    }
    if (array_key_exists('id', $_POST)) {
        $ajax_atts['id'] = $_POST['id'];
    }
    echo doArticles($ajax_atts, true);
}
</txp:php>

Let me know if you see anything that can be improved!

Lee

ikethepike · 2013-08-15 10:40:45

Thanks a lot, you are a savior! I was just wondering whether there is a simple way to limit the amount of posts?

etc · 2013-08-15 12:17:06

The debug part is an invitation to hack, you’d better delete it.

ikethepike · 2013-08-15 12:40:11

Awesome done, I have tried applying for loops and while loops but to no avail. I did succeed in printing out a solid 306 articles though.

etc · 2013-08-15 12:46:36

See doArticles code for available arguments (like limit and offset).

ikethepike · 2013-08-15 14:34:21

I am terribly sorry, but I just recently finished the codeacademy php course, and am very rusty at my PHP, especially integrating it into CMS. Where do I place the limit attribute?

etc · 2013-08-15 22:47:56

Try to set $ajax_atts['limit'] = 5 before doArticles call. Sorry for the delayed reply, I was on the road.

Textpattern CMS

Textpattern CMS support forum

#1 2009-02-18 20:56:08

Using AJAX on my TextPattern site as easy as 1-2-3?

#2 2013-08-15 10:40:45

Re: Using AJAX on my TextPattern site as easy as 1-2-3?

#3 2013-08-15 12:17:06

Re: Using AJAX on my TextPattern site as easy as 1-2-3?

#4 2013-08-15 12:40:11

Re: Using AJAX on my TextPattern site as easy as 1-2-3?

#5 2013-08-15 12:46:36

Re: Using AJAX on my TextPattern site as easy as 1-2-3?

#6 2013-08-15 14:34:21

Re: Using AJAX on my TextPattern site as easy as 1-2-3?

#7 2013-08-15 22:47:56

Re: Using AJAX on my TextPattern site as easy as 1-2-3?

Board footer