Обработка кликов на кнопку без перезагрузки страницы
 

Здравствуйте, форумчане.

Есть задача: по клику на кнопку подгружать 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-обьектов в текстовые поля, но, как мне кажется, если разберусь с текущей проблемой, то ничего более сложного не предстоит с реализацией этого

Действие по умолчанию кнопки button[type="submit"] - отправка формы. Вот это вы и наблюдаете.

Чтобы отменить это действие, нужно вызвать метод e.preventDefault().
Объект e передается в обработчик onclick (jQuery передает его, обернув в свою обертку, которая имеет точно такой же метод)

Не забудьте принять этот объект в качестве аргумента, тоесть
$(".search-button").click(function(e) ...

Если вы не заботитесь о доступности функций сайта с отключенным JavaScript, то можете просто поменять type="submit" на type="button", тогда у кнопки не будет действия по умолчанию.