Using Ajax with Textpattern Articles

qp2wd · 2011-03-08 18:04:18

Often I find myself in a position where I’d like to create a portfolio/image gallery using articles rather than image list. That way, I can include in each image’s information using the more robust options available for articles and I won’t have to fuss with hand coding or trying to fit all the information into the limited content areas available for images in the textpattern interface.

The problem arises in switching between the different articles. I’d like it to be a seamless (non-refreshing) process as it would be when using a regular jquery slideshow or gallery, but the fact that each article is its own page means it’s going to refresh by default. After some research I discovered that other sites accomplish this using Ajax, but I’m not sure if this solution can be implemented with Textpattern— my knowledge of php and javascript are barely at novice level, and my knowledge of Ajax less than that.

In short, can Ajax be used to pull articles from the TXP database? Ideally I’d like to use a combination of the smd_gallery plugin and jquery to create the necessary images/animations and stick some Ajax in there to make all the content-generating magic happen. If this is possible, any suggestions as to how I could accomplish this would be greatly appreciated

Bloke · 2011-03-08 19:48:58

qp2wd wrote:

In short, can Ajax be used to pull articles from the TXP database?

Absolutely. You can either do it by hand using jQuery or you could get in touch with me as I have an unreleased plugin called smd_ajax which might help you.

It’s only unreleased because I haven’t documented it properly and it needs a few more features adding before I’m happy with it. But I’ve had it running on sites successfully and it’s fairly simple to set up once you get your head round it (I can help with that bit too!)

If you’d like to try it, drop me a line via my web site.

qp2wd · 2011-03-14 18:29:53

I’m trying to use it on a site I’m working on currently; unfortunately, it doesn’t seem to be having any effect. I’ve tried setting both a success function and a spinner to see if it’s activating. No dice. The tag is sitting outside of a div called “push”, inside of the container div. The tag I’m using is:

<txp:smd_ajax elem_from="#content" elem_to="#content" onsuccess="success" />

And here’s a live example.

Bloke · 2011-03-15 09:30:17

qp2wd wrote:

<txp:smd_ajax elem_from=”#content” elem_to=”#content” onsuccess=“success” />

Hmmm yeah I’ve noticed with the plugin that if you have the same from and to elements that it sometimes appears to do nothing. Quite why I’m not sure, but I think it has to do with the way the content is ‘appended’ to the element: if that element is not there because we’re replacing it at the same time then it just gets confused and gives up (or something) *shrug*

That’s why I suggest in the docs to have a wrapper div in your fetched content that is your data source and then set your destination as the inner container inside this wrapper. That seems to work best.

I really do need to figure out why it doesn’t work when the from and to are the same. Probably something really simple. It’s on the TODO list.

qp2wd · 2011-03-15 14:35:56

Bloke wrote:

Hmmm yeah I’ve noticed with the plugin that if you have the same from and to elements that it sometimes appears to do nothing. Quite why I’m not sure, but I think it has to do with the way the content is ‘appended’ to the element: if that element is not there because we’re replacing it at the same time then it just gets confused and gives up (or something) *shrug*

That’s why I suggest in the docs to have a wrapper div in your fetched content that is your data source and then set your destination as the inner container inside this wrapper. That seems to work best.

I’m a little confused about the block order. Originally my block order was this: #container > #push > section#content, with the smd_ajax tag sitting outside of #push, but inside of #container. Then I noticed in the docs that it specifically mentioned the IDs being referred to had to belong to divs. So I changed the order to #container > section#content > #ajax-container > #ajax-content, with smd_ajax sitting outside of section#content. I changed the code to this:

<txp:smd_ajax elem_from="#ajax-content" elem_to="#ajax-container" onsuccess="success" />

But it still doesn’t seem to be having an effect. It could be that it’s working and my success function is coded incorrectly. Currently, the success function is this:

<script>
function success() {
 alert('success');
    };
</script>

Any thoughts?

Last edited by qp2wd (2011-03-15 14:37:17)

Bloke · 2011-03-15 15:20:11

I can’t see the smd_ajax code on the page source in the link you posted earlier. It should have dumped a tonne of jQuery code to the page which controls how stuff is AJAXified. According to the tag trace, the plugin is being called but it’s not outputting anything. Which means it’s because you’re not supplying the trigger URL var ?smdajax=1 to start things off.

It seems counter-intuitive to do that (and I really need to fix the docs to give a better explanation, sorry!) but I had good reason.

See, you can use smd_ajax to ajaxify your entire site or just a bunch of sections. But once you’re in AJAX mode and are happily clicking away inside that section, retrieving articles etc, how would you get out of that mode in the event you wish to visit a particular article or deliver a particular piece of content that is NOT ajaxified? The way the plugin does that is by controlling whether the urlvar is present in an anchor or not.

In theory you can force links to break out of AJAX mode by omitting the ?smdajax=1 on the end, though I don’t know how well it works (manually setting it) as I’ve never had a need to do it: I’ve always used the include/exclude params to do it.

Anyway, the good news is that once you are in AJAX mode the plugin takes care of adding ?smdajax=1 automatically to all links that match your include/exclude attributes so you never need to worry about it. But you do need to feed it first with a link to kick it off.

If you were only AJAXifying one section you’d probably do that in your nav bar code by adding ?smdajax=1 to that particular section’s anchor. This has the proviso that you don’t link to articles directly from othe parts of your site, which would therefore not trigger ajax mode(!) But you can design around that if you so desired.

Ultimately, the best way I’ve found to handle this is to use urlvar="" (i.e. “AJAX my whole damn site”) and then use include and exclude to control which sections get AJAXed. That way you don’t need to worry about adding ?smdajax=1 at all, anywhere.

Still with me? Told you it was beta :-S

The upshot is I tried it on your site by manually adding ?smdajax=1 to the URL you gave me and it dutifully and beautifully works a treat… except… the images don’t cycle on AJAXed content. The reason is because the cycle script needs to be triggered on each AJAX load to read in the new list of images.

I would hazard a guess that the best way to do this is to take the cycle code out of the $(document).ready(function() { ... } into its own function and simply call it once from within the ready() call. Then, your smd_ajax success function can call your cycle function directly after the page has been fetched from AJAX and the cycle should kick off properly.

Hope that helps but don’t hesitate to post back if you get stuck. I really need to make this thing easier to use! Its own power is stunting its usefulness.

qp2wd · 2011-03-15 17:03:19

Haha, that was it! The Ajax seems to be working now, as the URL is no longer changing when I click a link. But…

It’s throwing out a “this tag cannot be used outside an article context” error. I’m guessing it has something to do with the way it pulls the content from the ajax-content div? Or I’ve just done something wrong again. Probably the latter. It’s also still not calling the success function, (as you suggested, I moved jquery cycle into its own function outside of the $(document).ready(function() { ... }) but I’m going to assume that that’s an issue that will disappear when I figure out why it’s giving me the article context error.

Thank you so much for your help so far!

Bloke · 2011-03-15 19:12:22

qp2wd wrote:

It’s throwing out a “this tag cannot be used outside an article context” error.

Ah yes, that’s stupidity on my part. It’s trying to get the permlink of the page but non-articles don’t have permlinks and you’re putting the tag on a section landing page. I think an older version of the plugin made those links manually (without resorting to permlink) which was probably the correct way to go. Can’t for the life of me think why I changed it. Probably too much wine one night.

It’s also still not calling the success function

I’ll see if I can run it here and get back to you. Must admit I don’t remember testing it to destruction.

qp2wd · 2011-03-16 14:00:06

It worked! The error message is gone, and the brackets are exactly what was missing from my success call. (For anyone else reading this at a later date, it should look like onsuccess="function()" You’re brilliant, sir. :)

qp2wd · 2011-03-16 20:52:32

In troubleshooting a problem bit of script elsewhere on my page, the folks at StackOverflow uncovered two issues in the smd_ajax code that, when edited, got my script working beautifully— but I’m not sure if it’s hurting something elsewhere in the plugin. Here are the edits that I ended up making, per their recommendations:

if ((site_url.indexOf(url.host) >= 0) && (bindit == true)) {
                   smd_ajax.spinit(1); //HERE 1st Edit.
                   jQuery(this).unbind();
                   smd_ajax.grab(this.href);
                   //return false; //HERE 2nd Edit. 
                   }

Edit #1 was to add the missing semicolon at the end of smd_ajax.spinit(1)
Edit #2 was because return false was disabling the click events in my script.

Hopefully I haven’t turned smd_ajax into a simmering volcano.

Bloke · 2011-03-16 21:29:11

qp2wd wrote:

Edit #1 was to add the missing semicolon at the end of smd_ajax.spinit(1)

Oops, stupid schoolboy error.

Edit #2 was because return false was disabling the click events in my script.

That’s probably fair too, but in my dim and dusty memory banks I recall the point of returning false was precisely to prevent the default click action. We’ve unbound its existing action (Go To This URL) and rebound it with (Fetch This URL Via AJAX) so I figured to be on the safe side I’ll return false to make sure. I guess it’s superfluous since the original event has already been unbound.

Can I ask what the issue was with the script on your page (I can’t find the StackOverflow question)? I have a suspicion that the way the plugin operates with regards scripts is sub-optimal anyway. It was done this way as a throwback to an earlier version of jQuery which made the page hang in IE when scripts were in the returned data stream. I think that’s no longer the case so it may be that I can do something about it elsewhere, which might make the plugin work better overall.

jQuery has a fantastic method called .load() which does truckloads of stuff for me and can simplify the code: most of my twiffling was to replicate what load() did because it was broken in IE when I wrote the plugin years ago (plus I knew far less about jQuery than I do now).

Last edited by Bloke (2011-03-16 21:31:13)

ajw-art · 2011-03-16 23:09:10

(Checking in from my home account, as the other one is for work)

It was this one. The script in question is meant to expand the width of #content when one of the thumbnails is clicked, and shrink it back again when “Back” is clicked. It’s sort-of working now in that the desired animations are executing, but clicking “back” isn’t doing what I want it to do. I foresee more scouring of the Jquery doc in my future.

Textpattern CMS

Textpattern CMS support forum

#1 2011-03-08 18:04:18

Using Ajax with Textpattern Articles

#2 2011-03-08 19:48:58

Re: Using Ajax with Textpattern Articles

#3 2011-03-14 18:29:53

Re: Using Ajax with Textpattern Articles

#4 2011-03-15 09:30:17

Re: Using Ajax with Textpattern Articles

#5 2011-03-15 14:35:56

Re: Using Ajax with Textpattern Articles

#6 2011-03-15 15:20:11

Re: Using Ajax with Textpattern Articles

#7 2011-03-15 17:03:19

Re: Using Ajax with Textpattern Articles

#8 2011-03-15 19:12:22

Re: Using Ajax with Textpattern Articles

#9 2011-03-16 14:00:06

Re: Using Ajax with Textpattern Articles

#10 2011-03-16 20:52:32

Re: Using Ajax with Textpattern Articles

#11 2011-03-16 21:29:11

Re: Using Ajax with Textpattern Articles

#12 2011-03-16 23:09:10

Re: Using Ajax with Textpattern Articles

Board footer