8
ajaxModal.js has the listener function which will be called when the link is clicked.
events.js will have all the addEventListener() functions.
ajaxModal.js contents:
Expand|Select|Wrap|Line Numbers
- function showAjaxModal()
- {
- xmlHttp = GetXmlHttpObject();
- if(xmlHttp==null)
- {
- alert ("Browser does not support HTTP Request");
- return;
- }
- alert('Accessed showAjaxModal!');
- }
- // Detect XMLHTTP
- function GetXmlHttpObject()
- {
- var xmlHttp=null;
- try
- {
- // Firefox, Opera 8.0+, Safari
- xmlHttp=new XMLHttpRequest();
- }
- catch (e)
- {
- // Internet Explorer
- try
- {
- xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
- }
- catch (e)
- {
- xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
- }
- }
- return xmlHttp;
- }
events.js contents:
Expand|Select|Wrap|Line Numbers
- var triggerLink = document.getElementById('page1');
- triggerLink.addEventListener('click',showAjaxModal,false);
[HTML]
<html>
<head>
...
<script type="text/javascript" src="scripts/events.js"></script>
<script type="text/javascript" src="scripts/ajaxModal.js"></script>
...
</head>
<body>
...
<div id="nav">
<ul>
<li><a href="index.html" onclick="showAjaxModal(); return false">Home</a></li>
<li><a id="page1" href="page1.html">Page 1</a></li>
<li><a href="page2.html">Page 2</a></li>
<li><a href="page3.html">Page 3</a></li>
</ul>
</div>
...
</body>
</html>
[/HTML]
The inline event handler works, and runs showAjaxModal()....
the second link with ID 'page1' does not run showAjaxModal(), spite the fact that I added a click event to it with addEventListener in events.js.
I am almost sure this is a beginner mistake. How can I get the addEventListener() to work on this page?
Thanks,
Jeremy
