Archive

Posts Tagged ‘ajax’

jQuery: Отмена активных ajax запросов

October 27th, 2011 3 comments

Иногда требуется отменить все активные XHR, либо какую-то часть из них. Для этой нужны я накидал плагин  для jQuery, которые автоматически добавляет все XHR в коллекцию с возможностью указать тег.

 

(function($) {
	$.xhrPool = {};
 
	$.xhrPool.abortAll = function() {
		$.each(this, function(pool, map) {
			$.each(map, function(idx, jqXHR) {
				jqXHR.abort();
				$.xhrPool[pool].splice(idx, 1);
			});
		});
	};
 
	$.xhrPool.abort = function(pool) {
		if (typeof this[pool] != "undefined") {
			$.each(this[pool], function(idx, jqXHR) {
				try {jqXHR.abort();} catch (e) {}
				$.xhrPool[pool].splice(idx, 1);
			});
		}
	};
 
	$.ajaxPrefilter(function(options, originalOptions, jqXHR) {
		var pool = options.xhrpool || "global";
 
		if ( ! $.xhrPool[pool]) {
			$.xhrPool[pool] = [];
		}
 
		$.xhrPool[pool].push(jqXHR);
	});
})(jQuery)

Тег указывается в вызове $.ajax() опцией xhrpool. Без указания этой опции все XHR будут добавляться в $.xhrPool.global. Также доступны 2 метода: $.xhrPool.abortAll() — останавливает все запросы и $.xhrPool.abort(“%pool%”) — останавливает запросы в коллекции с указанным тегом.

Отправка большой формы через Ajax

October 11th, 2011 No comments

Любой кто хотя-бы раз отправить большую форму через Ajax – сталкивался с проблемой, когда в функции отправки приходилось перечислять заново все поля.

Решение проблемы достаточно просто: нам нужна функция которая сама разберет форму.

Первый вариант который приходит в голову:

function parseForm(identifier){
  // Получаем все инпуты содержащиеся в форме
  var inputs = document.getElementById(identifier).getElementsByTagName('input');
  // Инициализируем массив для результатов
  var values = {};
  // Перебираем элементы
  for (var n in inputs){
    values[inputs.n.getAttribute('name')] = inputs.n.getAttribute('value');
  }
}

Но тут есть проблема, в частности с input’ами типа checkbox и radio.

Немного модифицируем функцию что-бы корректно обрабатывать их.

function parseForm(identifier){
  // Получаем все инпуты содержащиеся в форме
  var inputs = document.getElementById(identifier).getElementsByTagName('input');
  // Инициализируем массив для результатов
  var values = {};
  // Перебираем элементы
  for (var n in inputs){
    if(inputs[n].getAttribute('type') == "checkbox"){
      // Если тип - checkbox, то получаем значение checked
      values[inputs[n].getAttribute('name')] = inputs[n].getAttribute('checked');
    }else if(inputs[n].getAttribute('type') == "radio"){
      // Если тип - radio, получаем список всех input с этим именем
      var radios = document.getElementById(identifier).getElementsByName(inputs[n].getAttribute('name'));
      // Перебираем их
      for (var i in radios){
        // Если текущий элемент выделен то ложим в результат его значение
        if(radios[i].getAttribute('checked')){
          values[inputs[n].getAttribute('name')] = radios[i].getAttribute('value');
        }
      }
    }else{
      values[inputs[n].getAttribute('name')] = inputs[n].getAttribute('value');
    }
  }
 
  return values;
}

Вот казалось бы и все, но мы еще забыли про select.
Для него придется добавить в функцию еще часть:

var selects = document.getElementById(identifier).getElementsByTagName("select");
 
for(s in selects){
    var options = selects[s].getElementsByTagName("option");
    // Перебираем их
    for (var i in options){
      // Если текущий элемент выделен то ложим в результат его значение
      if(options[i].getAttribute('selected')){
        values[selects[n].getAttribute('name')] = options[i].getAttribute('value');
      }
    }
}

Реализация этого кода на jQuery останется домашним заданием 🙂