How to Load/Replace an Entire DIV from an External HTML File

Experts,
Maybe I am just dreaming....if yes, tell me so.

The Product
***************
Okay, I have a single html file, with 10-20 tabbed links (just like an excel spreadsheet).  When user clicks on a tab, a set of form fields show up in a pane. When he/she clicks on another tab, another set of form fields show. So on and so forth....I am basically replicating the functionality of a workbook with a set of worksheets.

The Problem
***************
Now, in the code behind, since it is all one single html file, there are hundreds of lines of html code for each tab (my requirement dictates to have at least 60-70 form fields on each tab). And as a result, the code is not user friendly and maintainable. All of the form fields for one single tab are encapsulated in a table inside of a DIV.

The Question
****************
Now, is there a way I could completely have the html code inside the DIV tag stored in an external html file and call that file in the parent html? If yes, how?  I am attaching the code for more understanding.

Please let me know. Thanks!

p.s. css and Javascript files required for the html page to function properly are also attached. Please use it if you think you need it.

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

<script src="Tabs.js"></script>
<script src="test.js"></script>
<link rel="stylesheet" type="text/css" href="Tabs.css" /> 
<!-- <link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/css/tabs.css" />   -->
 
 
<script type="text/javascript">
iFetchDataForwardCounter = 0;
var rs; 
bEOF = false;
bBOF = false;
bFetchNextBtnClicked = false;
bFetchPreviousBtnClicked = false;
bBeginningOfFile=false;
bEndOfFile=false;
bFirstTimeLoadingData=false;

 
function DeleteMe()
{
    alert("Test");
} 
  function popitup() {
	
	//var newwindow=window.open('','name','height=100,width=200');
	var newwindow=window.open('popup_win.html','name','height=250,width=350');
}  
function hov(loc,cls) {
  if(loc.className)
    loc.className=cls;
}
</script>

<html>
<body onload = "EmptyFields();">
<form name="frm" method=post action=''> 
<p class="Header">TPP Data Entry System<br>
</p>


<ul class="tabs" style="width:222px;padding-left:15px"> 
      <li><a href="#12">Contr  Eligibility</a></li>
      <li><a href="">Office Eligibility</a></li> 
</ul>
 
<ul class="tabs" style="width:1110px;"> 
      <li><a href="#1">Insured Info</a></li>
      <li><a href="#2">Driver Info</a></li>	  
	  <li><a href="#4">Prior Carrier</a></li>
      <li><a href="#5">Loss History</a></li>
      <li><a href="#6">Location Info</a></li>
	    
	  <li><a href="#7">Location Info 2</a></li>
      <li><a href="#8">Location Info 3</a></li>
      <li><a href="#9">Location Info 4</a></li>
	  <li><a href="#10">Location Info 5</a></li>
	  <li><a href="#11">Policy Eligibility</a></li> 
</ul>


<!-- This is the DIV tag that I am talking about in the question -->
<div class="panes" id="divInsuredInfo">   
	<div>  
		<table border =0 align="Center"> 
		    <tr> 
				<td> </td>					  
				<td> </td> 
				<td> </td>					  
				<td> </td> 
			</tr>
			<tr> 
				<td align="Center" VALIGN="MIDDLE" class = "padded"  >
					<p Class="Fields">  	
						<input type="button" value = "<<<" ID= "btnFetchPrevData" class ="TopRowbtns" onclick = "FetchPrevData()" onmouseover="hov(this,'TopRowbtns TopRowbtnhov')" onmouseout="hov(this,'TopRowbtns')" Disabled = "disabled"> 
					</p>	
				</td>
				<td align="Center" VALIGN="MIDDLE" class = "padded"> 
					<p Class="Fields">  
						<input type="button" value = "Load Data" ID="btnLoadData" class ="TopRowbtns" onclick = "loadData()" onmouseover="hov(this,'TopRowbtns TopRowbtnhov')" onmouseout="hov(this,'TopRowbtns')" > 					
					</p>
				</td> 
				
				<td align="Center" VALIGN="MIDDLE" class = "padded"  >
					<p Class="Fields">  	
						<input type="button" value = "SaveData" class ="TopRowbtns" ID="btnSaveData" onclick = "saveData()" onmouseover="hov(this,'TopRowbtns TopRowbtnhov')" onmouseout="hov(this,'TopRowbtns')" Disabled = "disabled" > 
					</p>	
				</td>
				<td align="Center" VALIGN="MIDDLE" class = "padded"  >
					<p Class="Fields">  
						<input type="button" value = ">>>" class ="TopRowbtns" ID="btnFetchNxtData" onclick = "FetchNextData()" onmouseover="hov(this,'TopRowbtns TopRowbtnhov')" onmouseout="hov(this,'TopRowbtns')" Disabled = "disabled" > 
					</p>	
				</td> 
			</tr>  	
		</table>	

		<table border =0 align="Center"> 
			<tr> 
				<td class="padded"></td>					  
				<td class="padded"></td> 
			</tr>
		</table>

		<table border =0 align="Center"> 
			<tr> 
				<td> </td> 
				<td> </td>					  
				<td> </td> 
				<td class = "RightPad"> </td>					  
				<td> </td> 
				<td> </td> 
				<td> </td> 
			</tr> 
			<tr>
					<td style="font-size:13px;" width=235>
							Ins Info Field 1					
                    </td>
  					<td>
							<input style="font-size:9px;" class = "resizedTxtcontrols" id="DataEntrytxt1" name = "DataEntrytxt1" type="Textbox" />	
					</td>
					<td>
							<input type="button" class ="btn" onclick = "popitup()" onmouseover="hov(this,'btn btnhov')" onmouseout="hov(this,'btn')" >  
					</td>
					<td class = "RightPad"> </td>	
					<td style="font-size:13px;" width=235>
							Ins Info Field 2 
			  		</td>
					<td>
							<input style="font-size:9px;" class = "resizedTxtcontrols" id="DataEntrytxt2" name = "DataEntrytxt2" type="Textbox" />	
					</td>
					<td>
							<input type="button" class ="btn" onclick = "popitup()" onmouseover="hov(this,'btn btnhov')" onmouseout="hov(this,'btn')" >  
					</td>
					
			</tr>  
			
			<tr>
					<td style="font-size:13px;" width=235>
							Ins Info Field 3 
					</td>
					<td>
							<input style="font-size:9px;" class = "resizedTxtcontrols" id="txt3" name = "txt3" type="Textbox" />	
					</td>
					<td>
							<input type="button" class ="btn" onclick = "popitup()" onmouseover="hov(this,'btn btnhov')" onmouseout="hov(this,'btn')" >  
					</td>
					<td class = "RightPad"> </td>	
					<td style="font-size:13px;" width=235>
							Ins Info Field 4 
					</td>
					<td>
							<input style="font-size:9px;" class = "resizedTxtcontrols" id="txt4" name = "txt4" type="Textbox" />	
					</td>
					<td>
							<input type="button" class ="btn" onclick = "popitup()" onmouseover="hov(this,'btn btnhov')" onmouseout="hov(this,'btn')" >  
					</td>
					
			</tr>  
  

		</table>	 
    </div> 
</div>
  
</form>
</body>
</html>


<!-- This JavaScript snippet activates the tabs -->
<script>

// perform JavaScript after the document is scriptable.
$(function() {
      // setup ul.tabs to work as tabs for each div directly under div.panes
      $("ul.tabs").tabs("div.panes > div");
});
</script>

Open in new window

tabs.css
test.js
tabs.png
DoofuSAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

darren-w-Commented:
Hi,

You could look at the JQuery Load command, this can pull in content from an external page then you could embed it into the cells on your table.

They have an example here http://api.jquery.com/load/

This line here: $('#result').load('ajax/test.html');

that embeds the html content from test.html into the item with the id #result

so if the file contained the text <p>test</p>

and on the page the content was:

<td id="result"></td>  on the script running it will look like <td id="result"><p>test</p></td>

Hope this is what your looking for.


Darren
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Samuel LiewCommented:
See also jQuery's load function that is able to specify whatever page fragment you want on the external page, for example, a specific <div> with an id 'container'.

$('#result').load('ajax/test.html #container');
0
DoofuSAuthor Commented:
Sorry for my bluntness and ignorance, but that link you sent me to has way too much information that I could possibly understand. I know this is a stupid way of asking but can you show me a simpler example? Again, if you think that is not possible, I will definitely revisit the link and try hard to get some sense. All I need is to place the table html (in my code above) in an external file and have it called every time the page loads. Thanks you everyone for your time.
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

prvijeshCommented:
var html = $.ajax({ type: "POST",
                           url: "/your-url-enter-here",
                           data: '',
                           async: false
                         }).responseText;
                  
              document.getElementById("You_Div).innerHTML = html;

just try
0
darren-w-Commented:
Hi, Doofus,

Unless your using some sort of server side script such as PHP or VBScript this is the simplest its going to get.

With Jquery, you include the jquery file in script tags in the head of the file:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

Then encapsulate the code we gave you in script tags

<script type="text/javascript">
$('#result').load('ajax/test.html');
or
$('#result').load('ajax/test.html #container');
  </script>

in the body of the html you have your html that is modified by the script

<td id="result"></td>

The external file that you link to has the code that goes between the tags

Darren
0
BadotzCommented:
You do not need jQuery, or any other external JavaScript library, to fo this.

Put the HTML for each page on the server, then use Ajax to request them as needed. Treat each page as a "tab", being certain to handle all the CRUD before loading a new "tab" into the <DIV>.

This complicates things a bit for you because the tabs are no longer a single entity. Currently, data entered into tab #5 is not lost when Betty User goes back to tab #2. Putting the code, etc. on the server means that that will no longer be the case.

You might also consider using an <iframe> as the destination for your external HTML. Click a tab and chabge the "src" attribute of the <iframe> to the corresponding HTNL file. This method allows you to create a complete HTML page that can be tested, validated, etc. You can be certain that everything works before you load the page into the <iframe>. You will still have to handle the CRUD before moving away from the "tab"; there is no getting away from that.
0
mgfranzCommented:
If you are looking for a way to make the tab pages easy to maintain, create a separate page of code out of the data for each tab and then use SSI calls where the <DIV> requires them.

<!-- This is the DIV tag that I am talking about in the question -->
<div class="panes" id="divInsuredInfo">  
<!--#include file="../ssi/filename.asp" -->
</div>
0
DoofuSAuthor Commented:
I am sorry for a delayed acceptance. Thanks to every person that responded to my question. It is not that the above two picked ones were the only solutions but it is becuz I built my code based on their responses. I am sure the rest of the responses are equally good. Also, if anyone is interested, please take a look at this question, which is a continuation.
http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/HTML/Q_26484179.html
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.