AJAX.Выполнение нескольких действий

1. Александр (01.12.2011 / 00:42)
Всем доброй ночи!Есть такой скрипт, который добавляет допустим какой либо Товар в корзину , без обновления страницы (пример 1 , 2).Но проблема в том что он добавляет только один товар, который самый первый, остальные кнопки не работают, а надо чтобы была возможность добавить все товары.Ajax я только изучаю, весь вечер вожусь, не могу разобраться.Пробывал использовать циклы в ajax, не помогает, видимо не так делал.Вот собственно сам код:

...


<script src="jquery-1.2.3.pack.js"></script>
<script type="text/javascript">
$(function() {
  var id = $("input#id").val();
  $(".button_"+id+"").click(function() {


		var dataString = 'id='+ id;

	$.ajax({
      type: "POST",
      url: "data.php",
      data: dataString,
      success: function() {
        $('#test_form_'+id+'').html("<div id='message'></div>");
        $('#message').html("Товар №"+id+" добавлен")
        .hide()
        .fadeIn(1200, function() {

        }); }
     });
    return false;
	});
});
</script>
</head><body>
<?php
 $i=0;
while ($i++<5)
 {
  echo '<div id="test_form_'.$i.'"><form name="contact" action="">Товар №  '.$i.'
       <input type="hidden" name="id" id="id" value="'.$i.'" class="text-input" />
       <input type="submit" name="submit" class="button_'.$i.'" id="submit_btn" value="В корзину" /></form></div><br/>';
 }
?>


...
Подскажите пожалуйста как правильно сделать?

2. Дмитрий (01.12.2011 / 05:20)
Вместо 
  var id = $("input#id").val(); 
  $(".button_"+id+"").click(function() {
попробуй
  function click_button(id) {
тогда кнопки будут такие
<input type="submit" name="submit" class="button_' . $i . '" onclick="click_button(' . $i . ')" id="submit_btn" value="В корзину" />
Короче, алгоритм такой. Вообще убери поле hidden, создай ф-ю click_button(), передавай в нее ID товара, и на onclick кнопки повесь эту ф-ю.

3. Александр (01.12.2011 / 08:23)
2. dima.london, спасибо за подсказку, но че то так работать не хочет...

4. Дмитрий (01.12.2011 / 08:41)
3. PR0Z0N, облегченный вариант
<script type="text/javascript"> 
	function click_button(id) {
		alert('Товар № ' + id);
	};
</script> 

<?php
$i=0; 
while ($i++<5) 
{ 
	$repsone = 'Товар № ' . $i;
	$repsone.= ' &nbsp; <input type="submit" onclick="click_button(' . $i . ')" value="В корзину" />'; 
	echo '<p>' . $repsone . '</p>';
} 
?>


5. Дмитрий (01.12.2011 / 09:14)
Пример посложнее, с красотой и проверкой на вшивость.
<style>
.t_cont{
	height:30px;
	line-height:30px;
	padding-left:10px;
	border-bottom: 1px solid #222;
	margin:0 0 5px 5px;
	padding:0 0 5px 5px;
}
.t_name{
	float: left;
	width:100px;
	height:30px;
	line-height:30px;
	margin-left:10px;
}
.t_submit{
	float: left;
	width:150px;
	height:30px;
	line-height:30px;
	color:#fff;
	background-color:green; 
	cursor:pointer;
	font-weight:700;
	text-align:center;
}
</style>

<script type="text/javascript"> 
	function click_button(id) {
		var rep = $('div#submit_' + id).text();
		if (rep != 'Добавлено')
		{
			/* тут код добавления в корзину */
			$('div#submit_' + id).css('backgroundColor', 'red');
			$('div#submit_' + id).text('Добавлено');
			alert('Товар № ' + id + ' успешно куплен');
		} else {
			alert('Мы не продаем один и тот же товар 2 раза');
		}
	};
</script> 

<?php
$i=0; 
while ($i++<5) 
{ 
	$repsone = '<div class="t_cont">';
	$repsone.= '<div class="t_name">Товар № ' . $i . '</div>';
	$repsone.= '<div class="t_submit" id="submit_' . $i . '" onclick="click_button(' . $i . ');">В корзину</div>';
	$repsone.= '</div>';
	echo $repsone;
} 
?>


6. Алексей (01.12.2011 / 10:19)
dima.london (1 Декабря 2011 / 09:14)
Пример посложнее, с красотой и проверкой на вшивость.
<style>
.t_cont{
	height:30px;
	line-height:30px;
	padding-left:10px;
	border-bottom: 1px solid #222;
	margin:0 0 5px 5px;
	padding:0 0 5px 5px;
}
.t_name{
	float: left;
	width:100px;
	height:30px;
	line-height:30px;
	margin-left:10px;
}
.t_submit{
	float: left;
	width:150px;
	height:30px;
	line-height:30px;
	color:#fff;
	background-color:green; 
	cursor:pointer;
	font-weight:700;
	text-align:center;
}
</style>

<script type="text/javascript"> 
	function click_button(id) {
		var rep = $('div#submit_' + id).text();
		if (rep != 'Добавлено')
		{
			/* тут код добавления в корзину */
			$('div#submit_' + id).css('backgroundColor', 'red');
			$('div#submit_' + id).text('Добавлено');
			alert('Товар № ' + id + ' успешно куплен');
		} else {
			alert('Мы не продаем один и тот же товар 2 раза');
		}
	};
</script> 

<?php
$i=0; 
while ($i++<5) 
{ 
	$repsone = '<div class="t_cont">';
	$repsone.= '<div class="t_name">Товар № ' . $i . '</div>';
	$repsone.= '<div class="t_submit" id="submit_' . $i . '" onclick="click_button(' . $i . ');">В корзину</div>';
	$repsone.= '</div>';
	echo $repsone;
} 
?>
Незря наверно люди придумали обработку событий xmm

7. Дмитрий (01.12.2011 / 12:31)
megabit (1 Декабря 2011 / 09:19)
Незря наверно люди придумали обработку событий xmm
Читай внимательно первый пост. Какая была задача? Или мне надо было полностью скрипт ему написать? С обработкое repsone, парсингом и занесением в куки и БД? Ага.

Добавлено через 01:44 сек.
возьми и напиши, чо xmm

8. Алексей (01.12.2011 / 12:46)
7. dima.london, ну ты все же что то написал
а проблема в том что id на странице один вот и добавлял только один товар

class="button_'.$i.'" id="submit_btn"
обрабатывалась только одна кнопка submit_btn и button_0
достаточно изменить так

id="button_'.$i.'" class="submit_btn"
$('.submit_btn').onclick(..);


9. Дмитрий (01.12.2011 / 13:56)
8. megabit, категорически не согласен.
Обрати внимание на начало JS. Я даже закомментирую:
$(function() { 
// id - это содержимое поля input с id="id"
  var id = $("input#id").val(); 
// при клике по блоку с class=".button_ID"......
  $(".button_"+id+"").click(function() {
А теперь взглянем на html
<input type="hidden" name="id" id="id" value="'.$i.'" class="text-input" />
<input type="submit" name="submit" class="button_'.$i.'" id="submit_btn" value="В корзину" />
Алгоритм изначально неверный. Во всех полях name="id" одинаковый id="id", который и передает первое значение из цикла, а class="submit_btn" тут вообще не при чем, и я подрзреваю, что он просто задает стиль кнопки. В любом случае в JS всегда будет передаваться команда на срабатывание события для блока .button_1, не зависимо от того, по какому блоку был клик.

Блин, я Капитан Очевидность, кэп.

10. Алексей (01.12.2011 / 13:58)
9. dima.london, слишком много букв, да я даже толком не читал посты тут D
согласен что подход изначальной не верный

11. Александр (01.12.2011 / 15:46)
Понятно.Ладно, спасибо за помощь парни!smile

12. ramzes (01.12.2011 / 16:15)
dima.london (1 Декабря 2011 / 13:56)
8. megabit, категорически не согласен.
Обрати внимание на начало JS. Я даже закомментирую:
$(function() { 
// id - это содержимое поля input с id="id"
  var id = $("input#id").val(); 
// при клике по блоку с class=".button_ID"......
  $(".button_"+id+"").click(function() {
А теперь взглянем на html
<input type="hidden" name="id" id="id" value="'.$i.'" class="text-input" />
<input type="submit" name="submit" class="button_'.$i.'" id="submit_btn" value="В корзину" />
Алгоритм изначально неверный. Во всех полях name="id" одинаковый id="id", который и передает первое значение из цикла, а class="submit_btn" тут вообще не при чем, и я подрзреваю, что он просто задает стиль кнопки. В любом случае в JS всегда будет передаваться команда на срабатывание события для блока .button_1, не зависимо от того, по какому блоку был клик.

Блин, я Капитан Очевидность, кэп.
Если это в цикле то как минимум кривой хтмл будет и не рабочий js, будет реагировать всегда на первую позицию, не зависимо от того какую выбрали на самом деле

13. Дмитрий (01.12.2011 / 16:22)
12. ramzes, я в 5 посте набросал вполне работоспособный скрипт. Еще и кнопочки в css отрисовал.

14. ramzes (01.12.2011 / 16:41)
13. dima.london, можно проще, без явного вызова функции, мегабит прав

15. ramzes (01.12.2011 / 22:20)
html
<button class="shop"  name="'.$i.'" value="заказать" />
js
$(document).ready(function(){

   $(".shop").click(function(){
       var shopID = $(this).attr("name");
/*  тут отправка и алерт,  shopID  - ид товара (переменная $i в цикле */
   });

});
на скорую руку

URL: https://visavi.net/topics/27003