Вызов функции с аргументами успеха 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

---

Update: 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/