Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#1 2008-04-16 03:50:56

sethexis
Member
Registered: 2008-04-16
Posts: 10

how do i dynamically change the content of a div container?

Hi. I’ve been looking around for some examples of how I can click a link on a page and get that click to load a new article into a div containing an existing article. I’ve used a PHP script on non-CMS sites to do it:

@<?php

$url = ‘includes/’;

$right = $_GET[‘right’]; if (!empty($right)) { $right = $url . $right .’.php’; include($right); } else {

include(‘includes/option1.php’); }
?>@

So, the default content of the div with id=“right” would be the content of option1.php
but if a user clicked a link for option2, it would set index.php?right=option2 and change the content.

Are there any tutorials or examples around that show how to use links in textpattern to make querries? I’ve seen the functionality on people’s sites in this thread, but I’m not sure where to look for an explanation of the concepts I need to look into to implement it.

Thanks. Sorry for the basic question.

Offline

#2 2008-04-16 08:29:10

whaleen
Member
From: Portland
Registered: 2006-05-11
Posts: 373
Website

Re: how do i dynamically change the content of a div container?

Look at jQuery examples. jQuery lives in /textpattern.jquery.js.

It’s a javascript library. It’s a light file of hand picked javascript that can pull of various thing when called to do so.

Look at this jQuery plugin to see how you can call a URL into a DIV. Each of your articles has a URL so you’ll be able to use this for your purpose. :)

I’d poke around in Javascript examples (all over the www) before using PHP but that’s just me. jquery comes packed withTXP so theoretically other TXP users are wise to it and should have examples… I do not.


txtstrap (Textpattern + Twitter Bootstrap + etc…)

Offline

#3 2008-04-16 09:17:15

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 11,449
Website GitHub

Re: how do i dynamically change the content of a div container?

I’ve written an AJAX plugin that will do just that. You can see the beta v1 in action at starstika.com. Every time you click any link it loads a new article into the centre frame without disturbing any content around the outside (which includes the music).

The trouble with the plugin — and the reason it’s not yet officially released — is that any other javascript in the articles is stripped out by jQuery to cater for stupid behaviour in Internet Explorer. I’ve tried time and again to get round it, and kind of managed to get it to work… in all browsers except IE which just hangs while it does, errr, I don’t know what.

Now, if your page has no other js in it, you’re welcome to be a guinea pig for v1 if it helps you, but it’s changed quite a bit in the latest (development) revision. Send me an e-mail if you want to try it out; just be aware there are no guarantees with it right now so ymmv.

Last edited by Bloke (2008-04-16 09:18:09)


The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.

Txp Builders – finely-crafted code, design and Txp

Online

#4 2008-04-16 16:54:54

merz1
Member
From: Hamburg
Registered: 2006-05-04
Posts: 994
Website

Re: how do i dynamically change the content of a div container?

Bloke Stef: “any other javascript in the articles is stripped out by jQuery to cater for stupid behaviour in Internet Explorer”

Ooops, even classical analytics JS calls. Really everything?

  • One of my projects in the pipeline is a kind of Yellow Book where I would like to call an article which is a clickable list which will call details about the clicked single business in a div.
  • The details would be stored in single articles.
  • The single article might contain text, objects (Google map, video), Javascript (Adsense).

Having a plug-in for that would shorten the pipeline immense (read: I would start :).

Bloke Stef: Just checked starstika.com. This comes pretty close. I like the double solution: 1st album 2nd album titles. Great work!

Last edited by merz1 (2008-04-16 16:58:19)


Get all online mentions of Textpattern via OPML subscription: TXP Info Sources: Textpattern RSS feeds as dynamic OPML

Offline

#5 2008-04-16 17:58:04

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 11,449
Website GitHub

Re: how do i dynamically change the content of a div container?

merz1 wrote:

“any other javascript in the articles is stripped out by jQuery…” even classical analytics JS calls. Really everything?

[ slightly OT ] : It seems so :-( I was using the otherwise awesome load() method to inject portions of an article into various spots on the page and couldn’t work out why some of my on-page js didn’t fire. I came across this line in the jQuery source code in the load function:

// inject the contents of the document in, removing the scripts
// to avoid any ‘Permission Denied’ errors in IE

So I tried to use the full ajax() method instead and found that, depending on the size of the article being fetched, IE would hang for sometimes over half a minute while it did something — I still don’t know what. But the strange thing is, I think it takes that long even if there is no js on the page! *shrug* perhaps it takes that long to generate the DOM nodes? I really can’t figure out why it’s doing what it does; I’m at the stage now where I’m going to put print_r statements inside jQuery itself to find out which part is causing the slowdown, then try and work around it.

Coupled with that, the other thing that is annoying me is not being able to use ‘Back’. Browsers cannot have their history changed programmatically for security reasons (a pain) and you cannot ‘catch’ the back event (double pain). But I’ve implemented a system that maintains internal ‘back’/‘forward’ links and allows you to put navigation buttons inside your pages for that purpose if you wish. Trouble is, it uses js that gets removed from the page :-(

Having a plug-in for that would shorten the pipeline immense (read: I would start :).

Hehehe, sounds interesting. If I get the plugin going any time soon, it’d be cool for someone to put it through its paces. I’ll shout on the forums if it gets close to being stable enough as a product.


The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.

Txp Builders – finely-crafted code, design and Txp

Online

#6 2008-04-16 21:36:17

merz1
Member
From: Hamburg
Registered: 2006-05-04
Posts: 994
Website

Re: how do i dynamically change the content of a div container?

I am ‘subscribed to this topic’ so shout out loud here first :)


Get all online mentions of Textpattern via OPML subscription: TXP Info Sources: Textpattern RSS feeds as dynamic OPML

Offline

Board footer

Powered by FluxBB