Solved

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

Posted on 2010-11-16
4
920 Views
Last Modified: 2012-06-21
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
0
Comment
Question by:duncanb7
[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
  • 2
  • 2
4 Comments
 
LVL 20

Expert Comment

by:Proculopsis
ID: 34152972

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

0
 
LVL 13

Author Comment

by:duncanb7
ID: 34154158
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

0
 
LVL 20

Accepted Solution

by:
Proculopsis earned 500 total points
ID: 34178822

This code drops the response into an iframe which allows you to inspect it via dom - the example walks through an external table and recreates it.  (Messy but it seems to work.)

<html>
<head>
<title>
http://www.experts-exchange.com/Programming/Languages/Scripting/AJAX/Q_26619334.html
</title>

<script>

function eventOnLoad()
{
  var url = "http://www.stash.talktalk.net/DiagnosticCodes.htm";
  var request = new XMLHttpRequest();  
  request.onreadystatechange = function()
  {
    if ( request.readyState == 4 )  
    {
      replicateTable( request.responseText );
    }
  }
  request.open( "GET", url, true ); 
  request.send( null ); 
}

function replicateTable( html )
{
  var frame = createFrame();
  frame.document.write( html );
  var inputTable = frame.document.getElementById( "rounded-corner" );
  var outputTable = document.createElement( "table" );
  outputTable.border = 1;

  for ( var i = 0; i < 10; i++ ) //inputTable.rows.length
  {
    var row = outputTable.insertRow(-1);
    for ( var j = 0; j < inputTable.rows[i].cells.length; j++ )
    {
      var cell = row.insertCell(-1);
      cell.innerHTML = inputTable.rows[i].cells[j].innerHTML;
    }
  }
  document.body.appendChild( outputTable );
}

function createFrame()
{
  var id = "i-n-p-u-t-f-r-a-m-e";
  var frame = document.createElement( "iframe" );
  frame.setAttribute( "id", id ); 
  frame.setAttribute( "src", "about:blank" ); 
  frame.style.width = "800px";
  frame.style.height = "494px";
//  frame.style.display = "none";
  document.body.appendChild( frame );
  return document.frames[id];
}

window.onload = function()
{
  eventOnLoad();
}

</script>

</head>
<body>&nbsp;</body>
</html>

Open in new window

0
 
LVL 13

Author Closing Comment

by:duncanb7
ID: 34201319
Thanks for your reply and your trigger
and the problem is fixed
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

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.

Question has a verified solution.

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

Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
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)

690 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