Apologies for the huge post!
I am having trouble with ajax right now on my site:
(This site is only a first draft and has a few nav problems with the flash - will sort it soon)
My main problem is I have an Ajax code on the index page that loads content into a div.
(this works real good!)
but...
when I click a button and load the content into the div I now want to click links inside that div and reload new content into the same div.
I have tried many times and just do not know if it is possible to access the index page's ajax code from the div content.
Anyone have any ideas?
here is some code if it helps:
================================================== =========
Index page:
================================================== =========
http://www.cuzner.co.uk
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!--<html xmlns="http://www.w3.org/1999/xhtml">-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>darren@cuzner.co.uk</title>
<link rel="stylesheet" type="text/css" href="css/mainpage.css">
<link rel="stylesheet" type="text/css" href="/shadowbox/shadowbox.css">
<link rel="stylesheet" type="text/css" href="css/contentpage.css">
<link rel="stylesheet" type="text/css" href="css/contentpage-gallery.css">
<style>
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript">
var flashvars = (false)
var params = {
wmode: "transparent"
};
var attributes = (false)
swfobject.embedSWF("flash/hexagonMainNavTall.swf", "navleft", "250", "600", "9.0.0", "expressInstall.swf", flashvars, params, attributes);
</script>
<script type="text/javascript" src="shadowbox/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
players: ["img","swf","flv","qt","wmv","iframe"]
});
</script>
<script type="text/javascript">
/***********************************************
* Dynamic Ajax Content- © Dynamic Drive DHTML code library ([url]www.dynamicdrive.com[/url])
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at [url]http://www.dynamicdrive.com/[/url] for full source code
***********************************************/
var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""
function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}
function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=pag e_request.responseText;
Shadowbox.setup();
}
function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appe ndChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}
</script>
<script type="text/javascript">
function loadGalleryAnims() {
ajaxpage('pages/gallery-anims.htm', 'content');
}
function loadGalleryRenders() {
ajaxpage('pages/gallery-renders.htm', 'content');
}
function loadGallery3Dmodels() {
ajaxpage('pages/gallery-3dmodels.htm', 'content');
}
function loadGalleryProjects() {
ajaxpage('pages/gallery-projects.htm', 'content');
}
function loadInfoCV() {
ajaxpage('pages/info-cv.htm', 'content');
}
function loadInfoContacts() {
ajaxpage('pages/info-contact.htm', 'content');
}
function loadHistoryProjectPast() {
ajaxpage('pages/history-pastprojects.htm', 'content');
}
function loadHistoryProjectCurrent() {
ajaxpage('pages/history-currentprojects.htm', 'content');
}
function loadPersonalTutorial() {
ajaxpage('pages/personal-tutorials.htm', 'content');
}
function loadPersonalLinks() {
ajaxpage('pages/personal-links.htm', 'content');
}
function loadPersonalArt() {
ajaxpage('pages/personal-art.htm', 'content');
}
</script>
</head>
<body onload="ajaxpage('pages/info-cv.htm', 'content')">
<div id="container">
<div id="navleft"></div>
<div id="top">
<h1>D.Cuzner</h1>
<h2>[Designer | Modeller | Animator]</h2>
</div>
<div id="content"></div>
<div id="navbottom">
<p><a href="mailto:darren@cuzner.co.uk">darren@cuzner.co .uk</a> | 07877 095 651</p>
</div>
</div>
</body>
</html>================================================== ================
Example content in div:
================================================== ================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="../css/contentpage.css">
</head>
<body>
<div id="itemcontainer">
<div id="titlebar">
<h1>history : past projects</h1>
</div>
<div id="item" >
<div id="image" class="image"><a href="pages/history-pastprojects-bwcup2008.htm" target="_blank" >
<img src="../images/history/lunchtime-s.jpg" alt="blender world cup 2008" width="150" height="150" /></a> </div>
<div id="info">
<h2><a href="pages/history-pastprojects-bwcup2008.htm" target="_blank">blender world cup 2008</a></h2>
<p>Global community 3d art competition I decided to enter.<br />
Created all work using only <a href="http://www.blender.org">Blender</a> and <a href="http://www.gimp.org">Gimp</a>. Entered it purely for fun.<br />
<br />
<br />
<br />
</p>
</div>
</div>
<div id="item" >
<div id="image" class="image"><a href="pages/history-pastprojects-milestones.htm" target="_blank" ><img src="../images/history/milstones-planningbig-s.jpg" alt="milestones museum project" width="150" height="150" /></a></div>
<div id="info">
<h2><a href="pages/history-pastprojects-milestones.htm">milestones museum</a></h2>
<p>A millennium art award funded community project located at the <br />
Milestones museum in Basingstoke.
<br />
<br />
<br />
<br />
</p>
</div>
</div>
<div id="item" >
<div id="image" class="image"><a href="pages/history-pastprojects-viables.htm" target="_blank">
<img src="../images/history/viables001-s.jpg" alt="viables underpass design" width="150" height="150" /></a> </div>
<div id="info">
<h2><a href="pages/history-pastprojects-viables.htm">viables underpasses</a></h2>
<p><a href="http://www.seeda.co.uk/news_&_events/press_releases/2005/20050623.asp">Seeda award winner 2006 artist of the year.</a><br />
A proposed community based project to enhance a public area of Basingstoke that was vandalised with heavy fire damage.
<br />
<br />
<br />
</p>
</div>
</div>
<div id="item" >
<div id="image" class="image"><a href="pages/history-pastprojects-wingchun.htm" target="_blank">
<img src="../images/history/weblexi1-s.jpg" alt="wing chun DVD series" width="150" height="150" /></a> </div>
<div id="info">
<h2><a href="pages/history-pastprojects-wingchun.htm">wing chun dvd</a></h2>
<p>Worked with martial artist to produce a series of training dvd's and a web shop.<br />
<br>
<br>
<br />
<br />
<br />
</p>
</div>
</div>
<div id="item" >
<div id="image" class="image"><a href="pages/history-pastprojects-education.htm" target="_blank" >
<img src="../images/history/education2june012005bleed-s.jpg" alt="the education - electro punk band" width="150" height="150" /></a> </div>
<div id="info">
<h2><a href="pages/history-pastprojects-education.htm" target="_blank">the education</a></h2>
<p>Approached by a london based group to create gig material and produce music and video samples.<br />
<br />
<br />
<br />
<br />
</p>
</div>
</div>
<div id="item" >
<div id="image" class="image"><a href="pages/history-pastprojects-webvarious.htm" target="_blank" >
<img src="../images/history/webpropa1-s.jpg" alt="various websites" width="150" height="150" /></a> </div>
<div id="info">
<h2><a href="pages/history-pastprojects-webvarious.htm" target="_blank" >various websites</a></h2>
<p>Worked on various bespoke websites closely with clients over the years.<br />
The clients owned and maintained the hosting.
<br />
<br />
<br />
</p>
</div>
</div>
</div>
</body>
</html>Appologies for the huge post!