Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Keith Doyle
Keith Doyle
25,973 Points

Updating iframe content

Had a project I was working on and we have multiple pieces of content from an eLearning program that is displayed in a single iframe on a page. I had to swap out that content when a user clicked on a button to move to the next module.

Here's my jquery code that accomplishes that. Just wanted to see if it was efficient enough or if I was on the right track. Thanks for any input.

If a user clicks on the button, it swaps in the new iframe content and then updates the title with the text from the link they clicked. I was using <a> before <button> but swapped it out right before posting this.

<button class="button-1" href="assets/accountClose/story.html" name="Intro">Intro</button>
$button = $('button.button-1');

$button.click(function(){
  $newUrl = $(this).attr('href');
  $newTopic = $(this).html();

  $('#ifrm').attr('src', $newUrl);
  $('#sub-topic').html($newTopic);
});
Richard Duncan
Richard Duncan
5,568 Points

Do you have other elements that have the class button-1? If no then the button prefix in your jQuery selector is redundant. You're also not using $button anywhere else in this example so that whole line could be removed and replaced with

$( '.button-1' ).click(func...
Keith Doyle
Keith Doyle
25,973 Points

Richard Duncan - I actually did that right after I posted this. Thanks for the info!