Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to add data to the anchor tag in HTML and access it using jQuery?

Following is my HTML code of an anchor tag:

<a delhref="http://localhost/eprime/entprm/web/control/modules/questions/manage_question_issue.php?op=fixed&question_id=21627&que_issue_status=0" title="Fixed" href="#fixedPopContent" class="fixed">Fixed</a>

Now I want to add a question id to the above anchor tag and access it back in jQuery when user clicks on this hyperlink. For it I tried below code but it didn't work out for me.

<a delhref="http://localhost/eprime/entprm/web/control/modules/questions/manage_question_issue.php?op=fixed&question_id=21627&que_issue_status=0" title="Fixed" href="#fixedPopContent" class="fixed" data="21627">Fixed</a>

The jQuery code for it is as follows:

$(document).ready(function()  {
  $(".fixed").click(function(e) {
    var t2 = $(this).data();
    alert(t2);
  });
});

It's giving me the message [object Object] in alert box. Can anyone please help me in setting the value to a anchor tag and accessing it in jQuery?

like image 991
PHPLover Avatar asked Mar 25 '14 05:03

PHPLover


People also ask

Can I add value to anchor tag?

To do that, you can use the ping attribute of the anchor tag. A ping attribute accepts one or more URLs as values.

How do you add an anchor tag in HTML?

In the text editor, click SOURCE. Navigate to where you want to insert an anchor. In the HTML code, insert the anchor using the format id=“anchor_name” within the <p> tag. Note: IDs on a page must be unique, and can't be re-used for other anchors.

Can anchor tag have data attribute?

HTML <a> data-* Attribute. A data-* attribute on an <a> tag attaches additional data to the anchor element. To create a custom attribute, replace * with a lowercase string, such as data-id , data-status , or data-location .

Can you use OnClick with an anchor?

Do not use an anchor with an onclick event without an href element event.


2 Answers

try something like this

html

 <a  href="#fixedPopContent" class="fixed" data-q_id="21627"></a>

javascript

$(document).ready(function()  {
  $(".fixed").click(function(e) {
    var t2 = $(this).data('q_id');
    alert(t2);
  });
}); 

you can add attribute data-sample_name on your html element. In jquery use

$('your_element_id').data('sample_name');// to get value
$('your_element_id').data('sample_name','new value');// to set  value
like image 106
rajesh kakawat Avatar answered Oct 03 '22 15:10

rajesh kakawat


I assume you are trying to do something like this:

$(document).ready(function()  {
  // you can change the selector, `"key"` and its value below
  $("a.fixed").data("key", 21627); // on document ready, store the necessary data
  //                        ^-- Insert a dynamic value here if required

  $(".fixed").click(function(e) {    
    alert($(this).data("key"));  // 21627
  });

});

.data() stores a key-value pair. So here, I made a key called 'key' and stored with it a value of 21627 and on click, alerted the value corresponding to the key 'key'.

You got a [object Object] because of the same reason that .data() stores data in an object and that by passing it zero arguments, you were essentially storing the object associated with .fixed into t2.

like image 44
Gaurang Tandon Avatar answered Oct 03 '22 17:10

Gaurang Tandon