How to assign dynamic element id in jQuery when onMouseOver in a href tag?

Question

I have 3 hyperlinks and DIV randomly generated by PHP script with dynamic ids. For example,

<a href="http://www.example.com/find.php?id=xy1" id="xy1" onMouseover="analyze('final', 'xy1')">xy1</a>
<a href="http://www.example.com/find.php?id=ay2" id="ay2" onMouseover="analyze('final', 'ay2')">ay2</a>
<a href="http://www.example.com/find.php?id=am3" id="am3" onMouseover="analyze('final', 'am3')">am3</a>

<div id="xy1"></div>
<div id="ay2"></div>
<div id="am3"></div>

I want to display some text based on the onMouseover event through a function analyze() in jQuery. For example,

function analyze(db, target) {
  jQuery.ajax({
    type: "GET",
    url:  "toThumb.php",
    data: 'db=' + db + '&id=' + target,
    success: function(output){ $("#"+target).html(output); }
  });
}

Here, the element id #xy1 must be automatically assigned based on onMouseover event. Like xy1 as a value of a variable name. Maybe on the next onMouseover event it will be ay2 or am3 .

I tried to set with $("#"+target).html(output); It failed... If I test individually with $("#xy1").html(output); OR $("#ay2").html(output); OR $("#am3").html(output); It works fine.

Does my way of coding is wrong? Or, Can I use this instead of passing parameters?

Answer 1

You can use .data()

In your html you have to pass your id in data-target attribute like this.

Example:-

<a href="http://www.example.com/find.php?id=xy1" data-target="xy1" onMouseover="analyze(this)">xy1</a>
<a href="http://www.example.com/find.php?id=ay2" data-target="ay2" onMouseover="analyze(this)">ay2</a>
<a href="http://www.example.com/find.php?id=am3" data-target="am3" onMouseover="analyze(this)">am3</a>

<div id="xy1"></div>
<div id="ay2"></div>
<div id="am3"></div>

Then in your jquery you can get data value. and pass your data based on this data value.

function analyze(this)
{
    var getTargetId = $(this).data("target");
    $("#"+getTargetId).html(data); 
}

Answer 2

First of all id should be unique in DOM. And in place of it you can use class as below.

Please check below working demo.

 function analyze(ele){ $("."+ele.id).html(ele.innerHTML); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="http://www.example.com/find.php?id=xy1" id="xy1" onMouseover="analyze(this)">xy1</a> <a href="http://www.example.com/find.php?id=ay2" id="ay2" onMouseover="analyze(this)">ay2</a> <a href="http://www.example.com/find.php?id=am3" id="am3" onMouseover="analyze(this)">am3</a> <div class="xy1"></div> <div class="ay2"></div> <div class="am3"></div> 

Answer 3

The issue is due to duplicate IDs within the document. According to W3C :

id = ID

A unique identifier for the element. There must not be multiple elements in a document that have the same id value.

Also, there is no sense in displaying the items in different containers, as you might simply generate them with PHP as well.

 function analyze(node) { $('#container').html(node.innerHTML /* whatever */); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="container">(empty)</div> <a href="http://www.example.com/find.php?id=xy1" id="xy1" onmouseover="analyze(this)">xy1</a> <a href="http://www.example.com/find.php?id=ay2" id="ay2" onmouseover="analyze(this)">ay2</a> <a href="http://www.example.com/find.php?id=am3" id="am3" onmouseover="analyze(this)">am3</a> 

Answer 4

Thanks to Rahul Patel . I did three changes in my coding.

(1) Removed id

<a href="http://www.example.com/find.php?id=xy1" onMouseover="analyze('final', 'xy1')">xy1</a>
<a href="http://www.example.com/find.php?id=ay2" onMouseover="analyze('final', 'ay2')">ay2</a>
<a href="http://www.example.com/find.php?id=am3" onMouseover="analyze('final', 'am3')">am3</a>

(2) Changed id to class

<div class="xy1"></div>
<div class="ay2"></div>
<div class="am3"></div>

(3) Changed $("#"+target).html(output); to $("."+target).html(output);

Now problem solved...