addEventListener Problem

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • soulmach
    New Member
    • Mar 2007
    • 8
    #1

    addEventListener Problem

    Using Firefox, I am trying to access a link within my HTML document, then use addEventListene r() to add a click event to that link. I am using two external JS files.

    ajaxModal.js has the listener function which will be called when the link is clicked.

    events.js will have all the addEventListene r() functions.

    ajaxModal.js contents:

    Code:
    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:

    Code:
    var triggerLink = document.getElementById('page1');
triggerLink.addEventListener('click',showAjaxModal,false);
    HTML:

    [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.htm l" onclick="showAj axModal(); return false">Home</a></li>
    <li><a id="page1" href="page1.htm l">Page 1</a></li>
    <li><a href="page2.htm l">Page 2</a></li>
    <li><a href="page3.htm l">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 addEventListene r in events.js.

    I am almost sure this is a beginner mistake. How can I get the addEventListene r() to work on this page?

    Thanks,

    Jeremy
    Tags: None
    • iam_clint
      Recognized Expert Top Contributor
      • Jul 2006
      • 1207
      #2
      why not

      triggerLink.add EventListener(' click',showAjax Modal ,false);

      to
      triggerLink.onC lick = function() { showAjaxModal() ; }

        Comment

        • soulmach
          New Member
          • Mar 2007
          • 8
          #3
          Originally posted by iam_clint
          why not

          triggerLink.add EventListener(' click',showAjax Modal ,false);

          to
          triggerLink.onC lick = function() { showAjaxModal() ; }
          I am getting the same result with your suggested method. I have tried both. Both methods for registering the event do not work. I click the link, and it just loads the href as normal, and ignores any click events ... I am trying to find a typo in my scripts, but everything looks legit to my knowledge. I am hoping someone can find my error, because I cannot see it.

          I am choosing to learn addEventListene r() because I want to get a jump start on the addEventListene r() method. Using the 'traditional' method of registering event handlers doesn't allow to add more than one event handler to the same event on the same element (not that I would need to in this case) which is a drawback (see ppk-Quirksmode http://www.quirksmode.org/js/events_tradmod.html). I have decided that event registration with addEventListene r() is supported enough in modern browsers for my purposes (with the condition for using IE attachEvent() of course).

          However, I would also like to get it working using your suggested method, because it is not working that way either.

          I tried,

          Code:
          var triggerLink = document.getElementById('page1');
triggerLink.onClick = function() { showAjaxModal(); }
          with no success.

          Thanks for your suggestion.

            Comment

            • iam_clint
              Recognized Expert Top Contributor
              • Jul 2006
              • 1207
              #4
              you need it to drop the href and make your javascript goto the link after it pulls the javascript function.


              window.location =

              <a href="#">

                Comment

                • soulmach
                  New Member
                  • Mar 2007
                  • 8
                  #5
                  Originally posted by iam_clint
                  you need it to drop the href and make your javascript goto the link after it pulls the javascript function.


                  window.location =

                  <a href="#">


                  I could be way off base with this, but I am very confused. I want the href to be followed if JS is off, but if JS is on, I want the showAjaxModal to execute. When using your suggestion of <a href="#">, this link becomes broken to users who do not have javascript turned on. Is there a way to get around that, other than using an inline event handler with return false (ie. <a href="page1.htm l" onclick="func() ; return false">Page 1</a>) ?

                  This inline method is working, but I prefer to create a link that does not use inline event handling, because ideally I want to maintain a pure separation of xhtml content and javascript behavior. Quirksmode says, "Although the inline event registration model is ancient and reliable, it has one serious drawback. It requires you to write JavaScript behavior code in your XHTML structure layer, where it doesn't belong." [1 ]

                  Is there a way to make this link accessible to folks with JS turned off, without using inline events?

                  Thanks again,
                  Jeremy

                    Comment

                    • soulmach
                      New Member
                      • Mar 2007
                      • 8
                      #6
                      Seems like I may be confused. I'll do a little reading. It's time to get our JS reference books for a while. Let me know if you have any advice.

                      Thanks!

                      Jeremy

                        Comment

                        • iam_clint
                          Recognized Expert Top Contributor
                          • Jul 2006
                          • 1207
                          #7
                          yes

                          have the javascript write all of your links to # then if javascript it is turned off you don't have to worry about it.

                            Comment

                            Previous template Next
                            Working...