Solved

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

Posted on 2010-09-12
8
422 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
[X]
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
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
SharePoint Admin?

Enable Your Employees To Focus On The Core With Intuitive Onscreen Guidance That is With You At The Moment of Need.

 
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

Salesforce Has Never Been Easier

Improve and reinforce salesforce training & adoption using WalkMe's digital adoption platform. Start saving on costly employee training by creating fast intuitive Walk-Thrus for Salesforce. Claim your Free Account Now

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
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…
Suggested Courses

627 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