JavaScript / DHTML / AJAX RSS JavaScript / DHTML / AJAX RSS

AJAX issues : accessing parent page

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Thread Solved

•
•
Join Date: Oct 2009
Posts: 2
Reputation: cuzner is an unknown quantity at this point 
Solved Threads: 0
cuzner cuzner is offline Offline
Newbie Poster

AJAX issues : accessing parent page

 
0
  #1
Oct 8th, 2009
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

html Syntax (Toggle Plain Text) 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  2. "http://www.w3.org/TR/html4/strict.dtd">
  3. <!--<html xmlns="http://www.w3.org/1999/xhtml">
  4. -->
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7. <title>darren@cuzner.co.uk</title>
  8.  
  9. <link rel="stylesheet" type="text/css" href="css/mainpage.css">
  10. <link rel="stylesheet" type="text/css" href="/shadowbox/shadowbox.css">
  11. <link rel="stylesheet" type="text/css" href="css/contentpage.css">
  12. <link rel="stylesheet" type="text/css" href="css/contentpage-gallery.css">
  13. <style>
  14.  
  15. </style>
  16.  
  17. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script> 
  18.  
  19.  
  20. <script type="text/javascript"> 
  21. var flashvars = (false)
  22. var params = {
  23. wmode: "transparent" 
  24. };
  25. var attributes = (false)
  26.  
  27. swfobject.embedSWF("flash/hexagonMainNavTall.swf", "navleft", "250", "600", "9.0.0", "expressInstall.swf", flashvars, params, attributes);
  28.  
  29. </script>
  30.  
  31. <script type="text/javascript" src="shadowbox/shadowbox.js"></script>
  32. <script type="text/javascript">
  33. Shadowbox.init({
  34. players:	 ["img","swf","flv","qt","wmv","iframe"]
  35. });
  36. </script>
  37.  
  38.  
  39.  
  40.  
  41. <script type="text/javascript">
  42.  
  43. /***********************************************
  44. * Dynamic Ajax Content- © Dynamic Drive DHTML code library ([url]www.dynamicdrive.com[/url])
  45. * This notice MUST stay intact for legal use
  46. * Visit Dynamic Drive at [url]http://www.dynamicdrive.com/[/url] for full source code
  47. ***********************************************/
  48.  
  49. var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
  50. var loadedobjects=""
  51. var rootdomain="http://"+window.location.hostname
  52. var bustcacheparameter=""
  53.  
  54. function ajaxpage(url, containerid){
  55. var page_request = false
  56. if (window.XMLHttpRequest) // if Mozilla, Safari etc
  57. page_request = new XMLHttpRequest()
  58. else if (window.ActiveXObject){ // if IE
  59. try {
  60. page_request = new ActiveXObject("Msxml2.XMLHTTP")
  61. } 
  62. catch (e){
  63. try{
  64. page_request = new ActiveXObject("Microsoft.XMLHTTP")
  65. }
  66. catch (e){}
  67. }
  68. }
  69. else
  70. return false
  71. page_request.onreadystatechange=function(){
  72. loadpage(page_request, containerid)
  73. }
  74. if (bustcachevar) //if bust caching of external page
  75. bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
  76. page_request.open('GET', url+bustcacheparameter, true)
  77. page_request.send(null)
  78. }
  79.  
  80. function loadpage(page_request, containerid){
  81. if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
  82. document.getElementById(containerid).innerHTML=pag e_request.responseText;
  83. Shadowbox.setup();
  84. }
  85.  
  86. function loadobjs(){
  87. if (!document.getElementById)
  88. return
  89. for (i=0; i<arguments.length; i++){
  90. var file=arguments[i]
  91. var fileref=""
  92. if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
  93. if (file.indexOf(".js")!=-1){ //If object is a js file
  94. fileref=document.createElement('script')
  95. fileref.setAttribute("type","text/javascript");
  96. fileref.setAttribute("src", file);
  97. }
  98. else if (file.indexOf(".css")!=-1){ //If object is a css file
  99. fileref=document.createElement("link")
  100. fileref.setAttribute("rel", "stylesheet");
  101. fileref.setAttribute("type", "text/css");
  102. fileref.setAttribute("href", file);
  103. }
  104. }
  105. if (fileref!=""){
  106. document.getElementsByTagName("head").item(0).appe ndChild(fileref)
  107. loadedobjects+=file+" " //Remember this object as being already added to page
  108. }
  109. }
  110. }
  111.  
  112. </script>
  113.  
  114.  
  115. <script type="text/javascript">
  116. function loadGalleryAnims() {
  117. ajaxpage('pages/gallery-anims.htm', 'content');
  118. }
  119. function loadGalleryRenders() {
  120. ajaxpage('pages/gallery-renders.htm', 'content');
  121. }
  122. function loadGallery3Dmodels() {
  123. ajaxpage('pages/gallery-3dmodels.htm', 'content');
  124. }
  125. function loadGalleryProjects() {
  126. ajaxpage('pages/gallery-projects.htm', 'content');
  127. }
  128. function loadInfoCV() {
  129. ajaxpage('pages/info-cv.htm', 'content');
  130. }
  131. function loadInfoContacts() {
  132. ajaxpage('pages/info-contact.htm', 'content');
  133. }
  134. function loadHistoryProjectPast() {
  135. ajaxpage('pages/history-pastprojects.htm', 'content');
  136. }
  137. function loadHistoryProjectCurrent() {
  138. ajaxpage('pages/history-currentprojects.htm', 'content');
  139. }
  140. function loadPersonalTutorial() {
  141. ajaxpage('pages/personal-tutorials.htm', 'content');
  142. }
  143. function loadPersonalLinks() {
  144. ajaxpage('pages/personal-links.htm', 'content');
  145. }
  146. function loadPersonalArt() {
  147. ajaxpage('pages/personal-art.htm', 'content');
  148. }
  149.  
  150. </script>
  151.  
  152. </head>
  153.  
  154. <body onload="ajaxpage('pages/info-cv.htm', 'content')">
  155.  
  156. <div id="container">
  157. <div id="navleft"></div>
  158. <div id="top">
  159. <h1>D.Cuzner</h1>
  160. <h2>[Designer | Modeller | Animator]</h2>
  161. </div>
  162.  
  163. <div id="content"></div>
  164. <div id="navbottom">
  165. <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>
  166. </div>
  167. </div>
  168. </body>
  169. </html>


================================================== ================
Example content in div:
================================================== ================
html Syntax (Toggle Plain Text) 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2. "http://www.w3.org/TR/html4/strict.dtd">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Untitled Document</title>
  6. <link rel="stylesheet" type="text/css" href="../css/contentpage.css">
  7.  
  8.  
  9. </head>
  10.  
  11. <body>
  12. <div id="itemcontainer">
  13. <div id="titlebar">
  14. <h1>history : past projects</h1>
  15. </div>
  16. <div id="item" >
  17. <div id="image" class="image"><a href="pages/history-pastprojects-bwcup2008.htm" target="_blank" >
  18. <img src="../images/history/lunchtime-s.jpg" alt="blender world cup 2008" width="150" height="150" /></a> </div> 
  19. <div id="info">
  20. <h2><a href="pages/history-pastprojects-bwcup2008.htm" target="_blank">blender world cup 2008</a></h2>
  21. <p>Global community 3d art competition I decided to enter.<br />
  22. 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 />
  23. <br />
  24. <br />
  25. <br />
  26. </p>
  27. </div>
  28. </div>
  29. <div id="item" >
  30. <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>
  31. <div id="info">
  32. <h2><a href="pages/history-pastprojects-milestones.htm">milestones museum</a></h2>
  33. <p>A millennium art award funded community project located at the <br />
  34. Milestones museum in Basingstoke.
  35. <br />
  36. <br />
  37. <br />
  38. <br />
  39. </p>
  40. </div>
  41. </div>
  42. <div id="item" >
  43. <div id="image" class="image"><a href="pages/history-pastprojects-viables.htm" target="_blank">
  44. <img src="../images/history/viables001-s.jpg" alt="viables underpass design" width="150" height="150" /></a> </div>
  45. <div id="info">
  46. <h2><a href="pages/history-pastprojects-viables.htm">viables underpasses</a></h2>
  47. <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 />
  48. A proposed community based project to enhance a public area of Basingstoke that was vandalised with heavy fire damage.
  49. <br />
  50. <br />
  51. <br />
  52. </p>
  53. </div>
  54. </div> 
  55. <div id="item" >
  56. <div id="image" class="image"><a href="pages/history-pastprojects-wingchun.htm" target="_blank">
  57. <img src="../images/history/weblexi1-s.jpg" alt="wing chun DVD series" width="150" height="150" /></a> </div>
  58. <div id="info">
  59. <h2><a href="pages/history-pastprojects-wingchun.htm">wing chun dvd</a></h2>
  60. <p>Worked with martial artist to produce a series of training dvd's and a web shop.<br />
  61. <br>
  62. <br>
  63. <br />
  64. <br />
  65. <br />
  66. </p>
  67. </div>
  68. </div>
  69.  
  70.  
  71. <div id="item" >
  72. <div id="image" class="image"><a href="pages/history-pastprojects-education.htm" target="_blank" >
  73. <img src="../images/history/education2june012005bleed-s.jpg" alt="the education - electro punk band" width="150" height="150" /></a> </div> 
  74. <div id="info">
  75. <h2><a href="pages/history-pastprojects-education.htm" target="_blank">the education</a></h2>
  76. <p>Approached by a london based group to create gig material and produce music and video samples.<br />
  77. <br />
  78. <br />
  79. <br />
  80. <br />
  81. </p>
  82. </div>
  83. </div>
  84.  
  85. <div id="item" >
  86. <div id="image" class="image"><a href="pages/history-pastprojects-webvarious.htm" target="_blank" >
  87. <img src="../images/history/webpropa1-s.jpg" alt="various websites" width="150" height="150" /></a> </div> 
  88. <div id="info">
  89. <h2><a href="pages/history-pastprojects-webvarious.htm" target="_blank" >various websites</a></h2>
  90. <p>Worked on various bespoke websites closely with clients over the years.<br />
  91. The clients owned and maintained the hosting.
  92. <br />
  93. <br />
  94. <br />
  95. </p>
  96. </div>
  97. </div>
  98.  
  99.  
  100. </div>
  101.  
  102. </body>
  103. </html>


Appologies for the huge post!
Last edited by peter_budo; Oct 13th, 2009 at 2:03 pm. Reason: Keep It Organized - For easy readability, always wrap programming code within posts in [code] (code blocks).
Reply With Quote Quick reply to this message  
•
•
Join Date: Oct 2009
Posts: 3
Reputation: Sagitarian is an unknown quantity at this point 
Solved Threads: 1
Sagitarian Sagitarian is offline Offline
Newbie Poster
 
0
  #2
Oct 11th, 2009
I am having the same issue and doing research, but have not gotten very far.
Reply With Quote Quick reply to this message  
•
•
Join Date: Mar 2008
Posts: 317
Reputation: Thirusha is an unknown quantity at this point 
Solved Threads: 51
Thirusha's Avatar
Thirusha Thirusha is offline Offline
Posting Whiz
 
0
  #3
Oct 12th, 2009
•
•
•
•
Originally Posted by cuzner View Post
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.
Life... Is a Moment
Reply With Quote Quick reply to this message  
•
•
Join Date: Oct 2009
Posts: 2
Reputation: cuzner is an unknown quantity at this point 
Solved Threads: 0
cuzner cuzner is offline Offline
Newbie Poster
 
0
  #4
Oct 12th, 2009
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
Reply With Quote Quick reply to this message  
•
•
Join Date: Mar 2008
Posts: 317
Reputation: Thirusha is an unknown quantity at this point 
Solved Threads: 51
Thirusha's Avatar
Thirusha Thirusha is offline Offline
Posting Whiz
 
0
  #5
Oct 13th, 2009
My pleasure.

Please mark this thread as solved.
Life... Is a Moment
Reply With Quote Quick reply to this message  
Reply

Tags
•
•
•
•
Tags
ajax

Quick Reply to Thread
This thread has been marked solved.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum
Thread Tools Search this Thread



acid2 adobe air ajax ajaxcode ajaxexample ajaxhelp alphafive amf apax api arax asp beta browser codes compatible css developer development dojofoundation eclipse error ext flash flex forms frameworks google gwt gxt html ibm ie8 java javascript jquery jsf jsp listbox microsoft mouse msdn office onreadystatechange opera php post problem programming progressbar python ruby rubyconf runtime scriptlets search security session silverlight software sql stevewood tracking ui variables vista web zend
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC