asked on

Ajax update html table or tag in html and javascript from other htm data file

Dear Experts,

I've a html table with three products, A,B,C and I would like to update every product
in myajax.html file at table row "Today" by AJAX with xmlhttp open from the URL file of
"http:www/mywebsite.com/ product-data.htm which is stored all product left for Today only
and is always changed depend on market need

I start to write myajax.html for Ajax update . And I found problem at
document.getElementbyID("product-A").innerHTML = ajaxRequest.responseText to grab
the data from product-data.htm , I mean I don't know to specifiy the location I need in
production-data.htm

Please advise to get update data for table (row2, col2), (row2, col3), row2, col4)
Below code is my ajax.html with the table and attached code is pruduct-data.htm
which is stored or saved all production data

I read the site, somepeoplesay it is better to use XML format instead of html for Ajax open URL and
some say it is better to use php to seach AJax data. So what is better, please also advise

Thanks a lot

Duncan

************myajax.html*****************<html>
<script language="javascript" type="text/javascript">
function ajaxFunction(){
var ajaxRequest; // The variable that makes Ajax possible!
      if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
ajaxRequest=new XMLHttpRequest();
}
else
{// code for IE6, IE5
ajaxREquest=new ActiveXObject("Microsoft.XMLHTTP");
}
      // Create a function that will receive data sent from the server
      ajaxRequest.onreadystatechange = function(){
            if(ajaxRequest.readyState == 4){
                  document.getElementbyID("product-A").innerHTML = ajaxRequest.responseText;
                  document.getElementbyID("product-B").innerHTML = ajaxRequest.responseText;
                  document.getElementbyID("product-C").innerHTML = ajaxRequest.responseText;
            }
      }
      ajaxRequest.open("GET", "http://mywebsite/product-data.htm", true);
      ajaxRequest.send(null);
}
</script>
<body>
<table>
<tr>
<td>Date</td><td>Product-A</td><td>Product-B</td><td>Product-C</td>
<tr>
<td><div id="today">Today</div></td>
<td><div id="product-A" onchange="ajaxfunction();">12</div></td>
<td><div id="product-B" onchange="ajaxfunction();">18</div></td>
<td><div id="product-C" onchange="ajaxfunction();">20</div></td>
</tr>
<tr>
<td>16/11/2010</td><td>1886</td><td>3888</td><td>3778</td>
</tr>
<tr>
<td>15/11/2010</td><td>2366</td><td>3888</td><td>4558</td>
</tr>
</body>
</html>

*****"Product-data.htm" which is generated from Excel 2003 saveas htm  to store Today's product data


<html xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:x="urn:schemas-microsoft-com:office:excel"
xmlns="http://www.w3.org/TR/REC-html40">

<head>
<meta http-equiv=Content-Type content="text/html; charset=big5">
<meta name=ProgId content=Excel.Sheet>
<meta name=Generator content="Microsoft Excel 11">
<link rel=File-List href="product-data.files/filelist.xml">
<link rel=Edit-Time-Data href="product-data.files/editdata.mso">
<link rel=OLE-Object-Data href="product-data.files/oledata.mso">
<!--[if gte mso 9]><xml>
 <o:DocumentProperties>
  <o:Author>abc</o:Author>
  <o:LastAuthor>abc</o:LastAuthor>
  <o:Created>2010-11-16T18:20:46Z</o:Created>
  <o:LastSaved>2010-11-16T19:21:55Z</o:LastSaved>
  <o:Version>11.9999</o:Version>
 </o:DocumentProperties>
</xml><![endif]-->
<style>
<!--table
	{mso-displayed-decimal-separator:"\.";
	mso-displayed-thousand-separator:"\,";}
@page
	{margin:1.0in .75in 1.0in .75in;
	mso-header-margin:.5in;
	mso-footer-margin:.5in;}
tr
	{mso-height-source:auto;
	mso-ruby-visibility:none;}
col
	{mso-width-source:auto;
	mso-ruby-visibility:none;}
br
	{mso-data-placement:same-cell;}
.style0
	{mso-number-format:General;
	text-align:general;
	vertical-align:middle;
	white-space:nowrap;
	mso-rotate:0;
	mso-background-source:auto;
	mso-pattern:auto;
	color:windowtext;
	font-size:12.0pt;
	font-weight:400;
	font-style:normal;
	text-decoration:none;
	font-family:¿¿¿¿, serif;
	mso-font-charset:136;
	border:none;
	mso-protection:locked visible;
	mso-style-name:¿¿;
	mso-style-id:0;}
td
	{mso-style-parent:style0;
	padding-top:1px;
	padding-right:1px;
	padding-left:1px;
	mso-ignore:padding;
	color:windowtext;
	font-size:12.0pt;
	font-weight:400;
	font-style:normal;
	text-decoration:none;
	font-family:¿¿¿¿, serif;
	mso-font-charset:136;
	mso-number-format:General;
	text-align:general;
	vertical-align:middle;
	border:none;
	mso-background-source:auto;
	mso-pattern:auto;
	mso-protection:locked visible;
	white-space:nowrap;
	mso-rotate:0;}
.xl24
	{mso-style-parent:style0;
	mso-number-format:"Short Date";}
ruby
	{ruby-align:left;}
rt
	{color:windowtext;
	font-size:9.0pt;
	font-weight:400;
	font-style:normal;
	text-decoration:none;
	font-family:¿¿¿¿, serif;
	mso-font-charset:136;
	mso-char-type:none;
	display:none;}
-->
</style>
<!--[if gte mso 9]><xml>
 <x:ExcelWorkbook>
  <x:ExcelWorksheets>
   <x:ExcelWorksheet>
    <x:Name>Sheet1</x:Name>
    <x:WorksheetOptions>
     <x:DefaultRowHeight>330</x:DefaultRowHeight>
     <x:Selected/>
     <x:Panes>
      <x:Pane>
       <x:Number>3</x:Number>
       <x:ActiveRow>13</x:ActiveRow>
      </x:Pane>
     </x:Panes>
     <x:ProtectContents>False</x:ProtectContents>
     <x:ProtectObjects>False</x:ProtectObjects>
     <x:ProtectScenarios>False</x:ProtectScenarios>
    </x:WorksheetOptions>
   </x:ExcelWorksheet>
   <x:ExcelWorksheet>
    <x:Name>Sheet2</x:Name>
    <x:WorksheetOptions>
     <x:DefaultRowHeight>330</x:DefaultRowHeight>
     <x:ProtectContents>False</x:ProtectContents>
     <x:ProtectObjects>False</x:ProtectObjects>
     <x:ProtectScenarios>False</x:ProtectScenarios>
    </x:WorksheetOptions>
   </x:ExcelWorksheet>
   <x:ExcelWorksheet>
    <x:Name>Sheet3</x:Name>
    <x:WorksheetOptions>
     <x:DefaultRowHeight>330</x:DefaultRowHeight>
     <x:ProtectContents>False</x:ProtectContents>
     <x:ProtectObjects>False</x:ProtectObjects>
     <x:ProtectScenarios>False</x:ProtectScenarios>
    </x:WorksheetOptions>
   </x:ExcelWorksheet>
  </x:ExcelWorksheets>
  <x:WindowHeight>8700</x:WindowHeight>
  <x:WindowWidth>20475</x:WindowWidth>
  <x:WindowTopX>600</x:WindowTopX>
  <x:WindowTopY>75</x:WindowTopY>
  <x:ProtectStructure>False</x:ProtectStructure>
  <x:ProtectWindows>False</x:ProtectWindows>
 </x:ExcelWorkbook>
</xml><![endif]-->
</head>

<body link=blue vlink=purple>

<table x:str border=0 cellpadding=0 cellspacing=0 width=156 style='border-collapse:
 collapse;table-layout:fixed;width:117pt'>
 <col width=84 style='mso-width-source:userset;mso-width-alt:2688;width:63pt'>
 <col width=72 style='width:54pt'>
 <tr height=22 style='height:16.5pt'>
  <td height=22 width=84 style='height:16.5pt;width:63pt'></td>
  <td width=72 style='width:54pt'>Today</td>
 </tr>
 <tr height=22 style='height:16.5pt'>
  <td height=22 style='height:16.5pt'>Product-A</td>
  <td align=right x:num>100</td>
 </tr>
 <tr height=22 style='height:16.5pt'>
  <td height=22 class=xl24 style='height:16.5pt'>Product-B</td>
  <td align=right x:num>200</td>
 </tr>
 <tr height=22 style='height:16.5pt'>
  <td height=22 class=xl24 style='height:16.5pt'>Product-C</td>
  <td align=right x:num>300</td>
 </tr>
 <tr height=22 style='height:16.5pt'>
  <td height=22 class=xl24 style='height:16.5pt'>Product-D</td>
  <td align=right x:num>400</td>
 </tr>
 <tr height=22 style='height:16.5pt'>
  <td height=22 class=xl24 style='height:16.5pt'>Product-E</td>
  <td align=right x:num>500</td>
 </tr>
 <tr height=22 style='height:16.5pt'>
  <td height=22 class=xl24 style='height:16.5pt'></td>
  <td></td>
 </tr>
 <tr height=22 style='height:16.5pt'>
  <td height=22 class=xl24 style='height:16.5pt'></td>
  <td></td>
 </tr>
 <![if supportMisalignedColumns]>
 <tr height=0 style='display:none'>
  <td width=84 style='width:63pt'></td>
  <td width=72 style='width:54pt'></td>
 </tr>
 <![endif]>
</table>

</body>

</html>

Open in new window

myajax.html
product-data.htm

Proculopsis

Here's an example which I hope will set you on the rigtht track:

<script>
// http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q__26619334.html

function getData( url ) 
{ 
  var request = new XMLHttpRequest();  
  request.onreadystatechange = function()
  {
    if ( request.readyState == 4 )  
    {
      renderData( request.responseText );
    }     
  } 
  request.open( "GET", url, true ); 
  request.send( null ); 
}

function renderData( data )
{
  var dataRows = data.split( "\r\n" );
  var table = document.createElement("Table");
  table.border = 1;

  for( i = 0; i < 21; i++ )
  {
    var tableRow = table.insertRow(i);
    var dataCells = dataRows[i].split(",");
    for( j = 0; j < dataCells.length; j++ )
    {
      var tableCell= tableRow.insertCell(j);      
      tableCell.innerHTML = dataCells[j];
    }
  }
  document.body.appendChild( table );
} 




getData( "http://www.freemaptools.com/download/postcodes/postcodes.csv" );

</script>

Open in new window

duncanb7

ASKER

Dear Proculopsis,

it is good code for me for tutorial and inclduing http://www.w3schools.com/ajax/ajax_xmlfile.asp
SO there is two responseTEXT and responseXML, is there something bulit-in responseHTML existing ?
that help me to be easily to extract data by DOM in htm/html files

I search site, found some function of responseHTML
http://www.ohjelmointirengas.fi/Ohjelmointi/responseHTML.txt, but I dont know how to use it.
The reason why I'm not using .csv and.xml format because I put a lot of sytle in table data with condtion
and HTMl is easily to display what I see in my excel htm sheet.
document.getElementbyID("product-A").innerHTML = ajaxRequest.responseHTML.getelementbyID("table").table.rows[2].innerHTML.
Dom is not an issue for me, but is it existing xmlhttp.responseHTML ?

Please advise
Ducan

ASKER CERTIFIED SOLUTION

Proculopsis

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

duncanb7

ASKER

Thanks for your reply and your trigger
and the problem is fixed