Solved

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

Posted on 2010-11-16
4
918 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

Secure Your Active Directory - April 20, 2017

Active Directory plays a critical role in your company’s IT infrastructure and keeping it secure in today’s hacker-infested world is a must.
Microsoft published 300+ pages of guidance, but who has the time, money, and resources to implement? Register now to find an easier way.

Question has a verified solution.

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

Suggested Solutions

OverviewThis article demonstrates a simple search form using AJAX. The purpose of the article is to demonstrate how to use the same code to render a page and javascript (JQuery) and AJAX to make subsequent calls to refine the results. The princip…
3 proven steps to speed up Magento powered sites. The article focus is on optimizing time to first byte (TTFB), full page caching and configuring server for optimal performance.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
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…

726 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