Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

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

Posted on 2010-09-12
8
416 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
Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
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

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

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

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.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

808 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