CODEWITHSUNDEEP
javascriptjquery
Matthew Barraud
Matthew Barraud

Reputation: 515

Using data-* attribute to send data to modal - use that attribute to set href

I have a data-email attribute (amongst others) being set in the row of a table. My users can click on each row to open a modal to display more information.

<tr data-toggle="modal"
  data-id="1"
  data-name="Their name"
  data-role="Consultant"
  data-position="N/A"
  data-department="PMU"
  data-office="None"
  data-telephone="01234 567890 ext 123"
  data-email="their email address"
  data-linkedin="linkedin address"
  data-bio="Blah Blah Blah"
data-target="#staticBackdrop">
  <td class="td-center" style="width: 6%;">
    <img src="img/user.png" class="rounded-circle" />
  </td>
  <td>
    Full Name
  </td>
  <td class="td-center">
    Position
  </td>
  <td class="td-center">
    Role
  </td>
  <td class="td-center">
    PMU
  </td>
  <td class="td-center">
    None
  </td>
</tr>

I am using the data-* attributes to fill in the information in the modal which is working really well. What I'd like to do is set the email address in the href. I'm using the following jquery/javascript to replace the contents of spans to show the user the information in the modal.

$(document).ready(function() {
  $('#staticBackdrop').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget) // Button that triggered the modal
    var name = button.data('name') // Extract info from data-* attributes
    var role = button.data('role')
    var position = button.data('position')
    var department = button.data('department')
    var office = button.data('office')
    var telephone = button.data('telephone')
    var email = button.data('email')
    var bio = button.data('bio')
    var modal = $(this)
    modal.find('#name').text(name)
    modal.find('#role').text(role)
    modal.find('#position').text(position)
    modal.find('#department').text(department)
    modal.find('#office').text(office)
    modal.find('#telephone').text(telephone)
    modal.find('#email').text(email)
    modal.find('#bio').text(bio)
  })
});

<span id="bio">data-bio</span> etc...

I'm stuck with how to get the email and linkedin addresses and adding them into the href like so:

<a 
 href="mailto:INSERT DATA-EMAIL HERE" 
 class="text-carmine"><i class="fas fa-envelope-open-text fa-fw"></i>
 <span id="email">data-email</span>
</a>

Upvotes: 0

Views: 164

Answers (2)

Vilmar Pavesi
Vilmar Pavesi

Reputation: 71

If you don´t want to use jquery you can get with js like this:

  var link = element.querySelector("a.text-carmine");
  link.href = 'mailto:' + email ;

but be careful, if you have more than one tag a with class="text-carmine" it´s may not work

Upvotes: 0

Jack Templeman
Jack Templeman

Reputation: 358

Something like this could work? Find the link in the modal, then set the href attribute using jQuery's attr function.

var modal = $(this);
var link = modal.find('a.text-carmine');
link.attr('href', 'mailto:' + email);

Upvotes: 1

Related Questions