Link to home
Start Free TrialLog in
Avatar of DORON ZUR
DORON ZURFlag for Israel

asked on

How to put 2 separate XMLHttpRequest() calls on 2 columns in an html table displaying info AT THE SAME TIME

I am fairly new to XMLHttpRequest() calls.
Please bear with me as I am completely new in this subject.
I have an html table.
in column 1 there is an XMLHttpRequest() call.
I want to put another XMLHttpRequest() call in the 3rd column.
Is this possible ?


<html lang = "en">
<head>
<title>Play Kids 5 Star Flash Games: 2D, Adventure, Mind, Puzzle, Sports</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Young Children, Kids, Youth under 15 flash games online with menu to miscellaneous flash games categories designed for up to 12 and youth">
<meta name="keywords" content="KIDS, FLASH, GAMES, ONLINE, USER FRIENDLY, CHILDREN, ADVENTURE, ARCADE, RACING, FREE, FUN, MIND, PUZZLE, SHOOTING, SKILL, SPORTS, MARIO">

<meta name="google-site-verification" content="_c1nMLPYgE6mF3QyjLNPaNQcizVl6L-bbpTtDvZIEKM" />
</head>

<body>

<TABLE align="left" border=1 bordercolor=red>
<TR>
<TD align="center" colspan="3" bordercolor="blue">
<h1><font color="blue">PUT 2 XMLHttpRequest() calls on 2 columns ?</font></h1>
</TD>
</TR>

<TR>
<TD valign="top">
<div id="container" style="display:block">
    <table id="demo"></table>
        <!--<button type="button" onclick="loadXMLDoc()">Get my CD collection</button>-->
    <!--<br><br>-->
        <script>
    //function loadXMLDoc() {
      var xmlhttp = new XMLHttpRequest();
      xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
          myFunction(xmlhttp);
        }
      };
      xmlhttp.open("GET", "amateur_c.xml", true);
      xmlhttp.send();
    //}
    function myFunction(xml) {
      var i;

      var xmlDoc = xml.responseXML;
     var img = document.createElement("img");
      var table="<tr><th>Title</th><th>Category</th><th>Click Me</th></tr>";
      var x = xmlDoc.getElementsByTagName("Row");
      for (i = 0; i <x.length; i++) { 
    var img = x[i].getElementsByTagName("thumbnail")[0].childNodes[0].nodeValue;
    table += "<tr><td>" +
    x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue +
    "</td><td>" +
   //x[i].getElementsByTagName("url")[0].childNodes[0].nodeValue +
    //"</td><td>" +
    x[i].getElementsByTagName("categories")[0].childNodes[0].nodeValue +
    //"</td><td><img src='"+img+"'></td></tr>";
   
   "</td><td><a href='" +x[i].getElementsByTagName("url")[0].childNodes[0].nodeValue + "'target='iframename'" +"'><img src='"+img+"'></a></td></tr>"
  }
      document.getElementById("demo").innerHTML = table;
    }
    </script>

  </div>
</TD>
<TD>
      
   <iframe src="http://doron-zur.com/home-page.htm" id="iframename" name="iframename" width="900" height="700"> </iframe>

</TD>
<TD>
<font color="blue">this is the 3rd column:
<br>
CAN I PUT another XMLHttpRequest()Call in this Column ?
</font>
</TD>
</TR>
</TABLE>
</body>
</html>

Open in new window

Avatar of DORON ZUR
DORON ZUR
Flag of Israel image

ASKER

PLEASE SEEE THIS WEBSITE FOR A WORKING EXAMPLE, THANK YOU:
http://doron-zur.com/xxchange-question.HTM
Avatar of David Johnson, CD
David Johnson, CD
Flag of Canada image
nopoints: you do realize that flash will not be usable in the new year?
Avatar of Michel Plungjan
Michel Plungjan
Flag of Denmark image
You do not have a call in the cell. Your code is there, but can be placed anytime after the HTML has rendered

Like this 
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    myFunction(target, xmlhttp);
  }
};
let target = "demo1";
xmlhttp.open("GET", "amateur_c.xml", true);
xmlhttp.send();
target = "demo2";
xmlhttp.open("GET", "amateur_d.xml", true);
xmlhttp.send();

function myFunction(target, xml) {
  var i;

  var xmlDoc = xml.responseXML;
  var img = document.createElement("img");
  var table = "<tr><th>Title</th><th>Category</th><th>Click Me</th></tr>";
  var x = xmlDoc.getElementsByTagName("Row");
  for (i = 0; i < x.length; i++) {
    var img = x[i].getElementsByTagName("thumbnail")[0].childNodes[0].nodeValue;
    table += "<tr><td>" +
      x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue +
      "</td><td>" +
      //x[i].getElementsByTagName("url")[0].childNodes[0].nodeValue +
      //"</td><td>" +
      x[i].getElementsByTagName("categories")[0].childNodes[0].nodeValue +
      //"</td><td><img src='"+img+"'></td></tr>";

      "</td><td><a href='" + x[i].getElementsByTagName("url")[0].childNodes[0].nodeValue + "'target='iframename'" + "'><img src='" + img + "'></a></td></tr>"
  }
  document.getElementById(target).innerHTML = table;
}

Open in new window


using

<html lang="en">

  <head>
    <title>Play Kids 5 Star Flash Games: 2D, Adventure, Mind, Puzzle, Sports</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Young Children, Kids, Youth under 15 flash games online with menu to miscellaneous flash games categories designed for up to 12 and youth">
    <meta name="keywords" content="KIDS, FLASH, GAMES, ONLINE, USER FRIENDLY, CHILDREN, ADVENTURE, ARCADE, RACING, FREE, FUN, MIND, PUZZLE, SHOOTING, SKILL, SPORTS, MARIO">
    <meta name="google-site-verification" content="_c1nMLPYgE6mF3QyjLNPaNQcizVl6L-bbpTtDvZIEKM" />
  </head>
  <body>
    <table align="left" border=1 bordercolor=red>
      <tr>
        <td align="center" colspan="3" bordercolor="blue">
          <h1>
            <font color="blue">PUT 2 XMLHttpRequest() calls on 2 columns ?</font>
          </h1>
        </td>
      </tr>
      <tr>
        <td valign="top">
          <div id="container" style="display:block">
            <table id="demo1"></table>
          </div>
        </td>
        <td>

          <iframe src="http://doron-zur.com/home-page.htm" id="iframename" name="iframename" width="900" height="700"> </iframe>

        </td>
        <td class="blue">
        <table id="demo2"></table>
        </td>
      </tr>
    </table>
 <script src="myjvascript.js"></script>
  </body>

</html>

Open in new window

Avatar of DORON ZUR
DORON ZUR
Flag of Israel image

ASKER

xml file:

<?xml version="1.0" encoding="utf-8"?>
<xml>
   <Table>
      <Name>video</Name>
      <Note />
      <Row>
         <url DataType="STRING" Unique="False" Description="" DisplayOrder="1" Label="url">http://doron-zur.com/kids-flash-games/fatfred.htm</url>
         <categories DataType="STRING" Unique="False" Description="" DisplayOrder="2" Label="categories">Arcade</categories>
         <title DataType="STRING" Unique="False" Description="" DisplayOrder="3" Label="title">FatFRED</title>
         <thumbnail DataType="STRING" Unique="False" Description="" DisplayOrder="4" Label="thumbnail">http://doron-zur.com/fatfred.jpg</thumbnail>
         <id DataType="AUTONUMBER" Unique="True" Description="" DisplayOrder="5" Label="id">1</id>
      </Row>
      <Row>
         <url>http://doron-zur.com/kids-flash-games/alien.htm</url>
         <categories>Arcade</categories>
         <title>Alien</title>
         <thumbnail>http://doron-zur.com/alien.jpg</thumbnail>
         <id>2</id>
      </Row>
      <Row>
         <url>http://doron-zur.com/kids-flash-games/golddiggers.htm</url>
         <categories>Arcade</categories>
         <title>Golddiggers</title>
         <thumbnail>http://doron-zur.com/golddiggers.jpg</thumbnail>
         <id>4</id>
      </Row>
      <Row>
         <url>http://doron-zur.com/kids-flash-games/Indiana_Jones_In_Odd_World.htm</url>
         <categories>Adventure</categories>
         <title>IndianaJones OddWorld</title>
         <thumbnail>http://doron-zur.com/indi-odd-world.jpg</thumbnail>
         <id>5</id>
      </Row>
      <Row>
         <url>http://doron-zur.com/kids-flash-games/freaky_fun.htm</url>
         <categories>2 D</categories>
         <title>Freaky Fun</title>
         <thumbnail>http://doron-zur.com/freaky_fun.jpg</thumbnail>
         <id>6</id>
      </Row>
      <Row>
         <url>http://doron-zur.com/kids-flash-games/snow_trouble.htm</url>
         <categories>2 D</categories>
         <title>Snow Trouble</title>
         <thumbnail>http://doron-zur.com/snow_trouble.jpg</thumbnail>
         <id>7</id>
      </Row>
      <Row>
         <url>http://doron-zur.com/kids-flash-games/squirrel_harvest.htm</url>
         <categories>2 D</categories>
         <title>Squirrel Harvest</title>
         <thumbnail>http://doron-zur.com/squirrel_harvest.jpg</thumbnail>
         <id>8</id>
      </Row>
      <Row>
         <url>http://doron-zur.com/kids-flash-games/polar_jump.htm</url>
         <categories>2 D</categories>
         <title>Polar Jump</title>
         <thumbnail>http://doron-zur.com/polar_jump.jpg</thumbnail>
         <id>9</id>
      </Row>
      <Row>
         <url>http://doron-zur.com/kids-flash-games/luckyballs.htm</url>
         <categories>Puzzle</categories>
         <title>Lucky Balls</title>
         <thumbnail>http://doron-zur.com/luckyballs.jpg</thumbnail>
         <id>10</id>
      </Row>
            
      <Row>
         <url>http://play.famobi.com/bubble-woods</url>
         <categories>Shooting</categories>
         <title>Bubble Woods</title>
         <thumbnail>http://doron-zur.com/BubbleWoodsTeaser.jpg</thumbnail>
         <id>11</id>
      </Row>
      
      <Row>
         <url>https://play.famobi.com/element-blocks</url>
         <categories>Shooting</categories>
         <title>Element Blocks</title>
         <thumbnail>http://doron-zur.com/ElementBlocksTeaser.jpg</thumbnail>
         <id>12</id>
      </Row>
      
      <Row>
         <url>http://doron-zur.com/bg.htm</url>
         <categories>Strategy</categories>
         <title>Classic BackGammon</title>
         <thumbnail>http://doron-zur.com/classic-backgammon.jpg</thumbnail>
         <id>13</id>
      </Row>
      
   </Table>
   </xml>

Open in new window

Avatar of Prakash Samariya
Prakash Samariya
Flag of India image
  • You create function to use XMLHttpRequest with basic parameters to use multiple times.
function loadDoc(url, mode) {
      var xmlhttp = new XMLHttpRequest();
      xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
          YouOutputHandle_Function(xmlhttp);
        }
      };
      xmlhttp.open(mode, url, true);
      xmlhttp.send();
}

Open in new window

         parameters like
- url = URL to load using XMLHTTPRequest
- mode = mode of request (GET, POST)
& YouOutputHandle_Function  to handle results
  • Consume function like below in hyperlink 
    <TD> 
   <font color="blue">this is the 3rd column: <br> 
   <a hre="javascript:void(0);" onclick="loadDoc('http://google.com','GET');"> Link Text 
   </a>
   </font>
</TD>

    Open in new window



Avatar of DORON ZUR
DORON ZUR
Flag of Israel image

ASKER

Dear Michel,
the problem is that the table information in column 1 is deleted ('demo 1') and the table information in column 3 ('demo 2') is not.
i want to show table information in both column 1 and column 3 AT THE SAME TIME (synchronously)
Avatar of Michel Plungjan
Michel Plungjan
Flag of Denmark image
Ok, too fast....

Start with this and see if it works and I will get back to you with a better versio

let target = "demo1";
xmlhttp.open("GET", "amateur_c.xml", true);
xmlhttp.send();
setTimeout(function() {
  target = "demo2";
  xmlhttp.open("GET", "amateur_d.xml", true);
  xmlhttp.send();
},2000);

Open in new window

Avatar of DORON ZUR
DORON ZUR
Flag of Israel image

ASKER

Dear Michel,
Much Better !
although there is a timeout of 2 secs...
before demo 2 is live.
you are absolutely fantastic !
I will wait for a better versio ofcourse. Thank You !

Avatar of DORON ZUR
DORON ZUR
Flag of Israel image

ASKER

Michel (thank you sir):

​http://doron-zur.com/xxchange-demo5.html​​​


Avatar of DORON ZUR
DORON ZUR
Flag of Israel image

ASKER

Ofcourse i can shorten the waiting time:
let target = "demo1";
xmlhttp.open("GET", "amateur_c.xml", true);
xmlhttp.send();
setTimeout(function() {
  target = "demo2";
  xmlhttp.open("GET", "amateur_d.xml", true);
  xmlhttp.send();
},500);

Open in new window

Avatar of Michel Plungjan
Michel Plungjan
Flag of Denmark image
Try this

let xmlhttp = new XMLHttpRequest();
const files = [{
    target: "demo1",
    url: "amateur_c.xml"
  },
  {
    target: "demo2",
    url: "amateur_d.xml"
  }
];

let cnt = 0;


function loadFiles() {
  if (cnt >= files.length) return; // stop
  const file = files[cnt];
  let target = file.target
  let url = file.url
  xmlhttp.open("GET", url, true);
  xmlhttp.send();
}


xmlhttp.onreadystatechange = function() {
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    myFunction(files[cnt].target,xmlhttp);
    cnt++;
    loadFiles();
  }
};

window.addEventListener("load",loadFiles); // initialise

function myFunction(target,xml) {
  var i;

  var xmlDoc = xml.responseXML;
  var img = document.createElement("img");
  var table = "<tr><th>Title</th><th>Category</th><th>Click Me</th></tr>";
  var x = xmlDoc.getElementsByTagName("Row");
  for (i = 0; i < x.length; i++) {
    var img = x[i].getElementsByTagName("thumbnail")[0].childNodes[0].nodeValue;
    table += "<tr><td>" +
      x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue +
      "</td><td>" +
      //x[i].getElementsByTagName("url")[0].childNodes[0].nodeValue +
      //"</td><td>" +
      x[i].getElementsByTagName("categories")[0].childNodes[0].nodeValue +
      //"</td><td><img src='"+img+"'></td></tr>";

      "</td><td><a href='" + x[i].getElementsByTagName("url")[0].childNodes[0].nodeValue + "'target='iframename'" + "'><img src='" + img + "'></a></td></tr>"
  }
  document.getElementById(target).innerHTML = table;
}

Open in new window

Avatar of DORON ZUR
DORON ZUR
Flag of Israel image

ASKER

now both columns do not show info ... (may be i did some mistake)
View this please:

​http://doron-zur.com/xxchange-demo7.html​​​


Avatar of DORON ZUR
DORON ZUR
Flag of Israel image

ASKER

<html lang="en">

  <head>
    <title>Play Kids 5 Star Flash Games: 2D, Adventure, Mind, Puzzle, Sports</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Young Children, Kids, Youth under 15 flash games online with menu to miscellaneous flash games categories designed for up to 12 and youth">
    <meta name="keywords" content="KIDS, FLASH, GAMES, ONLINE, USER FRIENDLY, CHILDREN, ADVENTURE, ARCADE, RACING, FREE, FUN, MIND, PUZZLE, SHOOTING, SKILL, SPORTS, MARIO">
    <meta name="google-site-verification" content="_c1nMLPYgE6mF3QyjLNPaNQcizVl6L-bbpTtDvZIEKM" />
  </head>
  <body>
  
  <script>
let xmlhttp = new XMLHttpRequest();
const files = [{
    target: "demo1",
    url: "amateur_c.xml"
  },
  {
    target: "demo2",
    url: "amateur_d.xml"
  }
];

let cnt = 0;


function loadFiles() {
  if (cnt >= files.length) return; // stop
  const file = files[cnt];
  let target = file.target
  let url = file.url
  xmlhttp.open("GET", url, true);
  xmlhttp.send();
}


xmlhttp.onreadystatechange = function() {
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    myFunction(files[cnt].target,xml);
    cnt++;
    loadFiles();
  }
};

window.addEventListener("load",loadFiles); // initialise

function myFunction(target,xml) {
  var i;

  var xmlDoc = xml.responseXML;
  var img = document.createElement("img");
  var table = "<tr><th>Title</th><th>Category</th><th>Click Me</th></tr>";
  var x = xmlDoc.getElementsByTagName("Row");
  for (i = 0; i < x.length; i++) {
    var img = x[i].getElementsByTagName("thumbnail")[0].childNodes[0].nodeValue;
    table += "<tr><td>" +
      x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue +
      "</td><td>" +
      //x[i].getElementsByTagName("url")[0].childNodes[0].nodeValue +
      //"</td><td>" +
      x[i].getElementsByTagName("categories")[0].childNodes[0].nodeValue +
      //"</td><td><img src='"+img+"'></td></tr>";

      "</td><td><a href='" + x[i].getElementsByTagName("url")[0].childNodes[0].nodeValue + "'target='iframename'" + "'><img src='" + img + "'></a></td></tr>"
  }
  document.getElementById(target).innerHTML = table;
}
</script>

    <table align="left" border=1 bordercolor=red>
      <tr>
        <td align="center" colspan="3" bordercolor="blue">
          <h1>
            <font color="blue">PUT 2 XMLHttpRequest() calls on 2 columns synchronously</font>
          </h1>
        </td>
      </tr>
      <tr>
        <td valign="top">
          <div id="container" style="display:block">
            <table id="demo1"></table>
          </div>
        </td>
        <td>

          <iframe src="http://doron-zur.com/home-page.htm" id="iframename" name="iframename" width="900" height="700"> </iframe>

        </td>
        <td class="blue" valign="top">
        <table id="demo2"></table>
        </td>
      </tr>
    </table>
 <script src="myjvascript.js"></script>
  </body>

</html>

Open in new window

Avatar of DORON ZUR
DORON ZUR
Flag of Israel image

ASKER

But, with the shortened waiting time, it is ok...  :)

let target = "demo1";
xmlhttp.open("GET", "amateur_c.xml", true);
xmlhttp.send();
setTimeout(function() {
  target = "demo2";
  xmlhttp.open("GET", "amateur_d.xml", true);
  xmlhttp.send();
},500);

Open in new window

Avatar of Michel Plungjan
Michel Plungjan
Flag of Denmark image
Sorry, the xml is not accessed correctly

 myFunction(files[cnt].target,xmlhttp);

Open in new window

Avatar of DORON ZUR
DORON ZUR
Flag of Israel image

ASKER

Dear Michel,
Can you show the entire code with the correction. Thank You.
Avatar of Michel Plungjan
Michel Plungjan
Flag of Denmark image
I updated my comment too in line 27
Avatar of DORON ZUR
DORON ZUR
Flag of Israel image

ASKER

where do i place this line of code please :

myFunction(files[cnt].target,xmlhttp);

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Michel Plungjan
Michel Plungjan
Flag of Denmark image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of DORON ZUR
DORON ZUR
Flag of Israel image

ASKER

PERFECT ! THANK YOU. WOW !!!
Avatar of DORON ZUR
DORON ZUR
Flag of Israel image

ASKER

David,
Flash files can still be played via BlueStacks...
or via older versions of Internet Explorer.
Avatar of DORON ZUR
DORON ZUR
Flag of Israel image

ASKER

Browsers: PUFFIN or Photon
Avatar of Michel Plungjan
Michel Plungjan
Flag of Denmark image
Thanks for the kind words.


If you create a file called myjavascript.js and copy the code that is now BETWEEN the script tags (excluding the script tags), and save that file in the same folder you will not get 404 on the file I added at the bottom of your page here:

</table>
 <script src="myjvascript.js"></script>
  </body>

</html>

Open in new window


and the page will be just HTML
Avatar of DORON ZUR
DORON ZUR
Flag of Israel image

ASKER

what should be written in the file: myjvascript.js ?
i do not understand.
Avatar of DORON ZUR
DORON ZUR
Flag of Israel image

ASKER

please explain more.
Avatar of DORON ZUR
DORON ZUR
Flag of Israel image

ASKER

GOT IT !
now I have a separate html file and a separate js file (with the code without the <script> </script> tags)
FANTASTIC.

Avatar of DORON ZUR
DORON ZUR
Flag of Israel image

ASKER

THANK YOU MICHEL. :)
Avatar of Michel Plungjan
Michel Plungjan
Flag of Denmark image
You are welcome. Yes, that was what I meant
Avatar of DORON ZUR
DORON ZUR
Flag of Israel image

ASKER

:)