Welcome to WebmasterWorld Guest from 54.227.5.198

Forum Moderators: open

Message Too Old, No Replies

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

button ID jquery

     

bearduk

10:17 pm on Sep 13, 2012 (gmt 0)

5+ Year Member



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

10:20 pm on Sep 13, 2012 (gmt 0)

5+ Year Member



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

7:46 am on Sep 14, 2012 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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

10:09 pm on Sep 14, 2012 (gmt 0)

5+ Year Member



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

6:34 am on Sep 15, 2012 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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

5:43 pm on Sep 16, 2012 (gmt 0)

5+ Year Member



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

7:52 pm on Sep 16, 2012 (gmt 0)

5+ Year Member



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>
 

Featured Threads

Hot Threads This Week

Hot Threads This Month