AJAX issues : accessing parent page

Question

cuzner 0 Newbie Poster

14 Years Ago

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>&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 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!

ajax javascript

Edited 14 Years Ago by peter_budo because: Keep It Organized - For easy readability, always wrap programming code within posts in [code] (code blocks).

3 Contributors
4 Replies
190 Views
4 Days Discussion Span
Latest Post 14 Years Ago Latest Post by Thirusha

All 4 Replies

Sagitarian 0 Newbie Poster

14 Years Ago

I am having the same issue and doing research, but have not gotten very far.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Thirusha 20 Posting Whiz · Answer 1 · 2009-10-12T15:13:58+00:00

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.

Yes it is possible, if your script is on the index page, it is also available to the new html that has just been loaded into your div.
Just call the same function that you did the first time you load content into the div.

cuzner 0 Newbie Poster · Answer 2 · 2009-10-13T04:46:59+00:00

Thanks Thirusha.
You were so very right. I tried that before and it did not work. (must have been calling the functions badly).
Worked through the errors and now works like a charm!

http://www.cuzner.co.uk

Thirusha 20 Posting Whiz · Answer 3 · 2009-10-13T13:39:30+00:00

Thirusha 20 Posting Whiz

14 Years Ago

My pleasure.

Please mark this thread as solved.

AJAX issues : accessing parent page

Recommended Answers Collapse Answers

All 4 Replies

Recommended Answers