calling a specific div on an external page

**oldmanInAz** · 06-06-2012, 01:08 AM

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.

**djr33** · 06-06-2012, 02:33 AM

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.

**jscheuer1** · 06-06-2012, 03:09 AM

That script doesn't really do that, try jQuery .load():

http://home.comcast.net/~jscheuer1/s...es-jq/demo.htm

demo.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>

table.htm:

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>

**oldmanInAz** · 06-06-2012, 03:11 AM

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.

**jscheuer1** · 06-06-2012, 03:12 AM

See my previous post in this thread.

**oldmanInAz** · 06-06-2012, 03:19 AM

Thanks John.
But I need that to function from a button link. Your version works locally. Which is what I need.

**jscheuer1** · 06-06-2012, 03:22 AM

Show me the button.

**oldmanInAz** · 06-06-2012, 03:29 AM

Nothing more than the standard button tag for html.

Code:

<button>button button who's got the button?</button>

**jscheuer1** · 06-06-2012, 03:34 AM

OK, but how do I know which table it's supposed to summon? Is there one button for each table?

**oldmanInAz** · 06-06-2012, 03:42 AM

Yes. Button1 calls table1 and button2 calls table2 and so on.

Thread: calling a specific div on an external page

Thread Tools

Search Thread

calling a specific div on an external page

Bookmarks

Bookmarks

Posting Permissions