Question

I have one of the most frustuating problems i have ever had with a programming language.
Im reading some xml and then trying to display on the web page. i have no problem doing that.
Here is the code of how im accomplishing this.

                   // File: readXML.js

                        var shared     = [];
                        var sheet      = new Array()
                        // Start function when DOM has completely loaded 
                        $(document).ready(function(){ 
                            var bigo       = new Object();
                            console.log("can you see me.");

                            var sheetJoint = new Object();


                            // get the sheet xml file
                            $.get("sheet1.xml",{},function(xml){
                                var attrs = [];

                              // this is a loop within a loop.  we traverse the values in the xml to get end up with a key pair value of key: val
                             // in our case this works out to be A1 = 0 this is the first step to get the actual value from the sharedstring.xml
                            //  Run the function for each row tag in the XML file
                            $(xml).find("row").each(function(i) {
                              //run the function for each c tag in the xml and get the attribute. 
                              //this is the attribute that references the actual column.
                                $(this).find("c").each(function(i){
                                    $('c',xml).each(function(i) {
                                          v1 = $(this).attr("r");
                                       bigo[v1] =v1;
                                           bigo[v1]= $(this).find("v").text();
                                });
                         })});

                            //get the shared string elements to combine with the other 
                            $.get("sharedStrings.xml",{},function(xml){
                                    $('si',xml).each(function(i)    {
                                        shared.push($(this).find("t").text());

                                })});


                            });
                            combineObjects(bigo);//combine the the array and the object.
                        });

since i have two read two different xml files i have to use another function to combine them. Here is that function.

  function combineObjects(obj){
                            myHTMLOutput = '';
                            myHTMLOutput += '<table width="98%" border="1" cellpadding="0" cellspacing="0">';
                            myHTMLOutput += '<th>A</th>';


                        //mydiv=document.getElementById("ContentArea")

                    try{
                        var strt="";
                        var tempVal;
                    //loop throught the obejct and get the value from the returnTheValueSegment.

                    for (var ind in obj){ 
                      //if you want to print something to the log then just add this. 
                      // pretty handy when trying to discover variable values. does not see to work well inside  for loops thought.
                      // console.log("can you see me.");
                       tempVal = returnTheValueOfSegment(obj[ind]);
                    //bring the values 
                       obj[ind] = tempVal;

                       }

                      for (var ind in obj){


                                mydata = BuildStudentHTML(ind);
                                myHTMLOutput = myHTMLOutput + mydata;


                         }
                            myHTMLOutput += '</table>';
                                $("#ContentArea").append(myHTMLOutput);
                     }
                        catch(err){alert(err)};

                    }

my problem occurs when i’m creating the table. its basically hit or miss…
if i try it in firefox it work only if i use firebug and step through the code otherwise it doe s not show the table elements.

here is the code that is being called to make the table.

                        function BuildStudentHTML(column1){



                            // Build HTML string and return
                            output = '';
                            output += '<tr>';
                            output += '<td>'+ column1 +'</td>';
                            output += '</tr>';
                            return output;
                        }

what could i be doing wrong. do i need some sort of timer? is it that the loop is to fast and the page cant refresh. Please if someone can point me in the right direction i would be for ever grateful.

Answer 1

In your code, combineObjects(bigo); is called before the HTTP requests for the XML files can finish. $.get() starts a new HTTP request and then runs the success function when the request has finished loading. You could try putting combineObjects(bigo); in the success function for the last XML document, but that won’t work because bigo will be undefined in that function. The solution is to create a function that creates a function. Put this before the $(document).ready() function:

function second_XML(bigo){
    return function(xml){
        $('si', xml).each(function (i) {
            shared.push($(this).find("t").text());
        });
        combineObjects(bigo); //combine the the array and the object.
    }
}

This allows you to pass the bigo variable to the function as an outer variable. Next, replace the code that loads the second XML document with this:

//get the shared string elements to combine with the other 
$.get("sharedStrings.xml", {}, second_XML(bigo));

This will make the code wait until the second XML file has loaded before combining the two. For some reason, you already made your code wait for the first XML document to load before loading the second, so you don’t have a problem there.