Click button to create a block of code that contains the buttons ID

button ID jquery

[bearduk]

Hi all,
I have many buttons on one page that all have their own IDs
e.g. <button id="unique">button</button>

When the button is clicked, I need it to add some code to the page beneath it. The added code is the html tag 'iframe' (effectively, clicking the button will add an iframe.
The code will be the same for every iframe except the iframe url will have a unique ID for each one.

So simply -- the idea is
Click BUTTON, show
iFrame with URL containing BUTTONs ID as part of the url

Heres' my code so far:

jQuery:

$(document).ready(function(){
$('.button').click(function(){
// variable to getid
var getid = $(this).attr('id');
// choose the div #show and add text to it. The text is called by the variable.
$("#show").text('<iframe src="getid"></iframe>');
});
});

HTML:

<button id="unique1">Show iFrame button </button>

<div id="show"></div>

--

I'm a newbie to jQuery still and so I'm really lost here. I think perhaps using 'this' within the variable is what it causing problems but I'm not sure. I'm not sure if I should be creating a function instead.
Any pointers or similar solutions much appreciated.
Thanks

Chris.

[bearduk]

Sorry, just to mention the src= for the iframe will contain a url such as [test.com...]
where everything is static except the GETID part which hopefully pulls in the variable.

[daveVk]

No need for iframes(unless cross domain), load content direct to div with

$("#show").load(url);

where url contains getid

[api.jquery.com...]

var getid = $(this).attr('id');
or just
var getid = this.id;

[bearduk]

Thanks daveVK.
Unfortunately, the iframe is a requirement as the site being used is for a Uni and the iframe is embedded code that MUST be an iframe.
I've now found a cool little snippet that will not load the iframe until clicked:

<script type="text/javascript">
jQuery(function(){
$("iframe").each(function(){
this.tmp = this.src;
this.src = "";
})
.closest('.kiscourse')
.click(function(){
var frame = $(this).find("iframe")[0];
console.log(frame); frame.src = frame.tmp;
});
});

</script>

and the action show the iframe is:

<script type="text/javascript">
$(document).ready(function(){
$('.kisw').hide();

$('.button').click(function(){
$(this).parent().find('.kisw').toggle();
});
});
</script>

HTML

<!-- start course -->
<tr>
<td>
<div class="kiscourse">

Accounting AND Applied Psychology | NC48

<button class="button">Show / hide stats</button>

<div class="kisw">
<iframe id="unistats-widget-frame"
title="Unistats KIS Widget"
src="http://stg.unistats.eduserv.org.uk/Widget/10007767/UACCAAPS/horizontal/small" scrolling="no" style= "overflow: hidden; border:0px none transparent; width: 800px; height: 160px;" </iframe>
</div>

</div>
</td>
</tr>
<!-- end course -->

[daveVk]

There is a chance that the iframe may have started loading prior to you setting this.src="". It would be safer to have no src= on iframe.

[bearduk]

Cheers daveVK,
there are hundreds of these iframes that I need on the page. I think I'm going to use DataTables jquery plugin.
As far as the iframe goes, each snippet of iframe code is published by another system and so I may put the iframe in a hidden separate div and then I'll use .attr to get it and insert it into the actual visible iframe.
A bit messy but I think it should work.
Thanks again

[bearduk]

Final working code for anyone who finds it useful:

<script type="text/javascript">
$(document).ready(function(){
$('.kisw').hide();

$('.button').click(function(){
//starting from (this) button search for the .kisurl and get its href
kisurl = $(this).parent().find('.kisurl').attr('href');
// kisurl = alert($(this).parent().find('.kisurl').attr('href'));
// toggle div holding the iframe
$(this).parent().find('.kisw').slideToggle();
// find the nearest unistats id and change its src to the variable above
$(this).parent().find('#unistats-widget-frame').attr('src', kisurl);
});
});
</script>


<tr>
<td>
<div class="kiscourse">
Accounting AND Applied Psychology | NC48
<button class="button">Show / hide stats</button>
<div class="kisw">
<a class="kisurl" href="http://stg.unistats.eduserv.org.uk/Widget/10007767/UACCAAPS/horizontal/small">KIS Link</a>
<iframe id="unistats-widget-frame" title="Unistats KIS Widget" src="" scrolling="no" style="overflow: hidden; border:0px none transparent; width: 800px; height: 160px;"></iframe>
</div>
</div>
</td>
</tr>