Reload iframe content (local HTML) when clicking buttons

Question

I´m loading HTML file into a DIV (iframe) when user click on a button.

My problem is when click another button and need to reload the iframe with another HTML file.

This is my code:

<script type="text/javascript">
$(function(){
    $('#2015').click(function(){
        if(!$('#iframe').length) {
                $('#content').html('<iframe id="iframe" src="2015.html" width="700" height="450"></iframe>');
        }
    });
});
</script>

And here is the button code:

<a href ="#" id="2015">2015</a>

How can I remove the iframe content before to load the next HTML into it?

Answer 1

You made a mistake here. An ID must not start with a number. So use btn2015 instead of 2015 as ID on the button.

The link should do the rest:

Reload an iframe with jQuery

Answer 2

Thanks Jonathan.

Changing the ID and minor changes is working fine.

I´m testing another way and is working too:

1. Assign a "name" to the iframe with the default HTML:

    <iframe name="year" src="2015.html"></iframe> 

2. Direct <a> link with the URL and iframe "name" as target:

    <a href="2014.html" target="year">Change Link</a>