Клик по элементу и ответ аякса (события не связаны)

[sigma77]

Всем привет,

Попробую описать проблему.

Имеется такая структура html-кода

<span id="button">Кнопка</span>
<span id="text">Текст</span>
<input id="field" type="text">

При внесении изменений в инпуте отправляется аякс-запрос.

$('#field').change(function() {
  $.ajax({/* данные запроса */});
});

При нажатии на кнопку, текст должен заменится ответом, полученным из запроса.

Проблема в том, что при клике запрос может быть еще не отработан, соответственно данных не будет и скрипт не исполнится.

Я пока решила эту проблему, использовав $.ajaxComplete() и setInterval:

$('#ajax').ajaxComplete(function() {
  response = jQ.parseJSON(request.responseText);
});

$('#button').click(function() {
  var interval = window.setInterval(function() {
    if (typeof response !== 'undefined') {
      that.renewViewMode(response);
      clearInterval(interval);
    }
  }, 500);
});

Но может есть другие, более лучшие решения?

[Great Rash]

$.ajax.done() разве не отработает после того как ответ получен?

[MiksIr]

Обычно я поступаю через флаг. Т.е. две переменные - с телом ответа и флаг "кнопка нажата".

Если кнопка нажата и тело ответа есть - запускаем функцию записи значения, если тела ответа нет - зажигаем флаг.

В коллбеке по аякс загрузке мы смотрим - если флаг "кнопка нажата" установлен - запускаем функцию записи значения, иначе просто сохраняем тело ответа.

[mishka]

Может так?:

на чейндж инпута убираем обработчик клика с кнопки, и отправляем аякс запрос. А при успешном выполнении навешиваем обработчик клика на кнопку. Типа так:

var button = $('#button');
var text = $('#text');
var field = $('#field');

text.change(function() {
        button.unbind('click');

	$.ajax({
		...., // параметры
		success: function(data) {
			button.bind('click', function() {
				text.text(data)
			});
		}
	});
});

UPD: Или завести флаг, как выше подсказали. С флагом наверное быстрее будет, чем постоянно переопределять обработчик клика.

var button = $('#button');
var text = $('#text');
var field = $('#field');
var msg = false;

button.click(function() {
	if (msg) {
		text.text(msg);
	}
});

text.change(function() {
	msg = false;
	$.ajax({
		...., // параметры
		success: function(data) {
			msg = data
		}
	});
});

[sigma77]

$.ajax.done() разве не отработает после того как ответ получен?

Ты эту имеешь ввиду - http://api.jquery.com/deferred.done/?

В этом же случае событие просто сработает после завершения аякса, не дожидаясь клика...?

mishka, MiksIr,

Т.е. вы предлагаете скрывать кнопку или каким-либо еще образом показывать её неактивность на время выполнения аякса?

Вариант хороший, но скорее всего по дизайну не прокатит.

[mishka]

Вобщето кнопка не скрывается, а просто ничего не происходит при клике по ней пока не будет получен ответ на аяксовый запрос.

[sigma77]

Вобщето кнопка не скрывается, а просто ничего не происходит при клике по ней пока не будет получен ответ на аяксовый запрос.

Это не хорошо. Т.к. кликая по кнопке пользователь будет ожидает от этого какого-либо действия. А если его не будет, то воспримет это как глюк.

Или я так поняла?

[mishka]

Внимательнее прочел твой пост первый.

Думаю что у тебя лучше реализация, только еще надо добавить какую-то крутилку, чтобы юзер видел что хоть что-то происходит и не долбил в ярости по кнопке.

Но и от двойного нажатия тоже надо перестраховаться, чтобы не вызывать сетинтервал 2 раза.

Или отправлять запрос аяксовый не на change, а на клик по кнопке. Ну и далее все тоже: крутилка, перестраховка...

А вообще, вон MiksIr предложил неплохой вариант.

[sigma77]

Внимательнее прочел твой пост первый.

Думаю что у тебя лучше реализация, только еще надо добавить какую-то крутилку, чтобы юзер видел что хоть что-то происходит и не долбил в ярости по кнопке.

Но и от двойного нажатия тоже надо перестраховаться, чтобы не вызывать сетинтервал 2 раза.

Или отправлять запрос аяксовый не на change, а на клик по кнопке. Ну и далее все тоже: крутилка, перестраховка...

Крутилка есть

При клике скрывается кнопка, вместо неё появляется крутилка. Так что по идее проблем с двойным нажатием быть не должно.

Про аякс при клике - это уже буду обсуждать. Так, конечно было бы проще.

[mishka]

Мне больше нравится решение MiksIr

[sigma77]

Мне больше нравится решение MiksIr

Ага. Кажется я поняла.

var isClicked = false;

function doSomething() {
  // Code here
  isClicked = false;
}

$('#ajax').ajaxComplete(function() {
  if (isClicked) {
    doSomething(response);
  }
});

$('#button').click(function() {
  isClicked = true;
  if (typeof response !== 'undefined') {
      doSomething(response);
  }
});

Так?

[mishka]

Да, как-то так.

[Great Rash]

В этом же случае событие просто сработает после завершения аякса, не дожидаясь клика...?

Я что-то не понял, разве аякс не по клику запускается?

UPD: я догнал про что это невнимательно прочитал.

А если просто дизейблить кнопку пока ответ от сервера не получен?

[sigma77]

А если просто дизейблить кнопку пока ответ от сервера не получен?

Этот вариант, я тоже рассматриваю, но его нужно обсуждать, может по дизайну не прокатить.

Либо при аяксе кружочек показывать.

[wwt]

А если просто дизейблить кнопку пока ответ от сервера не получен?

а поверх нее рисовать на это время крутилку как сказали выше чтоб пользователь понимал почему кнопка не активна.

[Great Rash]

а поверх нее рисовать на это время крутилку как сказали выше чтоб пользователь понимал почему кнопка не активна.

Можно еще писать в кнопке "Подождите...", мы же можем менять у нее value.

Только я все равно не пойму нафига там интервал? И вообще таймер...

[sigma77]

Только я все равно не пойму нафига там интервал? И вообще таймер...

Уже сделала без интервала. По этому принципу - http://forum.htmlbook.ru/index.php?showtopic=39680&view=findpost&p=277726

С интервалом было первое решение, т.к. нужно было дождаться ответа аякса, чтобы получить данные для обработки.

Поэтому интервал проверял каждые n секунд появился ли ответ, и, если да, обрабатывал его.

[MiksIr]

А зачем Аякс по изменению поля? Что бы сэкономить время? Но если задача описана как описана, то экономии не будет.

Т.е. если тупо "поле - кнопка", то человек вводит что-то в поле и нажимает кнопку. onChange сработает когда поле получит блюр, а получит оно его в тот момент, когда будет нажата кнопка.

Если у вас много полей - тогда да может, но ясно дело, что человеку нужно что-то говорить, если по нажатию на кнопку данных еще нет.

[nerv]

я вот в конце трудо-дня не могу понять, зачем флаг и таймаут

1. запрос

2. ответ. Нет данных? goto 1

3. do something

единственное что, можно поставить ограничение по времени ожидания, на случай, если данные никогда не придут

Про флаг, понял. На мой взгляд оптимально

А если просто дизейблить кнопку пока ответ от сервера не получен?

+ крутилка

Ну вот, зря только писал

Надо больше отдыхать...

Edited September 27, 2012 by nerv

[s0rr0w]

А можно я вопрос задам, это один из вариантов suggest'а?

[sigma77]

А можно я вопрос задам, это один из вариантов suggest'а?

Нет.

Это функционал для работы с кастомными полями.

Есть карточка клиента, в которую администратор аккаунта может добавлять свои поля: название поля - само поле

При загрузке и для остальных пользователей добавленные поля выглядят обычным образом.

При нажатии на кнопку включается режим редактирования, соответственно администратор может изменить название поля, удалить, либо например добавить дополнительные пункты к полям типа селект, радиокнопки.

Повторное нажатие на кнопку осужествляет выход из режима редактирования и вносит соответствующие изменения в обычный режим.

[s0rr0w]

...

Повторное нажатие на кнопку осужествляет выход из режима редактирования и вносит соответствующие изменения в обычный режим.

Теперь можно пересказать все чуть более подробно, используя id в качестве имен, и привести какой-то сценарий и ожидаемый результат, используя в качестве примера "рыбные" данные. Я, если честно, не совсем сориентировался в задаче.

[nerv]

если честно, не совсем сориентировался в задаче.

я тоже. Поэтому написал какую-то хрень на предыдущей странице и был таков

Edited September 27, 2012 by nerv

[sigma77]

Теперь можно пересказать все чуть более подробно, используя id в качестве имен, и привести какой-то сценарий и ожидаемый результат, используя в качестве примера "рыбные" данные. Я, если честно, не совсем сориентировался в задаче.

Вот как оно приблизительно выглядит - http://jsfiddle.net/TNGEM/6/

В нормальном состоянии это обычные поля, где пользователь может задать значения.

При нажатии на карандашик переходим в режим редактирования, где можем изменять имена полей, удалять их, добавлять option к селектам и т.п.

В режиме редактирования, при внесении изменений в поле приходит ответ, содержащий в т.ч. html-верстку с новыми значениями.

При выходе из режима редактирования (повторном нажатии на карандашик) полученный html заменяется на новый. И пользователь видит измененные значения.

Т.е. было у него

<select>
 <option value="">Вариант 1</option>
 <option value="">Вариант 2</option>
 <option value="">Вариант 2</option>
</select>

Стало, например

<select>
 <option value="">Первый</option>
 <option value="">Второй</option>
 <option value="">Третий</option>
 <option value="">Четвертый</option>
</select>

[s0rr0w]

Насколько я понял, AJAX не нужно гонять при каждом изменении поля, а только при выходе из режима редактирования с подтверждением (не ESC)

[sigma77]

Насколько я понял, AJAX не нужно гонять при каждом изменении поля, а только при выходе из режима редактирования с подтверждением (не ESC)

Сейчас по старой логике аякс запускается именно по onchange каждого поля.

Новую логику, чтобы аякс отправлялся по нажатию на кнопку или при выходе из режима редактирования буду обсуждать.