Printable View
Dynamic Ajax Content
http://www.dynamicdrive.com/dynamici...jaxcontent.htm
I have 20 tables that are rather small. Rather than having 20 pages, I'd much rather have 1 page and 20 divisions.
If it is possible, how would I go about calling a specific table on that single page?
If not possible, could one of you fine scholars of scripting make it possible?
I really do not want 10,000 little files to keep track of.
Thanks.
There are two options for this:
1. Use one of the "tabs" scripts offered here. But not one with Ajax. The entire purpose of Ajax is to load multiple external files, so that's something you'd want to avoid in this case.
2. Use a serverside language like PHP (or ASP, CGI, Perl, etc.) to selectively display one item or another based on a variable in the URL (like page.php?item=5).
(1) is a little smoother arguably, but it relies on Javascript so it won't necessarily work for everyone (some people might have JS disabled) and search engines could have difficulty seeing it, potentially. (2) requires the ability to use a serverside language, but it would then work in every case because it would be one file on the server but actually effectively serving 20 different pages-- to the user's computer, it would be like 20 separate pages. So it's your choice about which one sounds better. (1) is probably harder to code than (2) [assuming you know PHP and JS equally well], but because there are scripts already available for (1) they're about equal then.
That script doesn't really do that, try jQuery .load():
http://home.comcast.net/~jscheuer1/s...es-jq/demo.htm
demo.htm:
table.htm:Code:<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
$('#tableselect').change(function(){
$('#resultarea').load('table.htm #table_' + this.options.selectedIndex);
}).trigger('change');
});
</script>
</head>
<body>
Choose Table: <select id="tableselect">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select>
<div id="resultarea"></div>
</body>
</html>
Code:<div>
<table id="table_0">
<tr>
<td>Table #1</td>
</tr>
</table>
<table id="table_1">
<tr>
<td>Table #2</td>
</tr>
</table>
<table id="table_2">
<tr>
<td>Table #3</td>
</tr>
</table>
<table id="table_3">
<tr>
<td>Table #4</td>
</tr>
</table>
<table id="table_4">
<tr>
<td>Table #5</td>
</tr>
</table>
<table id="table_5">
<tr>
<td>Table #6</td>
</tr>
</table>
<table id="table_6">
<tr>
<td>Table #7</td>
</tr>
</table>
<table id="table_7">
<tr>
<td>Table #8</td>
</tr>
</table>
<table id="table_8">
<tr>
<td>Table #9</td>
</tr>
</table>
<table id="table_9">
<tr>
<td>Table #10</td>
</tr>
</table>
</div>
Thanks for the info.
http://1littleworld.net/test/test1.html
Someone else wrote this and I like it. Problem is, it won't work locally for me.
Due to the nature of the ajax part I guess, it needs to be on a server.
No big deal. But I would like to see it work locally as well.
See my previous post in this thread.
Thanks John.
But I need that to function from a button link. Your version works locally. Which is what I need.
Show me the button.
Nothing more than the standard button tag for html.
Code:<button>button button who's got the button?</button>
OK, but how do I know which table it's supposed to summon? Is there one button for each table?
Yes. Button1 calls table1 and button2 calls table2 and so on.
Use the same page for table.htm. New demo:
http://home.comcast.net/~jscheuer1/s...mo_buttons.htm
demo_buttons.htm:
Code:<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
var $buttons = $('#tableselect button');
$buttons.click(function(){
$('#resultarea').load('table.htm #table_' + $buttons.index(this));
}).eq(0).trigger('click');
});
</script>
</head>
<body>
Choose Table:
<div id="tableselect">
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button>7</button>
<button>8</button>
<button>9</button>
<button>10</button>
</div>
<div id="resultarea"></div>
</body>
</html>
Thanks again. That is just what I need.
I will post a working model tomorrow.
Here's a version with persistence (a cookie):
http://home.comcast.net/~jscheuer1/s...ons_cookie.htm
demo_buttons_cookie.htm:
Refresh the page after choosing a different table.Code:<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
var cook = {
set: function(n, v, d){ // cook.set takes (name, value, optional_persist_days) - defaults to session if no days specified
if(d){var dt = new Date();
dt.setDate(dt.getDate() + d);
d = '; expires=' + dt.toGMTString();}
document.cookie = n + '=' + escape(v) + (d || '') + '; path=/';
},
get: function(n){ // cook.get takes (name)
var c = document.cookie.match('(^|;)\x20*' + n + '=([^;]*)');
return c? unescape(c[2]) : null;
}
},
$buttons = $('#tableselect button'), i;
$buttons.click(function(){
$('#resultarea').load('table.htm #table_' + (i = $buttons.index(this)));
cook.set('tableselected', i);
}).eq(cook.get('tableselected') || 0).trigger('click');
});
</script>
</head>
<body>
Choose Table:
<div id="tableselect">
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button>7</button>
<button>8</button>
<button>9</button>
<button>10</button>
<input type="hidden" value="0">
</div>
<div id="resultarea"></div>
</body>
</html>
I have need of a script that will do the following:
You are on a page named index.html.
You see a link and click on it.
Instead of being taken to that page, the item comes to you.
Let's say on page1.html I have 3 items.
Link1 calls up only item1 on page1.
Link2 calls up only item2 on page1.
Link3 calls up only item3 on page1.
DD has several fine scripts that I could use.
I do like the new sidepanel script the most.
As they are written, you need a single page for each item.
Using the DD approach, I would need 3 seperate pages.
Why? What's wrong with having only one page and 3 items on that page?
I really don't want to write 1,000 seperate pages when a handfull would do the same job.
you need to explain a bit more.I have no idea what you are trying to ask.
At least give us a link to one of the pages you are talking about
You could do this in four ways.
Option 1 - Each link triggers a javascript function to hide all the other content and only display what you want it too (Disadvage being if they have no javascript, nothing would work).
Option 2 - You could use a get variable on the page (http://www.example.com/index.php?includePage=pathtopapgetoinclude.php) then just use include (a php function) to include that page. You'd have to reload the page each time though, and you'd need php.
Option 3 - Use php and ajax to get the contents of the page and then display it. You wouldn't need to reload the page and if they have javascript disabled, you can just give them a link to the page instead. You'd need php.
Option 4 - You could use javascript to change the src attribute on an iframe. If javascript is disabled, just give them a link to the page. You wouldn't need php, but you'd have to be willing to put up with the iframe
Do you have php at your disposal?
Does this have to be 100% compatible with every browser (javascript)?
If you answer those, we could probably suggest the best method for you!
http://1littleworld.net/test/1960/sidepanel.html
When a link is clicked, the sidepanel displays.
But shows all the tables on that page. I only want the related table for that link to display.
The page for the sctusl table is:
http://1littleworld.net/test/1960/table.htm
.
oldmanInAz - When asking about a Dynamic Drive Script, please post in the Dynamic Drive scripts help area and include a link to the script. I've moved this thread there and merged it with another similar thread of yours.
I'm assuming you mean:
http://www.dynamicdrive.com/dynamici...xsidepanel.htm
If so, with a small modification to that script (using a text only editor like NotePad, around line #49 change the highlighted line):
to:Code:if (loadtype == "iframe"){
ddajaxsidepanel.$contentarea.html('<iframe src="javascript:false" style="border:0; margin:0; padding:0; width:100%; height:100%"></iframe>')
ddajaxsidepanel.$contentarea.find('iframe:eq(0)').attr('src', url)
}
else{
ddajaxsidepanel.$contentarea.load(url)
}
}
},
This will allow you to specify an id selector separated by a space as part of the href:Code:ddajaxsidepanel.$contentarea.load(unescape(url))
for example would become (notice the added space, and no space (only a comma) between the two selectors these are both important points):Code:<a href="table.htm" rel="ajaxpanel">Running Gun</a>
Important Note: This will only work with AJAX imports, not with theCode:<a href="table.htm#table_0,#table_1" rel="ajaxpanel">Running Gun</a>
data-loadtype="iframe"type links. And the script code in the head of table.htm:
will not be brought over because only the table you've selected gets imported. You could put that script in the head of the 'top' page (sidepanel.html) though. That way it should be available to the content you're importing, at least in theory. If not we can make other arrangements for that part. But it might not be needed, it looks like the audio player object loads just fine without that script. I can't see how, but it looks like it is.Code:<script type="text/javascript" src="js/audio-player.js"></script>
<script type="text/javascript">
AudioPlayer.setup("player/player.swf", {
width: 350,
initialvolume: 100
});
</script>
Edit: In local testing, using this method appears not to work with the Flash audio. I have a solution that works with it, but it's a bit complicated. I'll see if it can be simplified and, either way post it here soon.
But, if thepage is live, it might work simply by placing the script on the 'top' page as mentioned, try that and see. Because if that works, it's much easier that way.