HTML+CSS+JavaScript

привет! есть корзину товаров которая работает на сессиях, не нравится что при добавлении товаров обновляется страница, решил попробовать подключить ajax
все работает но!

1. данные записываются НО сама корзина не обновляется, обновленные данные в ней появляются только после перезагрузки страницы
2. невозможно этот код использовать для 2 и более форм на одной странице, все товары добавляются через форму:

<form method="POST" action="add.php"> Товар 1   <input type="text" name="number" value="1" size="1" id="number" />  шт. <input type="hidden" name="id" value="001" id="id" />   <!-- Артикул --> <input type="hidden" name="product" value="Ботинки" id="product" /> <!-- Название --> <input type="hidden" name="price" value="100" id="price" /> <!-- Стоимость --> <input name="button" type="submit" value="Отправить" id="addtocart"> </form> <form method="POST" action="add.php"> Товар 2   <input type="text" name="number" value="1" size="1" id="number" />  шт. <input type="hidden" name="id" value="002" id="id" />   <!-- Артикул --> <input type="hidden" name="product" value="Сандали" id="product" /> <!-- Название --> <input type="hidden" name="price" value="200" id="price" /> <!-- Стоимость --> <input name="button" type="submit" value="Отправить" id="addtocart"> </form>

а вот и сам код реализации ajax добавления товара через файл обработчик

<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script> <script type="text/javascript"> $(function() {     $("#addtocart").click(function(){         var number = $("#number").val();         var id = $("#id").val();                         var product = $("#product").val();                         var price = $("#price").val();                         $.ajax({             type: "POST",             url: "add.php",             data: {"number": number, "id": id, "product": product, "price": price},             cache: false                 });         return false;                      }); }); </script>

корзина на странице отображается вот так:

echo '<div id="mycart">';     if (isset($_SESSION['cart'])) {         foreach ($_SESSION['cart'] as $id => $number) {             echo "[$id]"; //id товара Артикул             echo $_SESSION['product'][$id]; // Название товара             echo "($number шт.)"; // Колличество             echo "<br>" . $_SESSION['price'][$id] . "руб."; // Цена за тоавр         }     }     echo '</div>';

что сделать чтобы корзина обновлялась при добавлении товаров средствами AJAX
и как сделать чтобы скрипт работал на много форм?


Спасибо!

для обновления дива нужно использовать что то типа этого?

$("#mycart").load("add.php");

никак не получается реализовать отправку данных для нескольких форм, у этого скрипта должны быть уникальные ID форм получается :((( что можно сделать?

После обновления корзины просто запрашивайте ее по новой ajax-ом и заменяйте ее на новую.

Спасибо но с корзиной проблема уже решена таким способом

$("#mycart").load("add.php");

а вот как сделать чтобы из разных форм с одинаковыми ID передавались данные через Ajax ? ... ((((((

Не совсем понятен вопрос. Имеется в виду что на странице каким-то образом оказываются несколько форм с одинаковым id, на который зацеплены события и они не срабатывают?

Да именно так,
есть товары которые отображаются таким видом:

<form method="POST" action="add.php">  Товар 1    <input type="text" name="number" value="1" size="1" id="number" />  шт.  <input type="hidden" name="id" value="001" id="id" />   <!-- Артикул -->  <input type="hidden" name="product" value="Ботинки" id="product" /> <!-- Название -->  <input type="hidden" name="price" value="100" id="price" /> <!-- Стоимость -->  <input name="button" type="submit" value="Отправить" id="addtocart">  </form>  <form method="POST" action="add.php">  Товар 2    <input type="text" name="number" value="1" size="1" id="number" />  шт.  <input type="hidden" name="id" value="002" id="id" />   <!-- Артикул -->  <input type="hidden" name="product" value="Сандали" id="product" /> <!-- Название -->  <input type="hidden" name="price" value="200" id="price" /> <!-- Стоимость -->  <input name="button" type="submit" value="Отправить" id="addtocart">  </form>

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

Вам нужно отвязаться от Id.

Я бы сделал так - всем формам добавляем класс "addtocart", js код переписываем примерно так (код не проверял):

<script type="text/javascript">  $(function() {      $("form.addtocart").submit(function(){         $.post("add.php", $(this).serialize(), function(data){             alert ('complite!');         });         return false;     });  });  </script>

По идее после добавления у нас как раз возращается код корзины (как я понял), так что ее сразу можно обновить - alert ('complite!'); $('mycart').html(data);

Спасибо все работает!

кстати а вы знаете как запретить повторное появление Fade еффекта если событие onclick нажато много раз?

пример:

<script type="text/javascript">   $(function() {       $("form.addtocart").submit(function(){          $.post("add.php", $(this).serialize(), function(data){               $("#info").fadeIn("slow"); $('#info').html("Отправлено"); $("#info").fadeOut("slow");         });          return false;      });   });   </script>

то есть если 10 раз нажать то 10 раз и появится :) такого быть не должно, думаю как сделать чтобы показывалось хотя бы первый и последний раз,

Желательно просто блокировать возмжоность нажатия кнопки отправки более одного раза, например при первой отправки формы к кнопке submit добавляем disabled="disabled". По окончанию запроса - убираем атрибут.

Я в таких случаях добавляю к форме класс "ajax" и не даю ее повторно отправить, а текст на кнопке submit заменяю на значек аджаксовой загрузки. Ну и тут еще нужно помнить что не все запросы на сервер завершаются удачно и в случае сбоя было бы не плохо разблокировать форму)


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

$("#info").not(':animated').fadeIn("slow").html("Отправлено").fadeOut("slow");

но это не решало бы реальную проблему - кучу мусорных запросов к серверу.

Спасибо! то что нужно!
на последок хотел у вас спросить совета на каком сайте есть нормальный мануал AJAX JQuery с подробным мануалом на рус + примеры?

Сложно сказать. Попробуйте например эту - http://anton.shevchuk.name/javascript/jquery-for-beginners-ajax/ . Еще был какой-то сайт с кучей примеров, но я его найти не смог, такой в синих тонах весь с тонной примеров, наверное вы его видели)

Вообще стоит просто посмотреть что делают методы (они все по сути являются оберткой для $.ajax). И использовать их в зависимости от ситуации. А так рекомендую в случае чего обращаться к официальной документации - там как правило всегда есть и примеры и описание (знание языка в любом случае пригодится, тем более тексты там технического характера, не заумные.). Я как правило дальше их документации уже никуда и не лажу - как оказалось что там гораздо подробнее все написано, чем во всяких примерах (хотя по началу их доки я обходил стороной)

Большое спасибо буду учить англ )

подскажите пожалуйста почему конфликтую эти два скрипта?

$(function() {   $("form.addtocart").submit(function(){ $.post("add.php", $(this).serialize(), function(){  $("#mycart").load("cart.php"); $("#info").not(':animated').fadeIn("slow").html("Добавлено").fadeOut("slow"); });  return false; });   $(".delete").click(function(){ var del = $(this).attr("id"); var line = 'del='+ del ; $.ajax({ type: 'POST', data: line, url: 'del.php', cache: false }); $("#mycart").load("cart.php"); }); });

почему то delete не работает :( или работает если только обновить страницу...

Судя по описанию у вас элемент с классом delete добавляется динамически. Как результат в момент назначения событий на него - его еще нет на странице, а потом уже вы его и добавляете. В этом случае как правило используют такую конструкцию:

$(".delete").live('click', function(){ ...

Спасибо! +0.1% к знаниям :) запомню