Как персонализировать AJAX RESPONSE?

Question

[Cheizer]

На сайте есть AJAX фильтр простой, по CHANGE SELECT выбирает из базы по условию нужные строки, тут порядок. Беда в персонализации. Каждая форма обрабатывается отдельно, но беда в том, что response вставляется всегда первой формы. Даже если мы взаимодействуем со второй.

Вот пример одной из форм (второй формы). После AJAX ответа данные загружаются в свой ajax-container, но html ajax-item вставляет ТОЛЬКО ПЕРВОЙ формы :( как заставить ajax-item использовать свой для каждой из форм?

<div class="parent">
<form id="ajax-form2" class="ajax-form">
<select name="date">
<option value="0" selected="">All</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2019">2019</option>
</select>
</form>

<div class="ajax-container">
<div class="ajax-item">2019-09</div>
<div class="ajax-item">2018-09</div>
<div class="ajax-item">2017-09</div>
</div>
</div>

А вот AJAX скрип, который пробегает по формам, и отправляет данные нужной формы

$(function() {
	
	
   $.fn.forms = function (o) {
        return this.each(function () {
            var th = $(this),
                _ = th.data('forms') || {
				
                    submitFu: function () {
                            $.ajax({
								data: _.form.serialize(),
                                 beforeSend: function(){
                               }
                            }).done(function(response) {
			var $response = $(response)
			_.form.parent().find('.ajax-container').fadeOut(200)
			setTimeout(function() {
				_.form.parent().find('.ajax-container').html($response.find('.ajax-container').html()).fadeIn(200)
			}, 200)
			
		console.log(_.form.serialize())
		}) 
                    },
                    init: function () {
                        _.form = _.me
                        _.form
							.bind('change', function () {
                                    _.submitFu()
                            })
                    }
                }
            _.me || _.init(_.me = th.data({
                forms: _
            }))
            typeof o == 'object' && $.extend(_, o)
        })
    }	
	
$('#ajax-form1').forms() 
$('#ajax-form2').forms()	
	

});

Answer 1

[Dimonchik]

логи и отладка

но беда в том, что response вставляется всегда первой формы. Даже если мы взаимодействуем со второй.

это ж компьютер, а не женщина

Comments

[Cheizer]

:)) даже не знаю что и скинуть, пока отказался от кода в вопросе, сделал по другому и по тупому :( скопировал функцию для второй формы и все на id жестко посадил

var fadeSpeed = 200; 
	$('#ajax-form select').change(function() {
        ajaxMainFunction();
    });
$('#ajax-form2 select').change(function() {
        ajaxMainFunction2();
    });
//////1	
	function ajaxMainFunction() {
		$.ajax({
			data: $('#ajax-form').serialize()
		}).done(function(response) {
			var $response = $(response);
			$('#ajax-container').fadeOut(fadeSpeed);
			setTimeout(function() {
				$('#ajax-container').html($response.find('#ajax-container').html()).fadeIn(fadeSpeed);
			}, fadeSpeed);
		});
	}
//////2	
	function ajaxMainFunction2() {
		$.ajax({
			data: $('#ajax-form2').serialize()
		}).done(function(response) {
			var $response = $(response);
			$('#ajax-container2').fadeOut(fadeSpeed);
			setTimeout(function() {
				$('#ajax-container2').html($response.find('#ajax-container2').html()).fadeIn(fadeSpeed);
			}, fadeSpeed);
		});
	}