title: jQuery - When trying to parse XML, Uncaught Error: Invalid XML: [object Document]
body: <p>I have some jQuery with an Ajax call that looks like this:</p>
  
  <pre><code>$.ajax({
      type: "GET",
      url: "xml/photobank.xml",
      dataType: "xml",
      success: function(xml){
          xmlParser(xml, "Charlie");
      }
  });
  
  function xmlParser(xml, landOwner) {
  
      //Initial photos do not load if following line is used.
      //xml = $.parseXML(xml);
  
      $('#photo_container').empty();
      console.log('1');
      $(xml).find('Landowner').each(function(){
          console.log('2');
          var landownerName = $(this).attr('Name');
          if (landownerName === landOwner) {
              $(this).find('Photo').each(function(){
                  $("#photo_container").append('&lt;div class="photo ' + $(this).find("Category").text().toLowerCase() + '"&gt;&lt;p&gt;' + $(this).find("Animal").text() + '&lt;/p&gt;'+ '&lt;img class="photobank" src="images/' + $(this).find("Image").text() + '" /&gt;' + '&lt;/div&gt;');
              })
          }
      });
  }
  </code></pre>
  
  <p>You can see the XML file here: <a href="http://lamanai.org/catmap/xml/photobank.xml" rel="nofollow">http://lamanai.org/catmap/xml/photobank.xml</a></p>
  
  <p>However, the Ajax does not display the parsed XML, and throws this error in Chrome's console: <code>Uncaught Error: Invalid XML: [object Document]</code>. Am I calling the Ajax at the wrong time? Right now it is on document ready, since I need the initial "Charlie" category parsed on the initial page load.</p>
  
  <p>If I remove the <code>xml = $.parseXML(xml);</code> line, the initial parsed XML does load, but then I get <code>Uncaught ReferenceError: xml is not defined</code> errors when trying to use the <code>xmlParser</code> function afterwards.</p>
  
  <p>Any hints? This is my first encounter with Ajax.</p>
  
  <p>HTML: <a href="http://lamanai.org/catmap/" rel="nofollow">http://lamanai.org/catmap/</a></p>
  
  <p>JS: <a href="http://lamanai.org/catmap/js/cameramap.js" rel="nofollow">http://lamanai.org/catmap/js/cameramap.js</a></p>
  
  <p>XML: <a href="http://lamanai.org/catmap/xml/photobank.xml" rel="nofollow">http://lamanai.org/catmap/xml/photobank.xml</a></p>
  
  <p>--</p>
  
  <p>Update: The <code>xml = $.parseXML(xml);</code> line was removed, but now I'm having trouble re-using the function. The following code results in <code>xml is not defined</code> errors.</p>
  
  <pre><code>$('#btn_arnoldo').click(function(){
      xmlParser(xml, "Arnoldo");
  });
  </code></pre>
  
  <p>I can use the following Ajax call instead, and have it work, but is it really necessary to do the Ajax each time I want to switch what part of the XML I want to use? I thought the initial Ajax gives me an object that I can parse from?</p>
  
  <pre><code>$('#btn_arnoldo').click(function(){
      $.ajax({
          type: "GET",
          url: "xml/photobank.xml",
          dataType: "xml",
          success: function(xml){
              xmlParser(xml, "Arnoldo");
          }
      });
  }); 
  </code></pre>