Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.02.2013, 15:57
Кандидат Javascript-наук
Отправить личное сообщение для Vladislav Посмотреть профиль Найти все сообщения от Vladislav
 
Регистрация: 13.02.2013
Сообщений: 105

Голосование на 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, 15.02.2013 в 16:01.
Ответить с цитированием
  #2 (permalink)  
Старый 15.02.2013, 16:20
Профессор
Отправить личное сообщение для Hoshinokoe Посмотреть профиль Найти все сообщения от Hoshinokoe
 
Регистрация: 08.01.2012
Сообщений: 253

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;                                                               
    });
});

Последний раз редактировалось Hoshinokoe, 15.02.2013 в 16:34.
Ответить с цитированием
  #3 (permalink)  
Старый 15.02.2013, 16:32
Кандидат Javascript-наук
Отправить личное сообщение для Vladislav Посмотреть профиль Найти все сообщения от Vladislav
 
Регистрация: 13.02.2013
Сообщений: 105

а в третьей строчке вашего кода:
var parent = $(this).parent('tovar');

Перед "tovar" нужно точку ставить? Ну чтобы обозначить что это класс?
Ответить с цитированием
  #4 (permalink)  
Старый 15.02.2013, 16:34
Профессор
Отправить личное сообщение для Hoshinokoe Посмотреть профиль Найти все сообщения от Hoshinokoe
 
Регистрация: 08.01.2012
Сообщений: 253

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();

Последний раз редактировалось Hoshinokoe, 15.02.2013 в 16:40.
Ответить с цитированием
  #5 (permalink)  
Старый 15.02.2013, 17:55
Кандидат Javascript-наук
Отправить личное сообщение для Vladislav Посмотреть профиль Найти все сообщения от Vladislav
 
Регистрация: 13.02.2013
Сообщений: 105

А еще один вопрос, я не учел, что у меня более тяжелая конструкция 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>

Научите меня пожалуйста доставать данные родителя родителя, можно вообще так?
Ответить с цитированием
  #6 (permalink)  
Старый 15.02.2013, 18:17
Профессор
Отправить личное сообщение для Hoshinokoe Посмотреть профиль Найти все сообщения от Hoshinokoe
 
Регистрация: 08.01.2012
Сообщений: 253

Vladislav,

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

Т.е. можно написать так:
var parent = $(this).closest('.tovar'); // получим <div class='tovar'>
var form = $(this).closest('form'); // получим <form>
Ответить с цитированием
  #7 (permalink)  
Старый 15.02.2013, 18:27
Кандидат Javascript-наук
Отправить личное сообщение для Vladislav Посмотреть профиль Найти все сообщения от Vladislav
 
Регистрация: 13.02.2013
Сообщений: 105

Хм... теперь вообще 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);
Ответить с цитированием
  #8 (permalink)  
Старый 15.02.2013, 18:36
Профессор
Отправить личное сообщение для Hoshinokoe Посмотреть профиль Найти все сообщения от Hoshinokoe
 
Регистрация: 08.01.2012
Сообщений: 253

Vladislav,

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

P.S. Приводите также html разметку, без нее сказать о причине сложно.
Ответить с цитированием
  #9 (permalink)  
Старый 15.02.2013, 18:43
Кандидат Javascript-наук
Отправить личное сообщение для Vladislav Посмотреть профиль Найти все сообщения от Vladislav
 
Регистрация: 13.02.2013
Сообщений: 105

Ошибку поправил, но 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>
Ответить с цитированием
  #10 (permalink)  
Старый 15.02.2013, 18:48
Кандидат Javascript-наук
Отправить личное сообщение для Vladislav Посмотреть профиль Найти все сообщения от Vladislav
 
Регистрация: 13.02.2013
Сообщений: 105

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

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

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

Странно... одно работает другое нет.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не получается вставить код js в HTML garmoni Элементы интерфейса 3 05.09.2013 05:56
Конфликтуют js скрипты в Opera romka AJAX и COMET 2 28.05.2012 15:32
Разное оформление для посетителей с JS и без fry2 Events/DOM/Window 13 03.02.2012 17:45
Картинка обрабатывается js 4yBaK Общие вопросы Javascript 10 11.09.2011 09:28
помогите задать переменную в js bsgroupua Общие вопросы Javascript 3 01.02.2010 18:28