CODEWITHSUNDEEP
javascriptjqueryhtmliframe
Dimitar Arabadzhiyski
Dimitar Arabadzhiyski

Reputation: 282

Insert Data Attribute Value Into Iframe src

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?

Upvotes: 0

Views: 1620

Answers (2)

Korovjov
Korovjov

Reputation: 533

You can do it via jQuery like this:

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

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

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'));
});

Upvotes: 3

Related Questions