Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 30.01.2013, 18:46
Новичок на форуме
Отправить личное сообщение для Кибран Посмотреть профиль Найти все сообщения от Кибран
 
Регистрация: 30.01.2013
Сообщений: 1

Обработка кликов на кнопку без перезагрузки страницы
Здравствуйте, форумчане.

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

Последний раз редактировалось Кибран, 30.01.2013 в 18:50. Причина: Поправка кода
Ответить с цитированием
  #2 (permalink)  
Старый 30.01.2013, 19:30
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

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

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

Не забудьте принять этот объект в качестве аргумента, тоесть
$(".search-button").click(function(e) ...
Ответить с цитированием
  #3 (permalink)  
Старый 30.01.2013, 19:32
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Перезагрузка jquery по событию click, без полной перезагрузки страницы Vitaliy88 Общие вопросы Javascript 4 22.11.2012 11:35
Как можно сделать подгрузку и смену изображения без перезагрузки страницы с другого Евгений Болгов jQuery 11 21.10.2010 18:18
Изменение содержания страницы без полной перезагрузки самой страни gelo Events/DOM/Window 7 29.08.2010 02:03
Подскажите как в VLC плеере переключать канал без перезагрузки страницы? mff Events/DOM/Window 0 10.05.2010 17:28
Автообновление <div> без перезагрузки страницы Antihrist AJAX и COMET 14 28.07.2008 06:06