Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Nov 2007
    Posts
    108
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Problem with event listener

    SUMMARY:
    I have a web page where I'm trying to have the same area on the page get updated when each of 3 small album images gets clicked. When I used DOM Level 0 event handling, it worked fine. However, I am at the point where I want mutiple things to happen at the mouse click of the smaller images, so I am trying to use DOM Level 2 scripting using addEventListener/attachEvent.

    There is still only one event happening per the "onclick" of the small images, so I'm just trying to get the event handling set up correctly.

    PROBLEM
    When I try to retrieve the event that was clicked from the event framework, the object looks empty, or rather, I'm not sure how to interpret the results. If I display the clicked object with an alert for evt.srcElement or evt.target I get this: [object HTMLImageElement]. Then when I try and get the id of the object that was clicked, which is an <a> element, there's nothing there.

    Here's the web page in question (working on alignment): http://www.loamband.com/gid_test.php

    If you click the 3 images on the left, you'll see the alert with the object target displayed.

    I have the same issue in both IE and FF.

    Any help is appreciated!

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Have a try by element.getAttribute('id') method instead of just an element.id.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder
    Join Date
    Nov 2007
    Posts
    108
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    Have a try by element.getAttribute('id') method instead of just an element.id.
    I tried that in the alert and all that comes back is blanks.

    It seems like I'm not translating something from the event framework correctly, but I don't know what.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    How about
    Code:
    //var whichObj = getActivatedObject(evt);
    		var whichObj = evt.target;
    		//alert(evt.target);
    		url = whichObj.getAttribute('id') + "_data.php";
    		alert("url = " + url);
    		albumRequest.open("GET",url,true);
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Regular Coder
    Join Date
    Nov 2007
    Posts
    108
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    How about
    Code:
    //var whichObj = getActivatedObject(evt);
    		var whichObj = evt.target;
    		//alert(evt.target);
    		url = whichObj.getAttribute('id') + "_data.php";
    		alert("url = " + url);
    		albumRequest.open("GET",url,true);
    I tried this locally, and in FF, the alert URL shows "url = null_data.php". In IE there isn't an alert, only an error (I'm guessing because IE doesn't use target?).

    Is there something wrong with the way I'm adding the event listeners when the page loads?

  • #6
    Regular Coder
    Join Date
    Nov 2007
    Posts
    108
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Ok, I believe this is fixed, but I'm not sure exactly why:

    My code works locally when:

    1) the IMG tags are taken out of the <a> elements.
    2) I don't use an event handler for each <a> element. Previously I used:

    Code:
    	
                 linkelems = document.getElementById("bigcdimg").getElementsByTagName("a");
    	
    	for (var i=0; i<linkelems.length; i++) {
    		 if (linkelems[i].className == "cdlink") {
    		 	var theObj = linkelems[i];
    		 	//linkelems[i].onclick = getAlbumDetails;
    		 	addEventHandler(theObj, "click", getAlbumDetails);
    		 }
    	}
    This time, I wrapped the <a> tags in a DIV like so and removed the IMG elements inside the <a>'s:

    Code:
    <div id="bigcdimg">
    	<a href="#" id="gid" class="cdlink">Hello</a><br /><br />
                <a href="#" id="amoeba" class="cdlink">amoeba</a><br /><br />
    </div>
    And then used this code for the event handling after the onload event:

    Code:
        var albumLinks = document.getElementById("bigcdimg");
        addEventHandler(albumLinks, "click", getAlbumDetails);
    If the IMGs are used as backgrounds in CSS, then the event handlers will work.

    In debugging the original code, I found that the e.type variable was correctly being set to "click", but the target variable was coming back null.

    I have no idea why this change works, but it does. I guess the lesson is, don't try to assign event handlers to <a> elements. They need to be assigned to a containing DIV or SPAN.

    Anyone let me know if that's not accurate...

  • #7
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    The <a> tag has a default behavior that links the current document to the URL placed in the href attribute. You might need to cancel it's natural behavior:
    Code:
    if (linkelems[i].className == "cdlink") {
    		 	var theObj = linkelems[i];
    		 	//linkelems[i].onclick = getAlbumDetails;
    		 	addEventHandler(theObj, "click", function(){getAlbumDetails;return false;});
    		 }
    Also, I'm not sure where you got addEventHandler, haven't found that on any JS documentation.

    If you're attaching an event to an element, you should also add additional script for it to work on IE (attachEvent()).
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #8
    Regular Coder
    Join Date
    Nov 2007
    Posts
    108
    Thanks
    14
    Thanked 0 Times in 0 Posts
    That was my own function (I got from the Head First series) that handled the event listening for IE and other browsers.

    Having been my first go-round with an Ajax script, it seemed like a good idea, but if there are better ways to do it, I would appreciate any suggestions.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •