Два ajax запроса и callback

[cmd]

Приветы!

В OpenCart товар добавляется в корзину с использованием

$('#button-cart').bind('click', function() {

  $.ajax({
     ... // добавляем товар в корзину
  });

});

Я хочу перед этим запросом добавить ещё один свой. Я знаю, что можно вынести "исходный" запрос в функцию и сделать так:

$('#button-cart').bind('click', function() {

	$.ajax({
		...  // тут мой запрос
		}).done(function( html ) {

		add_product_to_cart(); // callback
			
	});		
});

function add_product_to_cart() {
  $.ajax({
      ... // добавляем товар в корзину
  });
}

Все работает, но мне кажется конструкция громоздкая. Мне кажется, что логичнее было бы вынести в функцию мой запрос, а не "исходный". Подскажите, можно ли реализовать 2 последовательных ajax-запроса более простым способом? Я видел водопад, но мне совсем не охота подключать дополнительные библиотеки (даже маленькие).

[keen]

ну по сути всё правильно, я бы только сделал так:

var add_product_to_cart = function () {
  $.ajax({
      ... // добавляем товар в корзину
  });
  ..
};

$.ajax({
	url: '/smth',
	type: 'POST',
	dataType : "json",
	data: {x: 1},
	success: function (json) { 
		..
		add_product_to_cart();		
	},
	...
});

[cmd]

keen, идея в том, что я не хочу исходный код трогать. Или трогать его по-минимуму. Например, такой психодел: перехватить событие $('#button-cart').bind('click', выполнить свой ajax-запрос и в callback имитировать событие $('#button-cart').bind('click'

Нет идей?

[keen]

ну сделайте

var func1 = function () { /* ваш первый аякс-запрос */ },
func2 = function () { /* ваш второй аякс-запрос */ };

$('#button-cart').click(func1);
$('#button-cart').click(func2);

при клике сработают оба обработчика. я правильно понял - это то что надо?

[cmd]

keen, нет. В этом примере они сработают одновременно. Нужно, чтобы первый запрос был закончен _до_началча_ выполнения второго. Проще говоря: последовательно.

[melky]

keen, нет. В этом примере они сработают одновременно. Нужно, чтобы первый запрос был закончен _до_началча_ выполнения второго. Проще говоря: последовательно.

$.when($.ajax({ /*параметры первого*/})).
    then($.ajax({ /*параметры второго*/}).
        success(function () { 
            /*обработчик успешного завершения второго запроса*/
        })
);

или

$.ajax({ /*параметры первого*/}).
    success(function(){
        $.ajax({ /*параметры второго*/}).
            success(function () { 
                /*обработчик успешного завершения второго запроса*/
            })
    });

[cmd]

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

Мне не нравится то, что мне приходится править исходный код в CMS:
Я не вижу разницы между:
- обрамлять ли исходный ajax-запрос в функцию
- обрамлять ли исходный ajax-запрос в доп. $.ajax
- обрамлять ли исходный ajax-запрос в .done( ... )

Суть одна - внесение изменения в ядро системы. А это не фен-шуй.

Вот представьте, что я написал модуль для CMS. Если для установки нужно добавить в ядро одну строчку, то это уже "не очень хороший" модуль. А если надо изменить работу целого куска код - это откровенно фиговый модуль т.к. он может вступать в конфликты с другими модулями.

Т.е. я хочу защитить пользователей (разработчиков OpenCart, которые будут работать с моим модулем) от говнокода.

[melky]

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

да, вы правы. иногда у меня такое бывает

Мне не нравится то, что мне приходится править исходный код в CMS:

А как вы ещё хотите что-то добавлять?

- обрамлять ли исходный ajax-запрос в функцию
- обрамлять ли исходный ajax-запрос в доп. $.ajax
- обрамлять ли исходный ajax-запрос в .done( ... )

я бы написал $.ajax в функции, которую бы потом передал в done в таком виде :

.done( window.mycallback || $.noop );

чтобы ошибка не вылетала, когда window.mycallback неопределен

Суть одна - внесение изменения в ядро системы. А это не фен-шуй.

не фен-шуйным было решение разработчиков оставить JS нерасширяемым. из-за этого вы сейчас голову ломаете.

Вот представьте, что я написал модуль для CMS. Если для установки нужно добавить в ядро одну строчку, то это уже "не очень хороший" модуль.

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

А если надо изменить работу целого куска код - это откровенно фиговый модуль т.к. он может вступать в конфликты с другими модулями.

вот вам и неповоротливость в чистом виде. "деревянный код" встречается повсюду - гибко писать очень трудно (иначе как обьяснить то, что из всех известных расширяемая только jQuery - я про js.. как cms могу привести пример DLE).

Т.е. я хочу защитить пользователей (разработчиков OpenCart, которые будут работать с моим модулем) от говнокода.

окей, вы хотите написать код гибко. давайте рассмотрим ситуацию поближе:

вы хотите расширить функционал, вставив перед действием ещё одно, своё. существующий код не предполагает таких возможностей.

остаётся только практика под названием "допиливание". вы изменяете существующий код таким образом, чтобы им можно было управлять, не залезая в него ни разу после редактирования. решение очевидно - оставить "лазейки" в виде хуков, надеюсь, вы знаете, что это такое.
для того, чтобы не лезть в чужой код, давайте из своего кода удалим обработчик события по-умолчанию, и на его место поставим свой, расширяемый. а расширения там уже можно добавить.
(само собой, суета в виде удаления обработчика порождает ненужную работу... но что ещё не сделаешь для деликатности). новый обработчик будет запускать старый... в любой момент.

Демо : jsbin.com/amosuj

// этот код уже был тут
$('#button-cart').bind('click', function() {

  $.ajax({
     ... // добавляем товар в корзину
  });

});
// а теперь - магия.

// объект хуков. на будущее
handlers = {
    start : $.noop,
    end: $.noop
};


// новый обработчик
function newHandler(e, next){ 
    // this будет установлен в элемент, на который установлен обработчик
    // e - объект события
    // next - старый обработчик(функция)

    handlers.start(); // хук начала выполнения новой функции

    // по завершении работ выполнить next и хук окончания выполнения функции
    handlers.end();
    next.call(this, e);
}

var el = $("#button-cart"); // целевой элемент
// старый обработчик. тут можно поимпровизировать, если обработчиков несколько.
var old = el.data("events.click").click[0].handler;

// снимаем все старые обработчики, и цепляем новый, "крутой"
el.unbind("click").bind("click", function(e){
  myNewHandler.call(this, e, old);
});

/*добавить ещё хуков по вкусу*/

[cmd]

melky, это офигенно красиво! Спасибо за hint. Если у Вас есть персональный сайт - киньте мне ссылку в ЛС и я буду на Вас ссылаться, упоминая такое решение.

[melky]

melky, это офигенно красиво! Спасибо за hint. Если у Вас есть персональный сайт - киньте мне ссылку в ЛС и я буду на Вас ссылаться, упоминая такое решение.

спасибо, сайта нет, ссылайтесь на профиль