jQuery: click on a #button, change data attribute of the iframe within
May 19, 2016 3:11 AM Subscribe
I have a set of buttons that, when clicked, should display a specific iframe. In order to keep all the iframes from loading when the page is first loaded, I have the url stored as a data-src attribute in the iframe tag. How can I ask jQuery to change the data-src to src and load the iframe when the #div is clicked?
JSFiddle here. As is probably pretty obvious, I'm boning up on my jQuery and trying to make this seemingly simple task work.
There would be several of these button/iframe combos loading different html files. When someone clicks #button1 (or #div1 I suppose), the iframe within that ID should have the data-src changed to src, and that specific url loaded in that specific .iframe_area. When clicking #button2, the second iframe should load.
The current code keeps the iframes from loading at page load, but when clicking one button, it loads all iframes instead of just the one that was clicked.
If it's any help (or hindrance), I'm using Foundation 6 and will be using their Reveal modals to display the iframe. There is a way to get the iframe to load via AJAX but it's a bit beyond my skill level yet, I believe, and I'd like to get my head around using jQuery for this.
Thanks for any help!
JSFiddle here. As is probably pretty obvious, I'm boning up on my jQuery and trying to make this seemingly simple task work.
There would be several of these button/iframe combos loading different html files. When someone clicks #button1 (or #div1 I suppose), the iframe within that ID should have the data-src changed to src, and that specific url loaded in that specific .iframe_area. When clicking #button2, the second iframe should load.
The current code keeps the iframes from loading at page load, but when clicking one button, it loads all iframes instead of just the one that was clicked.
If it's any help (or hindrance), I'm using Foundation 6 and will be using their Reveal modals to display the iframe. There is a way to get the iframe to load via AJAX but it's a bit beyond my skill level yet, I believe, and I'd like to get my head around using jQuery for this.
Thanks for any help!
Your fiddle was not set up with JQuery and did not seem to reference elements by ID correctly. See this JSFiddle for a potential fixed approach to start working from. You may want to open a Javascript console in a separate window while you run JSFiddle so that you can troubleshoot error messages. For example, in Chrome.
posted by a lungful of dragon at 3:59 AM on May 19, 2016
posted by a lungful of dragon at 3:59 AM on May 19, 2016
As dragon pointed out, you weren't loading jQuery. Click on the little gear at the corner of the javascript area to set this.
Two valid solutions already, here is a third. This is really basic and I took a kind of long way to get it done, to hopefully give a clearer illustration of what's happening with selecting the element. My solution is dependent on your HTML being as you presented it (the button as a sibling of the div that contains the iframe).
jQuery's
One thing that I was running into as an issue - your HTML srcs are http and jsfiddle is running on https; I was getting chrome errors when trying to load an http resource into an https page. If you go ahead and change your data-src's back to http, then try to run the script in Chrome, you'll see a console error.
posted by kellygrape at 5:58 AM on May 19, 2016
Two valid solutions already, here is a third. This is really basic and I took a kind of long way to get it done, to hopefully give a clearer illustration of what's happening with selecting the element. My solution is dependent on your HTML being as you presented it (the button as a sibling of the div that contains the iframe).
jQuery's
.attr() function can either get or set an attribute. In this case I'm using it to set the attribute src. I'm using the .data() function to get the value of the 'data-src' attribute; this could be accomplished by using .attr('data-src') as well.One thing that I was running into as an issue - your HTML srcs are http and jsfiddle is running on https; I was getting chrome errors when trying to load an http resource into an https page. If you go ahead and change your data-src's back to http, then try to run the script in Chrome, you'll see a console error.
posted by kellygrape at 5:58 AM on May 19, 2016
Here's another way to do it. It really depends on the specifics of what you're trying to achieve.
CodePen looks to be much better than JSFiddle for messing around with this, for the reason kellygrape mentioned. Browsers are real touchy about non-secure iframes showing up on secure pages, and for good reason. They're a common vector for XSS attacks.
posted by neckro23 at 7:17 AM on May 19, 2016
CodePen looks to be much better than JSFiddle for messing around with this, for the reason kellygrape mentioned. Browsers are real touchy about non-secure iframes showing up on secure pages, and for good reason. They're a common vector for XSS attacks.
posted by neckro23 at 7:17 AM on May 19, 2016
Response by poster: Wow! I really appreciate the assistance, particularly in regards to JSFiddle. I'll definitely try CodePen.
I've just come home from work and am amazed at the different approaches that are possible. I've learned something from each one! Plus I've had CorgiOrgy playing in the background for the last 15 minutes and my kids are loving it.
As always, I am delighted and humbled by the generosity of the Metafilter community. Thank you so much.
posted by dozo at 4:49 PM on May 19, 2016
I've just come home from work and am amazed at the different approaches that are possible. I've learned something from each one! Plus I've had CorgiOrgy playing in the background for the last 15 minutes and my kids are loving it.
As always, I am delighted and humbled by the generosity of the Metafilter community. Thank you so much.
posted by dozo at 4:49 PM on May 19, 2016
Not that AskMefi has not been helpfu herel ... may I suggest you direct technical coded questions to StackOverflow and thus saving your question of the week here for other purposes.
posted by falsedmitri at 5:31 PM on May 19, 2016 [1 favorite]
posted by falsedmitri at 5:31 PM on May 19, 2016 [1 favorite]
Response by poster: Sure, go ahead and suggest whatever you want, I'll keep using my precious questions for whatever I want.
posted by dozo at 2:32 AM on May 20, 2016
posted by dozo at 2:32 AM on May 20, 2016
This thread is closed to new comments.
JSFiddle here
posted by missmagenta at 3:53 AM on May 19, 2016