Solved

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

Posted on 2010-09-12
8
414 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
ID: 33656589
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
ID: 33656612
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
ID: 33656648
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
Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

 
LVL 1

Expert Comment

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

just try
0
 
LVL 13

Expert Comment

by:darren-w-
ID: 33656780
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
ID: 33656815
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
ID: 33656844
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
ID: 33712703
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

Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Converting dates in JavaScript 2 35
Best Way to remove the port from a URL? 15 36
Why a span is lower 2 20
Jquery 2 11
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

773 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