Reputation: 489
I've created a function called loadFrame with an argument called id. When this function is called, jQuery iframe is created and it loads a url with the id argument in the string. Here is the code:
<script language="javascript" type="text/javascript">
function loadFrame(id){
$('body').append('<iframe src="loadFrame.php?id=' + id + '&cmd=summary" name="frame1" id="frame1" style="border:none; width:400px;height:200px;overflow:hidden;"></iframe>');
}
</script>
<span onclick="loadFrame(1);">Summary for User 1</span>
<span onclick="loadFrame(2);">Summary for User 2</span>
<span onclick="loadFrame(3);">Summary for User 3</span>
Problem that I am facing is that every time i click to load an iFrame, it keeps creating a new instance of the iFrame. I want there to only be one instance of the iFrame at all times.
Is there a way to have like a close icon on the top right of the iFrame so that I can unload the iframe completely?
Thanks
Got it working using the suggestions below. Here is the working code:
<script language="javascript" type="text/javascript">
function loadFrame(id){
$('#iframecontent').html('<div id="iframe_'+id+'" style="position:relative;width:400px;"><button onclick="unloadFrame(\''+id+'\')" data-tar="'+id+'">Close</button><iframe src="loadFrame.php?id=' + id + '&cmd=summary" name="frame" id="frame" style="border:none; width:400px;height:200px;overflow:hidden;"></iframe></div>');
}
function unloadFrame(id){
var iframeid = "#iframe_"+id;
$(iframeid).remove();
}
</script>
<span onclick="loadFrame(1);">Summary for User 1</span>
<span onclick="loadFrame(2);">Summary for User 2</span>
<span onclick="loadFrame(3);">Summary for User 3</span>
<div id="iframecontent"></div>
Upvotes: 0
Views: 2304
Reputation: 2529
Try this
demo : http://fiddle.jshell.net/njPQP/1/
<span onclick="loadFrame(1);">Summary for User 1</span>
<span onclick="loadFrame(2);">Summary for User 2</span>
<span onclick="loadFrame(3);">Summary for User 3</span>
<script language="javascript" type="text/javascript">
function loadFrame(id){
var iframeid = "#iframe_"+id;
if($(iframeid).length < 1)
var append_data = '<div id="iframe_'+id+'" style="position:relative;width:400px;"><button onclick="unloadFrame(\''+id+'\')" data-tar="'+id+'">Close</button><iframe src="loadFrame.php?id=' + id + '&cmd=summary" name="frame" id="frame" style="border:none; width:400px;height:200px;overflow:hidden;"></iframe></div>';
$('body').append(append_data);
}
function unloadFrame(id){
var iframeid = "#iframe_"+id;
$(iframeid).remove();
}
</script>
Upvotes: 0
Reputation: 11
Try this:
<script language="javascript" type="text/javascript">
function loadFrame(id){
$('iframe').remove();
$('body').append('<iframe src="loadFrame.php?id=' + id + '&cmd=summary" name="frame1" id="frame1" style="border:none; width:400px;height:200px;overflow:hidden;"></iframe>');
}
</script>
<span onclick="loadFrame(1);">Summary for User 1</span>
<span onclick="loadFrame(2);">Summary for User 2</span>
<span onclick="loadFrame(3);">Summary for User 3</span>
or this:
function loadFrame(id){
$('#frame1').attr('src','loadFrame.php?id=' + id + '&cmd=summary');
}
</script>
<span onclick="loadFrame(1);">Summary for User 1</span>
<span onclick="loadFrame(2);">Summary for User 2</span>
<span onclick="loadFrame(3);">Summary for User 3</span>
<iframe src="" name="frame1" id="frame1" style="border:none; width:400px;height:200px;overflow:hidden;"></iframe>
Upvotes: 1
Reputation: 5412
Because everytime your trying to append the content,Instead use html
function to insert the document at particular instance.
function loadFrame(id){
$('#iframecontent').html('<iframe src="loadFrame.php?id=' + id + '&cmd=summary"
name="frame1" id="frame1" style="border:none; width:400px;height:200px;overflow:hidden;">
</iframe>');
}
Html:
<span onclick="loadFrame(1);">Summary for User 1</span>
<span onclick="loadFrame(2);">Summary for User 2</span>
<span onclick="loadFrame(3);">Summary for User 3</span>
<div id="iframecontent"></div>
Upvotes: 0