Вызов функции с аргументами на успех Ajax?

Question

У меня есть XML-файл с такой структурой:

<?xml version="1.0" encoding="utf-8" ?>
<Photobank>
 <Landowner Name="Arnoldo"> 
  <Photo>
   <Animal>Jaguar</Animal>
   <Category>Cat</Category>
   <Image>Charlie_20111120_010500.JPG</Image>
  </Photo>
  <Photo>
   <Animal>Tapir</Animal>
   <Category>Prey</Category>
   <Image>Charlie_20111120_010500.JPG</Image>
  </Photo>
 </Landowner>
 <Landowner Name="Charlie">
  <Photo>
   <Animal>Margay</Animal>
   <Category>Cat</Category>
   <Image>Charlie_20111120_010500.JPG</Image>
  </Photo>
  <Photo>
   <Animal>Tayra</Animal>
   <Category>Prey</Category>
   <Image>Charlie_20111120_010500.JPG</Image>
  </Photo>
 </Landowner>
</Photobank>

И я хотел бы, чтобы моя страница проанализировала и отформатировала все фотографии для одного землевладельца при начальной загрузке страницы,а затем опустошите div и заполните его фотографиями другого землевладельца при нажатии кнопок.Пока что я могу разобрать XML и получить фотографии нужного землевладельца при начальной загрузке, но у меня возникают проблемы при написании этой функции, чтобы я также мог использовать ее для показа фотографий других землевладельцев.

Вот jQuery Ajax:

$.ajax({
    type: "GET",
    url: "xml/photobank.xml",
    dataType: "xml",
    success: xmlParser
});


function xmlParser(xml) {
    $('#photo_container').empty();
    console.log('1');
    $(xml).find('Landowner').each(function(){
        console.log('2');
        var landownerName = $(this).attr('Name');
        if (landownerName==="Charlie") {
            $(this).find('Photo').each(function(){
                $("#photo_container").append('<div class="photo ' + $(this).find("Category").text().toLowerCase() + '"><p>' + $(this).find("Animal").text() + '</p>'+ '<img class="photobank" src="images/' + $(this).find("Image").text() + '" />' + '</div>');
            })
        }
    });
}

Я хотел бы заменить ==="Charlie" в xmlParser на переменную, которую функция использует в качестве аргумента, но каждый раз, когда я пытаюсь добавить аргументы в объявление функции, начальная загрузка Ajax перестает работать.Любые подсказки?

Код на моей странице разработки ниже пытается использовать кнопку «Арнольдо» для переключения контента, но я не мог зайти слишком далеко.Я также открыт для использования различных методов для достижения этой цели (не Ajax, JSON?), Если это будет лучше.Я просто хочу, чтобы в будущем другим было легко добавлять информацию о фотографиях.

Живой пример: HTML: http://lamanai.org/catmap/index.html

JS: http://lamanai.org/catmap/js/cameramap.js

XML:http://lamanai.org/catmap/xml/photobank.xml

---

Обновление: ShankarSangoli ниже помог мне сформировать функцию так, как я хотел бы, но теперь мой первоначальный вызов Ajax не работает.Я получаю Uncaught Error: Invalid XML: [object Document] в консоли.Я полагаю, что звоню в Ajax не в то время (в настоящее время документ готов).Есть идеи?Смотрите живую страницу со ссылкой выше.

Answer 1

Вы должны проанализировать xml, используя $.parseXML перед его использованием. Вы можете иметь анонимный обработчик успеха и затем вызывать xmlParser, передавая данные XML и другой параметр.

$.ajax({
    type: "GET",
    url: "xml/photobank.xml",
    dataType: "xml",
    success: function(xml){
        xmlParser(xml, "Arnoldo");
    }
});

function xmlParser(xml, landOwner) {

    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('<div class="photo ' + $(this).find("Category").text().toLowerCase() + '"><p>' + $(this).find("Animal").text() + '</p>'+ '<img class="photobank" src="images/' + $(this).find("Image").text() + '" />' + '</div>');
            })
        }
    });
}

Ссылка: http://api.jquery.com/jQuery.parseXML/