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

Question

[aumarov]

Здравствуйте, делаю фильтр для инет магазина, это мой первый опыт. Расклад такой, в div'ах с классами .sended-param содержаться radio кнопки. По клику на div с этим классом отправляется запрос и радио кнопки внутри него становятся checked и данные собираются с помощью serialize() и отправляются. Проблема в следующем:
Вот допустим есть у меня Керамическая плитка и Керамогранитная, жму я на керамическую отправляется type=1 все верно и я его получаю и вижу во вкладке Network в консоли, дальше жму керамогранитную тоже все ок отправляется type=2, но если опять нажму на керамическую или на керамогранитную, то уже пустота.
Вот код:

$(".sended-param").click(function(){
	$(".sended-param").find("input[type=radio]").attr('checked', false);
	$(this).find("input[type=radio]").attr('checked', true);
	$.ajax({
		type: "post",
		url: "/filter",
		data: $(".filter form").serialize(),
		success: function(data) {
            console.log("Hello world!");
        }
	});
});

Comments

[Влад Шариков]

Смоделируйте свой баг в jsfiddle.net

[aumarov]

@vladsharikov издеваешься?

[Влад Шариков]

@aumarov Нет, это нормально делать это. В 70% случаев доходит до того, что сам разбираешься в своей проблеме, а не лезешь у кого-то спрашивать. Ладно, в 80+%, а не в 70. Главное попробовать.

Answer 1

[Yago]

Попробуйте вместо attr использовать prop:

$(".sended-param").click(function(){
	$(".sended-param").find("input[type=radio]").prop('checked', false);
	$(this).find("input[type=radio]").prop('checked', true);
	$.ajax({
		type: "post",
		url: "/filter",
		data: $(".filter form").serialize(),
		success: function(data) {
            console.log("Hello world!");
        }
	});
});

Comments

[aumarov]

Спасибо чувак. Заработало как надо

Answer 2

[Влад Шариков]

Напомню, код:

$(".sended-param").click(function(){
	$(".sended-param").find("input[type=radio]").attr('checked', false);
	$(this).find("input[type=radio]").attr('checked', true);
	$.ajax({
		type: "post",
		url: "/filter",
		data: $(".filter form").serialize(),
		success: function(data) {
            console.log("Hello world!");
        }
	});
});

Разберем:

$(".sended-param").find("input[type=radio]").attr('checked', false);

Зачем? нашли радио, поставили свойство checked в false.

$(this).find("input[type=radio]").attr('checked', true);

Зачем? Нашли радио в $(this) (что есть элемент с классом .sended-param, то есть тоже самое, что и первая строка), поставили свойство checked в true.

И как это понимать?

А по поводу serialize():

Encode a set of form elements as a string for submission.

Ключевое слово Form. То есть мы можем применить serialize функцию только к форме.
Ваш код:

$.ajax({
		type: "post",
		url: "/filter",
		data: $(".filter form").serialize(),
		success: function(data) {
            console.log("Hello world!");
        }

показывает, что применяете вы данные к форме, но что эта за форма не понятно.

Вывод:
Разберитесь, что хотите сделать первыми двумя строками.
Отредактируйте пост и добавьте нужный HTML код. Где форма, где радио баттоны и т.п.

Comments

[aumarov]

я поставлю лайк, но только за старания и желание помочт

[Влад Шариков]

:) можешь убрать лайк, не нужно делать одолжений. Учись сам разбираться в ошибках (или учись правильно задавать вопросы). Fiddle в помощь. Все же над текстом ответа стоить задуматься, ибо код — велосипед.

[Yago]

@vladsharikov, Вы не смогли разобраться в коде, но умничаете и поправляете автора. Первая строка кода убирает переключатель со всех внутренних элементов с классом sended-param. Вторая ставит этот переключатель внутри конкретного класса sended-param. Вместо решения проблемы придрались к оформлению.

[Влад Шариков]

@Yago Я может тупой — поправьте, пожалуйста. Вторая строка ставит переключатель внутри конкретного класса sended-param: зачем это нужно делать, если он по дефолту установится в checked при нажатии? Зачем нужна первая строка, если какой-либо активный радио баттон (checked свойство = true) выключится сам при клике на другой в этой группе?

[Yago]

Первая строка сбрасывает значения checked у всех элементов, вторая строка назначает значение конкретного элемента. Класс sended-param -родитель баттона. Это может быть div, чтобы пользователю не надо было играть в снайпера и попадать в точку курсором.

[Влад Шариков]

Видимо все таки тупой. У нас есть несколько радио-кнопок. Все неактивны, к примеру, при загрузке. Нажмем на 1. Стала активна первая. Нажали на 2. 1 снимется сама, а 2 станет активной. Здесь, в самом низу страницы, можно открыть пример, который показывает как раз то, что я говорю тремя строками выше. Дак и зачем нам делать то, что за нас делает движок браузера? Даже не за нас... А он это сделает итак по клику, а мы просто еще раз поставим checked в false в примере выше. Я чего-то не понимаю? По второй строки — окей, не додумался, что имел в виду автор (дак пусть задаст так, чтобы не возникало никаких проблем, не?), но зачем масло масляное делать я не понимаю (первая строка).

[aumarov]

@vladsharikov в любой случае даже если я убрал бы эту строку которая делает checked false проблема бы не решилась. Мне помог @Yago с этим, вместо attr нужно использовать prop. А на счет вашего вопроса, то радио групп может быть несколько и мне нужно было, что бы радиобатоны обнулились в другой радиогруппе

[Влад Шариков]

@aumarov

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

радиогрупп как раз и нужен для того, чтобы распределить что-либо по группам и позволить выбрать только одно из этой группы. Для этого нужен радиогрупп. А у вас по выбору какого-то варианта в одной группе убирается флаг и в другой группе. Не стоит ли объединить? Как-то костыль... ну да не мое дело.

А по поводу

в любой случае даже если я убрал бы эту строку которая делает checked false проблема бы не решилась

— я увидел спорный момент и сказал о нем. Делать вывод или не делать решать тебе.