Jump to content
Gilbert

How do I invoke multiple functions automatically

Recommended Posts

Hi,  I've made an html page that invokes a function automatically ( using the parentheses b/4 & after ) to make a table from an XML file.  It worked great with a little help from you guys.  I then made another one to read a different XML file and that worked great.  I want to put both tables on the same page so I made a couple of 'divs' and positioned each in a column formation.   That part seems to work well, but I am calling the 2 functions to make the tables consecutively and it doesn't work as I wanted.   When I open this file in a browser, as it is here, I get only the second table in the second column correctly; and if I comment out the second table, I get only the first table in the first column correctly.  I've included the code below; I hope someone can tell me how to do this.   Also just a sample of the 2 XMLs I'm trying to display.   Do I need a wrapper function with the others invoked from it, or something like that.  Thanks

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Service Club Collections</title>
    <style>
        .wholePage { position: relative; width: 1350px; height: 2000px; border: 2px solid red; margin:auto;}
        .scColl { position:absolute; top:0; left:0; width:1050px; height:2000px; border:2px solid red;}
        .scTot { position: absolute; top: 0; right: 0; width: 250px; height: 2000px; border: 2px solid red;}
        #collections { position:absolute; top:0; left:0;}
        #totals { position:absolute; top:0; right:0;}
        table, th, td { border: 1px solid red; border-collapse: collapse;}
        th, td { padding: 7px 10px;}
        th { font-size:14px; color: firebrick;}
        td { font-size:12px; color: darkolivegreen; text-align: center;}
    </style>
</head>

<body>
    <a href="ringerinfo.html" type="button">Return</a>
    <div class="wholePage">
        <div class="scColl">
            <table id="collections"></table>
        </div>

        <div class="scTot">
            <table id="totals"></table>
        </div>
    </div>

    <script>
        (function loadXMLCollDoc() {
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    myFunction(this);
                }
            };
            xmlhttp.open("GET", "datafiles/servClubColl.xml", true);
            xmlhttp.send();
        })();
        function myFunction(xmlcoll) {
          var i;
          var xmlDoc = xmlcoll.responseXML;
          var table ="<tr><th>Service Club</th><th>Ring Date</th><th>Location</th><th>Start Time</th><th>End Time</th><th>Total Bills</th><th>Total Coins</th><th>Total Checks</th><th>Total Kettle</th></tr>";
          var x = xmlDoc.getElementsByTagName("scCollections");
          for (i = 0; i <x.length; i++) {
             table += "<tr><td>" +
             x[i].getElementsByTagName("RingerName")[0].childNodes[0].nodeValue +
                "</td><td>" +
             x[i].getElementsByTagName("RingDate")[0].childNodes[0].nodeValue +
                "</td><td>" +
             x[i].getElementsByTagName("Location")[0].childNodes[0].nodeValue +
                "</td><td>" +
             x[i].getElementsByTagName("SchedStart")[0].childNodes[0].nodeValue +
                "</td><td>" +
             x[i].getElementsByTagName("SchedEnd")[0].childNodes[0].nodeValue +
                "</td><td>" +
             x[i].getElementsByTagName("Bills")[0].childNodes[0].nodeValue +
                "</td><td>" +
             x[i].getElementsByTagName("Coins")[0].childNodes[0].nodeValue +
                "</td><td>" +
             x[i].getElementsByTagName("Checks")[0].childNodes[0].nodeValue +
                "</td><td>" +
             x[i].getElementsByTagName("AmountCollected")[0].childNodes[0].nodeValue +
                "</td></tr>";
           }
          document.getElementById("collections").innerHTML = table;
        }
        
        (function loadXMLTotDoc() {
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    myFunction(this);
                }
            };
            xmlhttp.open("GET", "datafiles/scTotals.xml", true);
            xmlhttp.send();
        })();
        function myFunction(xmltot) {
            var i;
            var xmlDoc = xmltot.responseXML;
            var table = "<tr><th>Service Club</th><th>Seasonal Total</th></tr>";
            var x = xmlDoc.getElementsByTagName("Totals");
            for (i = 0; i < x.length; i++) {
                table += "<tr><td>" +
                    x[i].getElementsByTagName("ServClub")[0].childNodes[0].nodeValue +
                    "</td><td>" +
                    x[i].getElementsByTagName("TotalAmount")[0].childNodes[0].nodeValue +
                    "</td></tr>";
            }
            document.getElementById("totals").innerHTML = table;
        }
        
    </script>

</body>
</html>

Here is just a sample of the XML data files  ***********************************

<?xml version='1.0' encoding='utf-8'?>
<dataroot>
   <scCollections>
      <RingerName>1st National bank scotia</RingerName>
      <RingDate>Dec  12  -  Mon</RingDate>
      <Location>Price Chopper Niskayuna Left Door</Location>
      <SchedStart>9:00 am</SchedStart>
      <SchedEnd>9:00 pm</SchedEnd>
      <Bills>$ 243</Bills>
      <Coins>$ 27</Coins>
      <Checks>$ 00</Checks>
      <AmountCollected>$ 270</AmountCollected>
   </scCollections>
   <scCollections>
      <RingerName>Advisory Board</RingerName>
      <RingDate>Dec  9  -  Fri</RingDate>
      <Location>Co-Op Nott St  Niskayuna</Location>
      <SchedStart>9:00 am</SchedStart>
      <SchedEnd>1:00 pm</SchedEnd>
      <Bills>$ 131</Bills>
      <Coins>$ 15</Coins>
      <Checks>$ 00</Checks>
      <AmountCollected>$ 146</AmountCollected>
   </scCollections>
   <scCollections>
      <RingerName>Beukendall Eastern Star</RingerName>
      <RingDate>Dec  7  -  Wed</RingDate>
      <Location>Price Chopper Glenville Main Dr</Location>
      <SchedStart>9:00 am</SchedStart>
      <SchedEnd>7:00 pm</SchedEnd>
      <Bills>$ 283</Bills>
      <Coins>$ 64</Coins>
      <Checks>$ 100</Checks>
      <AmountCollected>$ 447</AmountCollected>
   </scCollections>
   <scCollections>
      <RingerName>Beukendall Eastern Star</RingerName>
      <RingDate>Dec  8  -  Thu</RingDate>
      <Location>Price Chopper Glenville Main Dr</Location>
      <SchedStart>9:00 am</SchedStart>
      <SchedEnd>7:00 pm</SchedEnd>
      <Bills>$ 415</Bills>
      <Coins>$ 38</Coins>
      <Checks>$ 00</Checks>
      <AmountCollected>$ 453</AmountCollected>
   </scCollections>
</dataroot>

AND *********************************

<?xml version='1.0' encoding='utf-8'?>
<dataroot>
   <Totals>
      <ServClub>1st National bank scotia</ServClub>
      <TotalAmount>$ 270</TotalAmount>
   </Totals>
   <Totals>
      <ServClub>Advisory Board</ServClub>
      <TotalAmount>$ 146</TotalAmount>
   </Totals>
   <Totals>
      <ServClub>Beukendall Eastern Star</ServClub>
      <TotalAmount>$ 900</TotalAmount>
   </Totals>
   <Totals>
      <ServClub>Corps Band</ServClub>
      <TotalAmount>$ 190</TotalAmount>
   </Totals>
   <Totals>
      <ServClub>General Electric Volunteers</ServClub>
      <TotalAmount>$ 2505</TotalAmount>
   </Totals>
</dataroot>

 

Share this post


Link to post
Share on other sites

What would happen if you were to use different variable names for your XMLHttpRequest() -- say,  xmlhttp_1 and xmlhttp_2?  You appear to be cancelling the content of the first object when you replace it with the content of the second.

Roddy

p.s.  If my suggestion works award me with a trophy.

Edited by iwato

Share this post


Link to post
Share on other sites

Hey iwato,  thanx for your quick response - I only had time to have a sandwich.   I thought that 'XMLHttpRequest' was a reserved word - as a constructor or like.   I will give it a whirl and let you know.   How do I award a trophy.  I asked another responder how to mark a post as answered and he said people just change the title of their request to 'solved'.  Can you give me a heads up on that?  thanks,  Gil

I have changed the variable names to separate the 2 functions.  Still the same - I see what you were saying, but I figured one function would be done before the other took effect.  Here's what I've got now.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Service Club Collections</title>
    <style>
        .wholePage { position: relative; width: 1350px; height: 2000px; border: 2px solid red; margin:auto;}
        .scColl { position:absolute; top:0; left:0; width:1050px; height:2000px; border:2px solid red;}
        .scTot { position: absolute; top: 0; right: 0; width: 250px; height: 2000px; border: 2px solid red;}
        #collections { position:absolute; top:0; left:0;}
        #totals { position:absolute; top:0; right:0;}
        table, th, td { border: 1px solid red; border-collapse: collapse;}
        th, td { padding: 7px 10px;}
        th { font-size:14px; color: firebrick;}
        td { font-size:12px; color: darkolivegreen; text-align: center;}
    </style>
</head>

<body>
    <a href="ringerinfo.html" type="button" style="margin:auto">Return</a>
    <div class="wholePage">
        <div class="scColl">
            <table id="collections"></table>
        </div>

        <div class="scTot">
            <table id="totals"></table>
        </div>
    </div>

    <script>
        (function loadXMLCollDoc() {
            var xmlhttpcoll = new XMLHttpRequest();
            xmlhttpcoll.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    myFunction(this);
                }
            };
            xmlhttpcoll.open("GET", "datafiles/servClubColl.xml", true);
            xmlhttpcoll.send();
        })();
        function myFunction(xmlcoll) {
          var i;
          var xmlCollDoc = xmlcoll.responseXML;
          var table ="<tr><th>Service Club</th><th>Ring Date</th><th>Location</th><th>Start Time</th><th>End Time</th><th>Total Bills</th><th>Total Coins</th><th>Total Checks</th><th>Total Kettle</th></tr>";
          var x = xmlCollDoc.getElementsByTagName("scCollections");
          for (i = 0; i <x.length; i++) {
             table += "<tr><td>" +
             x[i].getElementsByTagName("RingerName")[0].childNodes[0].nodeValue +
                "</td><td>" +
             x[i].getElementsByTagName("RingDate")[0].childNodes[0].nodeValue +
                "</td><td>" +
             x[i].getElementsByTagName("Location")[0].childNodes[0].nodeValue +
                "</td><td>" +
             x[i].getElementsByTagName("SchedStart")[0].childNodes[0].nodeValue +
                "</td><td>" +
             x[i].getElementsByTagName("SchedEnd")[0].childNodes[0].nodeValue +
                "</td><td>" +
             x[i].getElementsByTagName("Bills")[0].childNodes[0].nodeValue +
                "</td><td>" +
             x[i].getElementsByTagName("Coins")[0].childNodes[0].nodeValue +
                "</td><td>" +
             x[i].getElementsByTagName("Checks")[0].childNodes[0].nodeValue +
                "</td><td>" +
             x[i].getElementsByTagName("AmountCollected")[0].childNodes[0].nodeValue +
                "</td></tr>";
           }
          document.getElementById("collections").innerHTML = table;
        }
        
        (function loadXMLTotDoc() {
            var xmlhttptot = new XMLHttpRequest();
            xmlhttptot.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    myFunction(this);
                }
            };
            xmlhttptot.open("GET", "datafiles/scTotals.xml", true);
            xmlhttptot.send();
        })();
        function myFunction(xmltot) {
            var i;
            var xmlTotDoc = xmltot.responseXML;
            var table = "<tr><th>Service Club</th><th>Seasonal Total</th></tr>";
            var x = xmlTotDoc.getElementsByTagName("Totals");
            for (i = 0; i < x.length; i++) {
                table += "<tr><td>" +
                    x[i].getElementsByTagName("ServClub")[0].childNodes[0].nodeValue +
                    "</td><td>" +
                    x[i].getElementsByTagName("TotalAmount")[0].childNodes[0].nodeValue +
                    "</td></tr>";
            }
            document.getElementById("totals").innerHTML = table;
        }
        
    </script>

</body>
</html>

 

Edited by Gilbert
added info

Share this post


Link to post
Share on other sites

What happens when you increase the width of your window?  Is your viewport large enough to see both tables side-by-side?  I ask this, because this is how you have them positioned with your CSS. 

.scColl {position:absolute; top:0; left:0;  width:1050px; height:2000px; border:2px solid red;}
 .scTot {position:absolute; top:0; right:0; width:250px;  height:2000px; border:2px solid red;}

Both DIV elements are position top:0.  One is positioned left:0 and the other right:0.  This should produce a row, not column effect.

Yes, XMLHttpRequest is a reserved word, but the variable to which you assign the returned object is not.

It will not disturb your code to name the returned object differently.  In fact, it will increase your ability to manipulate what is returned.

Find the icon in the bottom right corner of any entry and pass your cursor over it.  it is there where you will find the trophy.

Roddy

 

  • Thanks 1

Share this post


Link to post
Share on other sites

You can't have two identical functions with same name, you can send some sort of identifier, for different table, then process on the identifier sent in if/else condition OR of course change one of the function names and refer to that function depending the table you want to produce.

Edited by dsonesuk

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×