Solved

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

Posted on 2010-09-12
8
407 Views
Last Modified: 2012-05-10
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
0
Comment
Question by:DoofuS
8 Comments
 
LVL 13

Accepted Solution

by:
darren-w- earned 500 total points
Comment Utility
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
 
LVL 14

Expert Comment

by:sam2912
Comment Utility
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
 

Author Comment

by:DoofuS
Comment Utility
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
 
LVL 1

Expert Comment

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

just try
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 13

Expert Comment

by:darren-w-
Comment Utility
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
 
LVL 29

Expert Comment

by:Badotz
Comment Utility
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
 
LVL 18

Expert Comment

by:mgfranz
Comment Utility
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
 

Author Closing Comment

by:DoofuS
Comment Utility
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

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

728 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now