Здравствуйте, форумчане.
Есть задача: по клику на кнопку подгружать JSON-массив, который находится по адресу "rest/wines/search/"+document.getElementById("search").value (т.е. статичная строка плюс строка, введенная пользователем в поле) и вывести значение каждого ключа в <ul>.
Получилось у меня такое:
$(".search-button").click(function()
{
$("nav-list").load($.getJSON('rest/wines/search'+document.getElementById("search").value, function(list)
{
//Execute this function for every JSON object
$.each(list, function(id, key)
//Make a string and add to nav-list
{
$('<li><a href=#' + id + '>' + key.name +'</a></li>').appendTo(".nav-list")
});
}))
})
Но, увы, не взлетело. При клике на кнопку страница просто перезагружается, ничего не выводя. Понимаю, что неверно привязал функцию к кнопке (поскольку должен сработать AJAX), но не могу понять, где ошибка.
На всякий пожарный кидаю код кнопки:
<button type="submit" class="btn btn-mini search-button">Search</button>
P.S. После этого следует обрабатывать клик на один из созданных скриптов линк, выводя данные из уже полученного одного из JSON-обьектов в текстовые поля, но, как мне кажется, если разберусь с текущей проблемой, то ничего более сложного не предстоит с реализацией этого