Solved

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

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

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

Suggested Solutions

Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to count occurrences of each item in an array.

757 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now