Insert Data Attribute Value Into Iframe src

Question

I have a number buttons which when pressed open a modal with an iframe. The buttons have data attributes that store the link which I want to pass to the iframe scr.

This is the code for the buttons:

<a href="#myModal" style="float: right;" class="btn btn-outline-secondary" data-toggle="modal" data-jobid="index.php?/job/view/1" ><strong>View</strong></a>

<a href="#myModal" style="float: right;" class="btn btn-outline-secondary" data-toggle="modal" data-jobid="index.php?/job/view/2" ><strong>View</strong></a>

<a href="#myModal" style="float: right;" class="btn btn-outline-secondary" data-toggle="modal" data-jobid="index.php?/job/view/3" ><strong>View</strong></a>

This is the code for the iframe:

<iframe style="display: block; width: 100%; height: 100%; border: none;" src=""></iframe>

My question is how can I pass the data-jobid to the src of the iframe each time one of the buttons is clicked?

I wonder why someone downvoted this? I don't see anything wrong with how the question was phrased? — user9263373
– user9263373, Commented Jan 31, 2018 at 15:09

Rory McCrossan · Accepted Answer · 2018-01-31 15:00:02Z

3

You can hook a click handler to the .btn-outline-secondary elements, then read the data() attribute from them before setting the src attribute of the iframe, like this:

$('.btn-outline-secondary').click(function() {
  $('iframe').attr('src', $(this).data('jobid'));
});

answered Jan 31, 2018 at 15:00

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user9263373 Over a year ago

Thanks Rory, I learned something new today. I never realized $(this).data('jobid') is the same as $(this).attr('data-jobid').

Rory McCrossan Over a year ago

Glad it helped you :) Also, just FYI, they're not quite the same. attr() reads the attribute from the DOM, whereas data() reads it from jQuery's internal cache. So long as you use the same method to get/set the value it's fine. Personally I prefer data() as it's faster in most situations.

Korovjov · Accepted Answer · 2018-01-31 15:02:13Z

0

You can do it via jQuery like this:

$(".btn")click(function(){
var data = $(this).attr('data-jobid');
$(iframe).attr('src', data);
});

answered Jan 31, 2018 at 15:02

Korovjov

5616 silver badges19 bronze badges

Collectives™ on Stack Overflow

Insert Data Attribute Value Into Iframe src

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related