title: Loading a select with jQuery: missing elements
body: <p>This issue is incredibly weird. I'm triying to load a select with a list of towns. I have a function that collects the towns from a .xml file and returns an array with them, and another function that calls the former, and loads the select with the retrieved towns. The function that parses the xml works fine. But the function loading the select doesn't; it only load the first element in the select (there are ten towns in the xml, that are succesfully retrieved by the function that parses the xml file). What is more, if I just debug it with firebug adding several breakpoints, or if I add an alert in the function to show the town array length, then it "magically" works. It's absurd and totally annoying.</p>
  
  <p>Here you have my code:</p>
  
  <pre><code>function PrecargarCampos(){
  /*this function loads the select */
  
      var pueblos = getMunicipios(); //retrieves towns from an .xml
      $(".municipio").each(function() {
          for (i=0;i&lt;pueblos.length;i++) {
              var option = "&lt;option value='" + pueblos[i] + "'&gt;" + pueblos[i] + "&lt;/option&gt;";
              $(this).append(option);
          }
      });
  }
  </code></pre>
  
  <p>Then, if I add an alert...</p>
  
  <pre><code>function PrecargarCampos(){
  /* this function loads the select */
  
      var pueblos = getMunicipios(); //retrieves towns from an .xml
      **alert("Number of towns" + pueblos.length);**
      $(".municipio").each(function() {
          for (i=0;i&lt;pueblos.length;i++) {
              var option = "&lt;option value='" + pueblos[i] + "'&gt;" + pueblos[i] + "&lt;/option&gt;";
              $(this).append(option);
          }
      });
  }
  </code></pre>
  
  <p>... it incredibly works.</p>
  
  <p>I'll also add the piece of code of the function retrieving the towns from the .xml. After debugging it individually, it seems to works fine:</p>
  
  <pre><code>function getMunicipios () {
  /* retrieves town list from .xml */
  
      var municipios = [];
      municipios.push("Foo town");
      var url = getURLroot() + "/data/lists/municip.xml"; //get .xml path
  
      $.get(url, function (xml) {
          $(xml).find("municip").each(function () {
              var nom = $(this).find('nom').text();
              var prov = $(this).find('prov').text();
              var muni = nom + " (" + prov + ")";
              municipios.push(muni);
          });
      });
  
      return municipios; 
  }
  </code></pre>
  
  <p>var municipios is an array that should have 10 items, but in the end, the select is only loaded with the "Foo town" value. As I said, if I turn on the debugger or add a simple alert, the select is correctly loaded with 10 towns.</p>
  
  <p>I'm totally confused and not knowing how to solve it. I will thank any advice. Thank you.</p>