944,033 Members | Top Members by Rank

Ad:
Oct 8th, 2009
0

AJAX issues : accessing parent page

Expand Post »
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).
Similar Threads
Reputation Points: 10
Solved Threads: 0
Newbie Poster
cuzner is offline Offline
2 posts
since Oct 2009
Oct 11th, 2009
0
Re: AJAX issues : accessing parent page
I am having the same issue and doing research, but have not gotten very far.
Reputation Points: 10
Solved Threads: 1
Newbie Poster
Sagitarian is offline Offline
5 posts
since Oct 2009
Oct 12th, 2009
0
Re: AJAX issues : accessing parent page
Click to Expand / Collapse  Quote originally posted by cuzner ...
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.
Reputation Points: 36
Solved Threads: 57
Posting Whiz
Thirusha is offline Offline
355 posts
since Mar 2008
Oct 12th, 2009
0
Re: AJAX issues : accessing parent page
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
Reputation Points: 10
Solved Threads: 0
Newbie Poster
cuzner is offline Offline
2 posts
since Oct 2009
Oct 13th, 2009
0
Re: AJAX issues : accessing parent page
My pleasure.

Please mark this thread as solved.
Reputation Points: 36
Solved Threads: 57
Posting Whiz
Thirusha is offline Offline
355 posts
since Mar 2008

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Displaying the web sever ip address
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: ADD extra text into html editor AJAX after the Editor cursor position





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC