CODEWITHSUNDEEP
javascript
DinhNgocHien
DinhNgocHien

Reputation: 717

How to get id(of a record) from a link when clicking on?

I want to get the id from the href link when clicking on modal-view class(in this case I want to return 6), but don't know how to do.

I tried $this.attr('href')(to check attr function is working or not) but it returned undefined.

Any suggestion, thanks in advance.

<span class="action_item modal-view">
  <a href="/admin/sponsoreds/6/edit">Edit Sponsored</a>
</span>

Upvotes: 0

Views: 713

Answers (7)

Thijs
Thijs

Reputation: 2351

You could use a regex on the href to find the ID. I've assumed it is always a number in the answer below.

function onTriggerClicked(event) {
  // Cancel the navigation to the href or the example will fail.
  event.preventDefault();
  
  const
    // Get the href attribute from the clicked element.
    href = event.target.href,
    // Create regex which will match "/" + (one or more digits) + "/".
    regex = /\/(\d+)\//,
    // Perform the regex on the href.
    match = regex.exec(href);
  
  // When match is null it means the href doesn't contain one or more 
  // digits sandwiched "/"
  if (match === null) {
    console.log('no valid ID found in href');
  } else {
    // The regex found a number, it is in the first capture group
    // so it can find in item 1 of the match array.
    console.log('The ID in the href is: ', regex.exec(href)[1]);
  }
}

// Add a click listener to each of the elements with the modal-view class.
const
  triggers = Array.from(document.querySelectorAll('.modal-view'));
triggers.forEach(trigger => trigger.addEventListener('click', onTriggerClicked));
<span class="action_item modal-view">
  <a href="/admin/sponsoreds/6/edit">Edit Sponsored</a>
</span>
<span class="action_item modal-view">
  <a href="/admin/sponsoreds/61/edit">Edit Sponsored 2</a>
</span>
<span class="action_item modal-view">
  <a href="/admin/sponsoreds/6a/edit">Edit Sponsored 3</a>
</span>

Upvotes: 0

benjamin c
benjamin c

Reputation: 2338

In this case you can get value of href by using $(this).find('a').attr('href'), then you need to split returned uri to get this numeric value (id) like,

$(".modal-view").click(function() {
    var id = $(this).find('a').attr('href').split('/')[3];
    console.log(id) // 6
})

Now id contains value required.

Upvotes: 0

M3ghana
M3ghana

Reputation: 1271

I see there is no id associated with the HTML piece of code you have attached. You need to associate it with id inorder to access it from the DOM.

<span class="action_item modal-view">
  <a id="anc-id" href="/admin/sponsoreds/6/edit">Edit Sponsored</a>
</span>

From your above description, i sense you are using jQuery.

$(document).ready(function(){
   $("a").attr("id"); //anc-id
});

If there are many a tags in your page, for more specific way to filter out by using class -

<span id="parent-id" class="action_item modal-view">
  <a class="anc" id="anc-id" href="/admin/sponsoreds/6/edit">Edit Sponsored</a>
</span>

$(document).ready(function(){
   $("a.anc").attr("id");
});

If there are many a tags with class .anc then we need to loop the a inorder to fetch all the ids.

Solution 2 -

If your need is just to grab the element without having any id then -

var element = $("span.modal-view > a");

element.addClass("newClass");
element.append('...');

Check this for more information - https://api.jquery.com/element-selector/

Upvotes: 0

Steve Kirsch
Steve Kirsch

Reputation: 185

assuming that you use jQuery:

$("span.action_item.modal-view").click(function(){
    let href = $(this).find('a').attr('href');
    console.log(href);
});

.prop() should work also

Upvotes: 0

Hamed Rezaee
Hamed Rezaee

Reputation: 7222

You can add a custom attribute like itemId to <a> tag then retrieve it as you need.

Upvotes: 0

Pallab Rath
Pallab Rath

Reputation: 11

By jQuery we can do it. 

$(document).ready(function(){
    $("a").click(function(){
       alert("id of the link ="+this.id);
    });
});

Upvotes: 0

Kiran Shahi
Kiran Shahi

Reputation: 7980

Your code must be $(this).find('a'). $(this) is the object of clicked element and find('a') will search a tag inside the clicked element. And to get the id you can do something like $(this).find('a').attr('href').split('/')[3]. Here split will separate your value of href and make an array and can access it via its index. 

$('.modal-view').on('click', function(e){
  e.preventDefault();
  console.log($(this).find('a').attr('href'));
  console.log($(this).find('a').attr('href').split('/')[3])
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="action_item modal-view">
  <a href="/admin/sponsoreds/6/edit">Edit Sponsored</a>
</span>

Upvotes: 3

Related Questions