$ is not defined?

Question

[zelsky]

Записи генерируются. Тоесть на странице много кнопок с ид likes.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

<button  id="likes" data-postid="{{entrie.pk}}" type="button">                    <!-- Start Voting -->
                                <i class="glyphicon glyphicon-thumbs-up"></i>
                        </button>

                        <button id="dislikes" data-postid="{{entry.pk}}"  id="dislike" class="pull-right">                    <!-- Start Voting -->
                            <i class="glyphicon glyphicon-thumbs-down"></i>
                        </button>

$('#likes').click(function(){
    var postid;
    postid = $(this).attr("data-postid");

    $.get('/like_post/',{pk: postid}, function(data){
              $('#like_count').html(data);
              $('#likes').hide();
              $('#dislikes').hide();
    });
});

www.tangowithdjango.com/book17/chapters/ajax.html#...

Питаюсь сделать идентичен только для двух кнопок лайка и дизлайка. в генерируем контенте когда постов мноо соответствено много кнопок.

Answer 1

[Денис Инешин]

1. Нельзя использовать "много кнопок с id likes". ID должен быть уникальным. Используйте классы/data-атрибуты.
2. Оберните весь свой код в $(document).ready(function () {...});
3. Этот код должен подключаться ПОСЛЕ jquery.

Comments

[zelsky]

1. Нельзя использовать "много кнопок с id likes". ID должен быть уникальным. Используйте классы/data-атрибуты. Подобей можно ?

[sim3x]

BlastPy: id="id1" должен быть только один на странице

[zelsky]

$(document).ready(function () {

$("button").each(function(){
$('#likes').data('postid').click.function(
postid = $(this).attr("data-postid");

$.get('/like_post/',{pk: postid}, function(data){
$('#like_count').html(data);
$('#likes').hide();
$('#dislikes').hide();
});
});

[Денис Инешин]

BlastPy: имеется в виду, что у вас может быть на странице много кнопок с class="button", но только одна кнопка с id="like". Соответственно если вы попробуете найти эти элементы, то $(".button") найдет ВСЕ кнопки с этим классом, а поиск по $("#like") найдет только один элемент (даже если у вас их несколько, что нельзя делать)

[sim3x]

<button  class="likes" data-postid="{{entrie.pk}}" type="submit"> 
....
$('.likes').click(function(e){
e.preventDefault();  // чтоб не срабативал сабмит type="submit"
var postid = $(this).data("postid");
...

[zelsky]

Денис Инешин:
$(document).ready(function () {

$(".button").each(function(){
var postid;
$('#likes').data('postid').click.function(

верное начало ?

[zelsky]

sim3x: тоесть надо писать лайкс как клас ?

[sim3x]

BlastPy: да

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

[Денис Инешин]

BlastPy: да, вообще забудьте про id. Но вы все равно неправильно делаете. И пишите обработчик так: $(".likes").on("click", function () {...});

[zelsky]

sim3x:
Но в консоли ничего нету

$('.likes').click(function(e){
e.preventDefault();
var postid = $(this).data("postid");

console.log(postid);
});

[Денис Инешин]

BlastPy: а вы переименовали id в классы?

[Денис Инешин]

BlastPy: jsfiddle.net/IonDen/t1uck334 вот посмотрите пример, всё прекрасно работает.

[zelsky]

<button  class="likes" data-postid="{{entrie.pk}}" type="button"></button>

[Денис Инешин]

BlastPy: Если у вас кнопки генерируются динамически, то вам нужно использовать делегирование. Вот так: jsfiddle.net/IonDen/t1uck334/1

[zelsky]

Денис Инешин: Спасибо больше. Сработало.

[zelsky]

Денис Инешин: есть ище маленький вопрос как спрятать кнопки и показать прогрес бар

$(document).on("click", ".likes", function (e) {
e.preventDefault();
var postid = $(this).data("postid");
console.log(postid);
$.get('/send_like/',{"pk":postid}, function(data){
$('#like_count').html(data);
$('#likes').hide();
$('#dislikes').hide();
});
});
запрос отправляет НО кнопки не прячуться и не показивает прогрес бар.Спасибо

[zelsky]

Денис Инешин: Вернее как передать зostip внутрь

$('.like_count').html(data);
$('.likes').hide();
$('.dislikes').hide();

[Денис Инешин]

BlastPy: Не очень понял вопрос. В общем прогресс бар нужно показывать еще до того, как вы отправляете запрос. И гет лучше вынести в другую функцию

[zelsky]

Денис Инешин: чтоб прятать кнопку и показать прогрес бар по айди поста так как постов много