Click link: replace src of iframe with link src How?

JavaScript
1

Hi everyone: Looking forward to joining the conversations here on sitepoint. This is my first post/question btw.

Here’s my problem. Our where-to-buy page has a list of dealers(with their contact info) and an iframe containing a batchgeo map. I want to make the dealer titles into links so that the user can click that and then in the iframe the batchgeo map is replaced with a google map of that dealer address. In my research people talked about naming my iframe and in the <a> tag putting a target=“iframe”. I tried this and it did not work (although it did eliminate the batchgeo map - ie I got a blank iframe. Someone else suggested using jquery to replace the iframe src. My javascript/jquery coding skills are basically nil at this point - Has anyone done this in the past and what is the best/easiest way to do this?

Link code ex with google map short link - when this is clicked I want the iframe to show this http://goo.gl/maps/Txtz 

<a href="http://goo.gl/maps/Txtz" target="mapFrame"><strong>Lakeview Farm Supply</strong></a>

iframe code with src (batchgeo map that loads on page load

<p>
          <iframe name="mapframe" id="mapframe" src="http://batchgeo.com/map/c3eb1a85588c20553c99bcdb05b756f7" style="border:1px solid #aaa;border-radius:10px;width:100%;height:600px;"></iframe>
        </p>

A bit of jquery I picked up elsewhere and that sounded like it might work…but it didn’t. I have a hunch it’s missing something that would work for my specific situation - but I don’t know what.

<script>
$(document).ready(function() {
    $("a").click(function(e) {
        e.preventDefault();

        $("#iframe").attr('src', $(this).attr('url'));
    })
});
</script>

Hope this is clear enough and thanks ahead of time for any help.
peace

2

Hey Andrew, welcome to the site!

You’re going to kick yourself in the head for this, but the “target/name” attributes are case sensitive which is why it wasn’t working the pure HTML way.

As for the jQuery way, you almost got it: you need to use $(“#mapframe”), not $(“#iframe”). The jQuery “selectors” work exactly the same as CSS selectors, so use a dot (.CLASS), pound (#ID), or nothing (ELEMENT).

3

OMGCarlos, I am so glad you saw it. I was racking my head on this as it looked right and I was constantly thinking, “what am I missing, I should be able to solve this.” :slight_smile: Good job.

4

Thanks OMGCarlos for those suggestions. Tried the HTML way by changing the target name to the same one used in iframe id and name… Still the link makes the batchgeo map go away but doesn’t replace with the google map. Not sure what I’m missing… here’s that code as of now.

<a href="http://goo.gl/maps/osxf" target="mapframe" ><strong>Lakeview Farm Supply</strong></a>

<p>
          <iframe name="mapframe" id="mapframe" src="http://batchgeo.com/map/c3eb1a85588c20553c99bcdb05b756f7" style="border:1px solid #aaa;border-radius:10px;width:100%;height:600px;"></iframe>
        </p>

Also, I’m not sure but do the html way and jquery way NOT work together - in other words I have to have one or the other - not both?

I also tried redoing the jquery way based on omgcarlos suggestion and it still doesn’t work. Does it matter where the script goes - head or at the bottom? Presently I have the script in the head. Here’s the updated code - reflecting omgcarlos suggestion and my idea that I need to target the specific <a>'s in the div they are found in, a div with the class=“state”. Again, I’m a jquery newb and I’m just throwing things at the wall to see if it sticks…

<script>
$(document).ready(function() {
    $(".state a").click(function(e) {
        e.preventDefault();
 
        $("#mapframe").attr("src", $(this).attr("url"));
    })
});
</script>

Also, it might help me if someone could explain what the different lines of the script are doing… (I know this will take more time so I won’t mind any ignoring of this request)

Here’s my newbie guess at what each line is doing…and maybe this will reveal why it’s not working.

$(document).ready(function() {… the function that follows will be ready for use at page load
$(“.state a”).click(function(e) {…find an <a> and on click run (e) and $(“mapframe”)…
e.preventDefault(); …ignore the <a> link normal behavior ie don’t go where the link is set to go
$(“#mapframe”).attr(“src”, $(this).attr(“url”)); …in the iframe with name and id of “mapframe” make the src = the url of I’m hoping the <a> that was clicked? although my suspicion is that that is not happening - hence the no go…

Hope someone can help.
thanks and blessings

5

With the help of a colleague we figured out a way to do this. Here’s for anyone trying to do something similar.

First here’s the script we came up with:

<script>
$(document).ready(function() {
	$('.changeMap').click(function(){
		oldFrame = $('#mapframe');
		oldFrame.remove();
		newSrc = $(this).attr('href');
		newFrame = $('<iframe>').attr('src',newSrc).attr('id','mapframe').attr('width','597').attr('height','602').appendTo('#map .map');
		return false;
	});
});
</script>

1 - Make sure this follows other script files/libraries that are loaded on the page.

Here is an example of a link that replaces the batchgeo map in the iframe with a google map of the dealership link.

<a href="https://maps.google.com/maps?q=1151+Hartford+Turnpike+++++++Waterford,++CT++06385&amp;oe=utf-8&amp;client=firefox-a&amp;hnear=1151+Hartford+Turnpike,+Waterford,+New+London,+Connecticut+06370&amp;gl=us&amp;t=m&amp;ie=UTF8&amp;hq=&amp;z=14&amp;ll=41.4077,-72.183221&amp;output=embed" class="changeMap"><strong>Bob's Farm Supply</strong></a>

Two keys with the link.
1 - a class is added so the script finds and uses those <a> to change. class=“changeMap”
2 - the href needs to be the src found in the “Paste HTML to embed in website” iframe code from google maps. The key is the “output=embed” at the end of the url used in the embed version, which is not found in the short link or long url…

Finally, the iframe that’s being used as the stage to show all these changing links needs to have an id for the script to use.

<iframe name="mapframe" id="mapframe" src="http://batchgeo.com/map/c3eb1a85588c20553c99bcdb05b756f7">

Hope that helps