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 11 of 11
  1. #1
    Regular Coder
    Join Date
    Jun 2012
    Posts
    137
    Thanks
    1
    Thanked 1 Time in 1 Post

    This is driving me nuts. I just need the inner html

    So, all I am tying to do is to get the html content of the element below when the mouseover fires. In this case I need the 'IO'. I have been pounding my head on the wall all day trying to get this to work.

    I have tried:
    .text
    .html
    .target
    etc

    and I have scoured the web. Nothing works!

    Can someone give me a hand with this?

    Code:
    <a class="glossaryLink" href="#" onmouseover="onRollOverPULink(event);" onmouseout="onRollOutPULink(event);">IO</a>
    Code:
    function onRollOverPULink(evt)
    {
    	alert(evt.target);
    }

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,401
    Thanks
    11
    Thanked 595 Times in 575 Posts
    Code:
    alert(evt.target.innerHTML);
    edit: don't pass 'event', which is not anything, that messes things up.

    if you want a secondary handler, you would have to pass the element itself, since you're handler won't get the event arguments that primary handlers enjoy:
    Code:
     onmouseout="onRollOutPULink(this);"
    
    
    ////////////////////////////////////////
    
    function onRollOverPULink(elm)
    {
    	alert(elm.innerHTML);
    }
    Last edited by rnd me; 04-08-2013 at 09:55 PM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • #3
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    since you are using jQuery you could have done this

    Code:
    $(".glossarylink").on('mouseover', function(){
     alert($(this).html());
    });
    $(".glossarylink").on('mouseout', function(){
    alert($(this).html());
    });
    Code:
    <a class="glossaryLink" href="#">IO</a>
    Last edited by DanInMa; 04-09-2013 at 01:30 PM.

  • #4
    Regular Coder
    Join Date
    Jun 2012
    Posts
    137
    Thanks
    1
    Thanked 1 Time in 1 Post
    Quote Originally Posted by rnd me View Post
    since you're handler won't get the event arguments that primary handlers enjoy:
    That they enjoy. nice.

    It works. I am going to try the other suggestion below since it would reduce a lot of code on our html pages.

  • #5
    Regular Coder
    Join Date
    Jun 2012
    Posts
    137
    Thanks
    1
    Thanked 1 Time in 1 Post
    Quote Originally Posted by DanInMa View Post
    since you are using jQuery you could have done this

    Code:
    $(".glossarylink").on('mouseover', function(){
     alert($(this).html());
    });
    $(".glossarylink").on('mouseout', function(){
    alert($(this).html());
    });
    Code:
    <a class="glossaryLink" href="#">IO</a>
    For some reason it is not working, I do not even get the alert. By the way, the html page containing the 'a' tags are added to the DOM dynamically, does that matter?

  • #6
    Regular Coder
    Join Date
    Jun 2012
    Posts
    137
    Thanks
    1
    Thanked 1 Time in 1 Post
    I wonder if it some sort of race condition where the content is not on the page yet by the time the listeners are added.

  • #7
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    sorry I used the wrong events, give thsi a shot
    Code:
    $(".glossarylink").on('mouseenter', function(){
     alert($(this).html());
    });
    $(".glossarylink").on('mouseleave', function(){
    alert($(this).html());
    });
    Code:
    <a class="glossaryLink" href="#">IO</a>
    [/QUOTE]

  • #8
    Regular Coder
    Join Date
    Jun 2012
    Posts
    137
    Thanks
    1
    Thanked 1 Time in 1 Post
    Still not working.

  • #9
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    oh wow sorry, its case sensitive, I missed the capital L.

    this is not quite right as it still doesnt get the definition, sorry I haven't worked with xml much, but this is close.

    Code:
    $(".glossaryLink").on('mouseenter', function(){
    var $term = $(this).text();
    var $termdef = $(theXMLFile).find($("attribute[term='" + $term + "']")).find
     alert('The definition of the term '+$term+' is : '+$termdef +'');
    });
    $(".glossaryLink").on('mouseleave', function(){
    var $term = $(this).text();
    var $termdef = $(theXMLFile).find($("attribute[term='" + $term + "']"))
     alert('The definition of the term '+$term+' is : '+$termdef +'');
    });
    Code:
    <a class="glossaryLink" href="#">IO</a>
    example: http://jsfiddle.net/TJQ4B/1/
    Last edited by DanInMa; 04-10-2013 at 04:34 AM.

  • #10
    Regular Coder
    Join Date
    Jun 2012
    Posts
    137
    Thanks
    1
    Thanked 1 Time in 1 Post
    OH damn, I missed it too. My fault. let me try it.

  • #11
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    the part for $termdef is not right, I didnt have time to figure out how to pull the separate attributes, im used to jsut pulling from individual nodes in xml.


  •  

    Posting Permissions

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