Голосование на js
 

Здравствуйте, есть сайт на котором находятся товоры нужно реализовать голосование на ajaxe (данные заносятся в БД, и обновляется результат голосования).

HTML:

<form>
    <div class='tovar'>
        <div class='vote'>Всего голосов: 34</div>
        <input type='hidden' id='$id_tovar'> // в данном случае $id_tovar = 1
        <input type='hidden' id='$id_user'>
        <input type='submit' class='submit_vote' value='голосовать'>
    </div>
</form>
<form>
    <div class='tovar'>
        <div class='vote'>Всего голосов: 10</div>
        <input type='hidden' id='$id_tovar'> // в данном случае $id_tovar = 2
        <input type='hidden' id='$id_user'>
        <input type='submit' class='submit_vote' value='голосовать'>
    </div>
</form>

js:

$(function(){
   $(".submit_vote").click(function(){
      var id_tovar=$("#id_tovar");
      var id_user=$("#id_user");
      $.ajax({
         type: "POST",
         url: "handlers/like_wall",
         data: {"id_tovar": id_tovar,"id_user": id_user},
         cache: false,
         success: function(response){            
                $(".vote").text(response);                                                    
             }
          });
          return false;                                                               
    });
});

До того как я решил сделать ajax все работало хорошо, то есть проблем с php обработчиком нет, но после того как я решил обновить голосования и внедрить js у меня нечего не получается.

Вот список проблем с которыми я столкнулся:

1) Я не знаю как научить этот js код, чтобы он понимал по какому товару я кликаю, а то если я буду голосовать за второй товар, то этот код думает, что я голосую за первый товар.

2) И еще как сделать так, чтобы ответ (response, 10-11 строка js кода) возвращался именно в тот блок за который я голосую, а то тут такая же проблема, если я голосую за второй товар, то js думает, что я голосую за первый и в нем обновляет результаты.

Спасибо большое за помощь!

Vladislav,

Используйте метод parent, чтобы взять контейнер и дальше все элементы ищите в этом контейнере.

$(function(){
   $(".submit_vote").click(function(){
      var parent = $(this).parent('.tovar'); // берем родительский элемент
      var id_tovar= parent.find("#id_tovar"); // ищем в родительском нужный элемент
      var id_user= parent.find("#id_user");
      $.ajax({
         type: "POST",
         url: "handlers/like_wall",
         data: {"id_tovar": id_tovar,"id_user": id_user},
         cache: false,
         success: function(response){            
                parent.find(".vote").text(response);                                                    
             }
          });
          return false;                                                               
    });
});

а в третьей строчке вашего кода:

var parent = $(this).parent('tovar');

Перед "tovar" нужно точку ставить? Ну чтобы обозначить что это класс?

Vladislav,

Да, конечно. Опечатка просто.

Еще скорее всего надо исправить это:

<input type='hidden' class='id_tovar' value='$id_tovar'> // в данном случае $id_tovar = 2
<input type='hidden' class='id_user' value='$id_user'>

var id_tovar= parent.find(".id_tovar").val(); 
var id_user= parent.find(".id_user").val();

А еще один вопрос, я не учел, что у меня более тяжелая конструкция html кода и менять ее не вариант, можно ли достать данные с помощью js у такого кода:

<form>
    <div class='tovar'>
        <div class='vote'>Всего голосов: 34</div>
        <input type='hidden' id='$id_tovar'> // в данном случае $id_tovar = 1
        <input type='hidden' id='$id_user'>
        <div>
            <input type='submit' class='submit_vote' value='голосовать'>
        </div>
    </div>
</form>

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

Vladislav,

Можно доставать данные любого элемента. Для этого есть метод closest. Ищет через всех родителей по указанному селектору.

Т.е. можно написать так:

var parent = $(this).closest('.tovar'); // получим <div class='tovar'>
var form = $(this).closest('form'); // получим <form>

Хм... теперь вообще js код не работает, проверьте пожалуйста:

$(function(){
   $("#com_wall_submit").click(function(){

      var form = $(this).closest('form');

      var com= form.find("#com").val();
      var id_mes= form.find("#id_message").val();
      var sender= form.find("#id_sender").val();

      $.ajax({
         type: "POST",
         url: "handlers/com_wall",
         data: {"com": com, "id_mes": id_mes, "sender": sender},
         cache: false,
         success: function(response){
             if(response == 0){
             form.find"#error_com_box").text(resultStat).show().delay(5500).slideToggle("fast");
             }
             else{
                form.find("#error_com_box").css('display','none');
                form.find("#com").val("");
                form.find(".wrap_comment_block").html(response);
             }                                                    
             }
          });
          return false;                                                               
    });
});

А не может быть ошибкой то, что мы не пишем $, например, вот тут:

var com= form.find("#com").val();

или

form.find(".wrap_comment_block").html(response);

Vladislav,

У вас ошибка (не хватает скобки):
form.find("#error_com_box").text(resultStat).show().delay(55 00).slideToggle("fast");

P.S. Приводите также html разметку, без нее сказать о причине сложно.

Ошибку поправил, но js не работает.

Вот html код:

<form class='form-container' action='handlers/com_wall' method='post'>
    <textarea rows='1' placeholder='Оставить комментарий..' id='com' name='com'></textarea>
    <div class='wrap_button_comment'>
        <input type='hidden' value='$id_message' id='id_message' name='id_mess'>
        <input type='hidden' value='$id_mine' id='id_sender' name='sender'>
        <div class='error_com_box' id='error_com_box'></div>
        <input type='submit' value='Комментировать' class='button_comment' id='com_wall_submit'>
    <div class='clear'></div>
    </div>
</form>
<div class='wrap_comment_block'>
//блок с комментариями
</div>

только что протестировал код js работает на половину:

Вот эта строчка срабатывает:
form.find("#com").val("");

А вот эта нет:
form.find(".wrap_comment_block").html(response);

Странно... одно работает другое нет.