How to load external page inside IFrame when I click on a tab?

geekisthenewsexy · November 11, 2010

hi guys, i was wondering if anyone here can help me. i'm making a toggled div here with several tabs that when a particular tab is clicked, an external page say page1.html, would be loaded inside an IFrame inside the div. i've been searching for tutorials regarding this but my problem is i don't know how to implement it on my code..

here's the html code guys and i hope you'll be able to help me out..and oh, please don't mind the php code inside.

i got this code by the way from http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/ and did some tweaking..

<body>	
	<div id="tablewrapper">
	<div id="formtable">+ <a href="javascript:animatedcollapse.toggle('viewform')">Options</a> | <a href="javascript:reloadpage" onClick="window.location.reload()">Reload page</a>
        <div id="viewform" class="faq-ans">
	<!----START OF JQUERY TAB---->

<!--div class="container"-->
<div class="tabBox" style="clear: both;">
<div class="tabArea">
    <ul class="tabs">
        <li class="active"><a href="#tab1">Add Record</a></li>

        <li class=""><a class="tab" href="viewcourse.php" target="tabIframe2">View Courses</a></li>
        <li class=""><a href="#tab3">Resources</a></li>
        <li><a href="#tab4">Contact</a></li>
    </ul>
</div>
    <div class="tab_container">
        <div style="display: none;" id="tab1" class="tab_content">
             <h2><tr> 
      <td><div align="center" style="border:1px solid #BCD4EC; color:red; background: #ecf2f6"><b>Note: <i>Please fill in all required fields (*)</i>.</b></div></td>
    </tr></h2>
	<div style="padding:4px; border:1px solid #BCD4EC; background: #ecf2f6">
	<!--START OF FORM FOR ADDING RECORD-->
<table cellpadding="0" cellspacing="0" border="0" class="tform">
<tr> 
      <td>
	<form name="form1" method="post" action="adnew.php">
		<tr>
		<td>*Course:</td><td> <input type="text" name="course"></td>
		<td>*Year:</td><td> <select name="year">
 <option value="">Select One</option>
            <option value="Firstyear">Firstyear</option>
            <option value="Secondyear">Secondyear</option>
          <option value="Thirdyear">Thirdyear</option>
<option value="Fourthyear">Fourthyear</option>
<option value="Fifthyear">Fifthyear</option>
</select></td>
      <td>*Block:</td><td> <input type="text" size="15" maxlength="15" name=block[]></td>
  <td><input type="Submit" name="submit" value="Add record"></td>
  </tr>
  <tr>
   <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td>
          <div id="container" align="right"></div>
        </td>
    </tr>
    <tr>
  <td> </td>
    <td> </td>
	  <td> </td>
	    <td> </td>
		  <td> </td>
      <td><div align="center">[<a href="javascript:void(0);" onClick="AddTextBox();return false;">add textbox</a>]</div></td>
    </tr>
       <?php
echo "<input type='hidden' name='c_id' value='$row[c_id]'/>";
echo "<input type='hidden' name='c_name' value='$row[c_name]'/>";
?>
</form> 	 

</td>
    </tr>	
</table>
</div>
      </div>     <!--END-->
    <br>
        <div style="display: none;" id="tab2" class="tab_content">
	 <div class="tabMain">
            <h2>View Courses</h2>
	<div class="tabIframeWrapper"><iframe class="tabContent" name="tabIframe2" src="viewcourse.php" marginheight="8" marginwidth="8" frameborder="0"></iframe> //**external page should be loaded here..*//
</div>
		</div>
        </div>
        <div style="display: none;" id="tab3" class="tab_content">
            <h2>Resources</h2>
          	<a href="http://www.designbombs.com/fashion/lukas-mynus/"><img src="Simple%20Tabs%20with%20CSS%20&%20jQuerydemo_files/mynus_thumb.gif" alt="wa"></a>
            <h3><a href="http://www.designbombs.com/">www.DesignBombs.com</a></h3>
            <p>tttt</p> 
            
        </div>
        <div style="display: block;" id="tab4" class="tab_content">
            <h2>Contact</h2>
            <a href="http://www.designbombs.com/illustrations/esteban-munoz/"> <img src="Simple%20Tabs%20with%20CSS%20&%20jQuerydemo_files/estebanmunoz_thumb.gif" alt=""></a>
            <h3><a href="http://www.designbombs.com/">www.DesignBombs.com</a></h3>
            <p>ffff</p>
        </div>
    </div>
</div>

<!--END-->
	</div>
	</div>

here's for the jscript:

<script type="text/javascript">
$(document).ready(function() {

//Default Action

$(".tab_content").hide(); //Hide all content

$("ul.tabs li:first").addClass("active").show(); //Activate first tab

$(".tab_content:first").show(); //Show first tab content

//On Click Event

$("ul.tabs li").click(function() {

$("ul.tabs li").removeClass("active"); //Remove any "active" class

$(this).addClass("active"); //Add "active" class to selected tab

$(".tab_content").hide(); //Hide all tab content

var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content

$(activeTab).fadeIn(); //Fade in the active content

return false;

});

});

</script>

nano · November 11, 2010

I take it you stripped some code out from the body because there are table cells all over the place :-\

Here is sample HTML template page that you can review and rework:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="keywords" content="" /> 
	<meta name="description" content="" />
	<title>TAB ELEMENT HTML</title>	 
	<style type="text/css">
	ul.tabs {
		margin: 0;
		padding: 0;
		float: left;
		list-style: none;
		height: 32px; /*--Set height of tabs--*/
		border-bottom: 1px solid #999;
		border-left: 1px solid #999;
		width: 100%;
	}
	ul.tabs li {
		float: left;
		margin: 0;
		padding: 0;
		height: 31px; /*--Subtract 1px from the height of the unordered list--*/
		line-height: 31px; /*--Vertically aligns the text within the tab--*/
		border: 1px solid #999;
		border-left: none;
		margin-bottom: -1px; /*--Pull the list item down 1px--*/
		overflow: hidden;
		position: relative;
		background: #e0e0e0;
	}
	ul.tabs li a {
		text-decoration: none;
		color: #000;
		display: block;
		font-size: 1.2em;
		padding: 0 20px;
		border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/
		outline: none;
	}
	ul.tabs li a:hover {
		background: #ccc;
	}
	html ul.tabs li.active, html ul.tabs li.active a:hover  { /*--Makes sure that the active tab does not listen to the hover properties--*/
		background: #fff;
		border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/
	}
	.tab_container {
		border: 1px solid #999;
		border-top: none;
		overflow: hidden;
		clear: both;
		float: left; width: 100%;
		background: #fff;
	}
	.tab_content {
		padding: 20px;
		font-size: 1.2em;
	}
	</style>
    </head>
    <body>

	<ul class="tabs">
		<li><a href="#tab1">First Tab</a></li>
		<li><a href="#tab2">Second Tab</a></li>
		<li><a href="#tab3">Third Tab (iFrame)</a></li>
	</ul>

	<div class="tab_container">

		<div id="tab1" class="tab_content">
			<p>Content for Tab 1</p>
		</div>

		<div id="tab2" class="tab_content">
			<p>Content for Tab 2</p>
		</div>

		<div id="tab3" class="tab_content">
			<iframe src ="page1.html" width="100%" height="300">
				<p>Your browser does not support iframes.</p>
			</iframe>
		</div>

	</div>

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function() {

		//When page loads...
		$(".tab_content").hide(); //Hide all content
		$("ul.tabs li:first").addClass("active").show(); //Activate first tab
		$(".tab_content:first").show(); //Show first tab content

		//On Click Event
		$("ul.tabs li").click(function() {

			$("ul.tabs li").removeClass("active"); //Remove any "active" class
			$(this).addClass("active"); //Add "active" class to selected tab
			$(".tab_content").hide(); //Hide all tab content

			var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
			$(activeTab).fadeIn(); //Fade in the active ID content
			return false;
		});

	});
	</script>

</body>
</html>

Your markup is not very semantic, it's always best to make sure you separate the content from the styles. Try to avoid using line breaks, inline styles and make sure you validate your code.

I put the JS at the bottom of the page, just before the closing body tag as this helps with the page load time.

Good luck and let me know if you need a hand

geekisthenewsexy · November 12, 2010

hey thanks for the response nano.

pardon my noobness.

i'm just self-studying programming but i'm kind of getting the hang of it.

thanks for the advise. i'll try it out. :-*

geekisthenewsexy · November 17, 2010

hey there. sorry for the wait. been busy with work for a coupla days

okay, that went great nano!

thanks!

but i have a question though.

now that the iframe's working, do you have any ideas how to refresh the parent page (the page where the iframe is displayed) based on the action inside the iframe?

like for example, the iframe loads an external page which contains a delete form. so now when i delete some record, i want the to be able to refresh the parent page to see what has been deleted on the table..

i hope you get that.

i'm having trouble getting it started.. :-\

nano · November 18, 2010

Hmm rather then using an iframe, I wonder if it would be better to do an AJAX call for the content?

If your content you are loading, is just a raw PHP file containing a table then that might work.

jQuery load() - http://api.jquery.com/load/

Example:

$(document).ready(function() {
$('#tab3').load('table.php');
});

If you're file contains all the HTML body tags etc, as in a new page - you can do the following to just pull back a certain section:

$(document).ready(function() {
$('#tab3').load('table.php #container');
});

Then have a button inside your table.php file - that on press, it will simply run a function that loads the content within that div again (triggers the same code as above) - this will mean you won't have to reload the whole page each time.

Let me know if that works.. I never like playing with iframes

geekisthenewsexy · November 22, 2010

hey there, i'm back.

uhm, i didn't quite catch that nano.. :confused:

sorry if i didn't make it clear..but i think this will clear things up..

<?php
include("dbcon.php");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="style.css"/>
</head>
<body> 
<table cellpadding="0" cellspacing="0" border="0" id="table" class="tableview">
<?php
echo '<br/>';
echo '<tr><th class="nosort"><h3> ID</h3><th> Course</th></th><th></th></tr>';
$sql=mysql_query("SELECT * FROM course")or die(mysql_error()); 
$OutLine = array('id'=>'','course'=>'');
while($row=mysql_fetch_array($sql))
{
$OutLine['id'] = $row['c_id'];
$OutLine['course'] = $row['c_name'];
$countroom=0;
if($row>$countroom)
{
echo "<td>".implode('<td/>',$OutLine);
echo '<td align="center">[<a href="editcourse.php?id='.$row['c_id'].'&course='.$row['c_name'].'">Edit</a>] [<a href="delcourse.php?id='.$row['c_id'].'&course='.$row['c_name'].'" onClick="return confirm(\'You are about to delete Course '.$row['c_name'].' and all related records! You will not be able to undo this operation! Delete?\');return false;">Delete</a>]</td>';
echo "</tr>";
}
else
{
echo "<tr>";
echo "<td>No courses added yet.</td>";
echo "</tr>";
}
}
?>
</table>
</body>
</html>

this is the page loaded inside the iframe. when i click on delete (note that i'm not using a button) and confirm this,it will send me to 'delcourse.php'-->

<?php

include("dbcon.php");

if (isset($_GET['id']) && is_numeric($_GET['id']))

{

$id=$_GET['id'];

$course=$_GET['course'];

$result = mysql_query("DELETE FROM course WHERE c_id='$id'") or die(mysql_error());

$result = mysql_query("DELETE year.*, block.* FROM year,block WHERE year.y_id=block.y_id AND year.c_id='$id'") or die(mysql_error());

}

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Delete rooms</title>

function refreshParent()

{

window.parent.location.reload();

//used this script but the parent won't stop reloading every 2 seconds unless i click the refresh button///

}

</script>

</head>

<center>Record has been deleted!<p>You will be redirected back shortly..</p></center>

</body>

</html>

this is the page loaded after i confirm the deletion from 'viewcourse.php'. take note that this is inside the iframe too. notice inside the body tag that i've put a message for the user indicating that the delete was successful. so after 2 seconds 'index.php', the page where the iframe and its contents is nested,should automatically refresh itself..or something like that..i actually like the idea of iframes. i understand it better than ajax..i hope you got some ideas.. :-\

Sign In

How to load external page inside IFrame when I click on a tab?

Recommended Posts

geekisthenewsexy

Link to comment

Share on other sites

nano

Link to comment

Share on other sites

geekisthenewsexy

Link to comment

Share on other sites

geekisthenewsexy

Link to comment

Share on other sites

nano

Link to comment

Share on other sites

geekisthenewsexy

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information