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

sethexis · 2008-04-16 03:50:56

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.

whaleen · 2008-04-16 08:29:10

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.

Bloke · 2008-04-16 09:17:15

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)

merz1 · 2008-04-16 16:54:54

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)

Bloke · 2008-04-16 17:58:04

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.

merz1 · 2008-04-16 21:36:17

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

Textpattern CMS

Textpattern CMS support forum

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

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

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

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

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

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

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

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

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

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

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

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

Board footer