0

I have 4 html files and 4 javascript files. Each javascript file is loaded externally from each html file

index.html loads javascript.js 1.html loads javascript1.js 2.html loads javascript2.js 3.html loads javascript3.js

The issue that I'm having is that index.html uses AJAX to load one of the 3 other pages when a specific button is pressed. Then what is supposed to happen is that particular page would load its own corresponding javascript program which at the end of that program contains a window.addEventListener that should run on "load" and run the function "registerListeners". RegisterListeners then registers an event listener on a button on that page which currentyl just displays an alert for testing.

What I have figured out is that the parameter "load" for window.addEventLisener doesnt seem to be valid when the page is loaded dynamically with ajax.

I cant put all of the code in the main javascript because it contains some getElementById calls that call elements from one of the numbered pages that, if executed on main page load will generate errors because those specific ID's dont exist yet.

This is homework and so I need to get pointed in the right direction to doing this with html5 and javascript WITHOUT jquery. I understand that it might be easier with jquery, but I need to figure out how to do it without for the time being.

Would there be such a thing as window.addEventListener("AJAXload", someFunction(), false) ???

Richard Chase
  • 407
  • 5
  • 21
  • 1
    Can you modify the sub-html files to call a parent function? Are the subpages using AJAX or is the parent using AJAX to add them? Are they being added in to a DIV or an iFrame? http://stackoverflow.com/questions/5968300/how-do-i-fire-an-event-when-document-readystate-is-complete – CubanAzcuy Feb 06 '14 at 05:52
  • THe subpages are not calling ajax, just loading a script that has a window.addEventListener load call. They are loaded into a div. – Richard Chase Feb 06 '14 at 20:57
  • Also if people are going to downgrade my question and call it too broad, which i strongly disagree with, at least have the courtesy to ask some follow up questions so I can clear up what needs to be cleared, like what CubanAzcuy did. – Richard Chase Feb 06 '14 at 21:11

1 Answers1

1

Instead of adding an event listener programatically, you could possibly insert a bare Javascript function at the end of your AJAX'ed content. This would be run when the content is loaded, calling something in the parent window.

AJAX BLAH BLAH BLAH
<script type="text/javascript">
  childContentLoaded();  //or whatever you need 
</script>

you may also need to add "parent".functionName()

Seano666
  • 2,238
  • 1
  • 15
  • 14
  • So this would be on one of the html pages that gets loaded? That actually makes sense. The function that it attempts to run, would it be called from the javascript noted at the beginning of the ajax loaded page or from the parent page? It needs to be from the javascript loaded by the ajax page in the head. If that is the case, this should work. – Richard Chase Feb 06 '14 at 21:05
  • I will try this tonight and if it works, I will flag this as the correct answer. Thank you. – Richard Chase Feb 06 '14 at 21:12
  • So this didnt work. What I also discovered is that no javascript seems to want to run at all, even a simple alert. I tried putting a test script in the and also in the body at the end but in either case, the basic javascript didnt execute at all. So looks like the real problem is that javascript isnt being loaded when the page is being loaded by AJAX. – Richard Chase Feb 07 '14 at 02:00
  • 1
    Sorry this didn't work out for you, I may have found some help here though. http://stackoverflow.com/questions/4619668/executing-script-inside-div-retrieved-by-ajax – Seano666 Feb 08 '14 at 04:34
  • Thanks a lot for the help. I ended up figuring out how to get it to work. I put the other javascript files to be loaded in the head of the main html file and then when the ajax call is made to update the innerHTML, I have a check to see which page is being loaded and then call the appropriate register listener function. Seems to work good. – Richard Chase Feb 10 '14 at 04:32