homepage Welcome to WebmasterWorld Guest from 54.226.93.128
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

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




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

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




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

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




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

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




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

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




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

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




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

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




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

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>

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved