Question

I’m trying to wrap my head around alternatives for global variables.

Case in question is one where I need to find values in one XML and compare against another XML (or more). Since the XML JQuery is, itself, a function and the operations beneath that are functions inside of a function (ugh) I can’t get a value from 2 functions deep and use it globally.

So it’s presently not possible for me to get an XML value from 1 file and use it filter another XML file, and that’s where I need help.

I’ve been handed 3 XML files.

File 1 – categories.xml – contains a mapping of categories
ex…

<CAT>
      <OA1>True</OA1>
      <OA2>False</OA2>
      <OA3>True</OA3>
      <EP1>True</EP1>
      <EP2>False</EP2>
      <EP3>False</EP3>
</CAT>

File 2 = oa.xml – contains the values of each OA record
ex…

<OA>
      <Name>Name 1</Name>
      <City>City</City>
      <State>ST</State>
</OA>

and so on…

File 3 = EP.xml – contains the values of each EP record
Copy code

<EP>
      <object 1></object1>
      <object 2></object2>
      <object 3></object3>
</EP>

Now, what I thought I could do when I started was to allow the user to select a category, and based upon that selection return 2 tables containing the values that mapped to that category.

My problem is that when JQuery starts parsing XML it does it in a function (in all examples I’ve seen) so I have no idea how to set a variable inside of one function and use it inside of the next function used to open the 2nd file, or the 3rd.

Here is what I have now:
Copy code

<script>
      var catid = ""; // I thought this, being outside of the function would be a global varaible
      OA1 = ""; // I tried it with and without var in front
      var OAid = "";
      $(document).ready(function(){ //When opening an XML we do it in a function
        $.ajax({
            type: "GET",
            url: "xml/categories.xml",
            dataType: "xml",
            success: function(xml) {
                $(xml).find('Cat').each(function(){
                                                //Next 2 rows don't matter b/c I can't use their values outside 
                                                //of the function
                  var catid = $(this).find('Catid').text(); 
                  var OA1 = $(this).find('OA1').text();

                  $('<div class="page-wrap"></div>').html('<table><tr><td>' + catid +'</td><td>OA1 '+ OA1 +'</td></tr></table></div>').appendTo('#page-wrap');

                });
        }
       });
      });
//The only way I know how to open up the next XML, start all over again
      $(document).ready(function(){
        $.ajax({
            type: "GET",
            url: "xml/OA.xml",
            dataType: "xml",
            success: function(xml) {
                $(xml).find('OAData').each(function(){
                  var OAid = $(this).find('OAid').text();
                  $('<div class="page-wrap"></div>').html('<table><tr><td>OA ID is '+ OAid +'</td></tr></table></div>').appendTo('#page-wrap');

                });
            }
          });
         });
</script>
//Somebody shoot me

ANY ADVICE would be most appreciated – I haven’t been able to even consider the compare operation b/c of the variable issue.

Is there a way to compare 2 XML files and I’m just missing it, or can you recommend a solution using some sort of temporary location?

Answer 1

So taking the suggestion of @Kevin B and enhancing it a bit, you can pass values to your different success handler functions easily if you factor those functions out into separate functions.

<script>
      var catid = ""; // I thought this, being outside of the function would be a global varaible
      OA1 = ""; // I tried it with and without var in front
      var OAid = "";
      $(document).ready(function(){ //When opening an XML we do it in a function
        $.ajax({
            type: "GET",
            url: "xml/categories.xml",
            dataType: "xml",
            success: function(xml) {
                $(xml).find('Cat').each(function(){
                                                //Next 2 rows don't matter b/c I can't use their values outside 
                                                //of the function
                  var catid = $(this).find('Catid').text(); 
                  var OA1 = $(this).find('OA1').text();

                  $('<div class="page-wrap"></div>').html('<table><tr><td>' + catid +'</td><td>OA1 '+ OA1 +'</td></tr></table></div>').appendTo('#page-wrap');

                });
              $.ajax({
                type: "GET",
                url: "xml/OA.xml",
                dataType: "xml",
                success: function(xml) { getCategoriesSuccess(xml, catid, OA1, OAid); }
              });
            }
       });
      });

      function getCategoriesSuccess(xml, catid, OA1, OAid) {
        $(xml).find('Cat').each(function(){
                                        //Next 2 rows don't matter b/c I can't use their values outside 
                                        //of the function
          var catid = $(this).find('Catid').text(); 
          var OA1 = $(this).find('OA1').text();

          $('<div class="page-wrap"></div>').html('<table><tr><td>' + catid +'</td><td>OA1 '+ OA1 +'</td></tr></table></div>').appendTo('#page-wrap');

        });
        $.ajax({
            type: "GET",
            url: "xml/OA.xml",
            dataType: "xml",
            success: function(xml) { getOASuccess(xml, OAid); }
          });
         });        
      }

      function getOASuccess(xml, OAid){
        $(xml).find('OAData').each(function(){
          var OAid = $(this).find('OAid').text();
          $('<div class="page-wrap"></div>').html('<table><tr><td>OA ID is '+ OAid +'</td></tr></table></div>').appendTo('#page-wrap');
        });
      }
</script>

So inside your $(document).ready()‘s ajax call’s success handler, you make a second ajax call as @Kevin B suggested. You can pass additional data to this by wrapping a function call inside your success handler. And I’ll pass the data that a second nested function call (inside getCategoriesSuccess) needs in that first call so that it’s available for the second call. So that’s why I pass OAid in the first nested function call because it’s needed inside of getOASuccess.

I’m sure there are other ways to do this, but this gives you a bit of flexiblity with your success handlers.

I hope this helps. Let me know if there are additional questions and I’ll update my answer accordingly. Good luck!