Solved

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

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

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Fulfillment API php code sample 1 40
error log using ftp 7 40
What does != "" mean in programming 8 28
Jquery 2 11
jQuery is a JavaScript library that greatly simplifies JavaScript programming. AJAX is an acronym formed from "Asynchronous JavaScript and XML."  AJAX refers to any communication between client and server, when the human client does not observe a…
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…
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…

770 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