2013-12-09 6 views
0

Я очень новичок в jQuery и пытаюсь создать простое приложение, которое позволяет людям любить фотографии с помощью вызова Ajax. Вот соответствующие части:Django jQuery кнопка не работает

photo.html:

{% if pic %} 

<img class="pic" src="/static/assets/{{pic}}" /> 
<br /> 

{% csrf_token %} 
<input type="button" id="like" name="like" value="Like" /> 

<p id="likes"> </p> people liked this 
{% endif %} 

views.py

def like_photo(request, pic_id): 
    if request.method == 'POST': 
     if pic_id: 
      uid = request.user.id 
      p=UserPic.objects.get(id=pic_id) 

      if Liker.objects.filter(user=uid, pic=pic_id): 

       p.likes -=1 
       p.save() 
       Liker.objects.filter(user= uid, pic=pic_id).delete() 
      else: 

       p.likes +=1 
       p.save() 
       newliker = Liker(user= uid, pic=pic_id) 
       newliker.save() 
      args = {} 
      args.update(csrf(request)) 
      args['likes']= p.likes 
     return render_to_response('photo.html', args) 

like.js

$(function(){ 

    $('#like').click(function() { 
     var $this = $(this); 
     var post_id = this.id; 
     $.ajax({ 
      type: "POST", 
      url: "'/photo/like/'+ post_id", 
      data: { 
       'csrfmiddlewaretoken' : $("input[name=csrfmiddlewaretoken]").val() 
      }, 
      success: likeSuccess, 
      dataType: 'html' 
     }); 

    }); 

}); 

function likeSuccess(data, textStatus, jqXHR) 
{ 
    $('#likes').html(data); 
} 

я могу увидеть в Firebug, что JQuery и т.п. .js загружаются на страницу, но нажатие подобной кнопки не влияет на XHR Firebug.

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

<p><a href="/photo/like/{{pic.id}}">Like</a></p> 

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

+1

только что заметил ошибку, '' '/ photo/like /' + post_id "' неверно, вы хотите ''/photo/like/"+ post_id'. обратите внимание, что это не все окружено кавычками – roo2

+0

@Eru, что почти наверняка проблема, вы должны опубликовать ее в качестве ответа. –

+0

@ DanielRoseman, по-видимому, это была не единственная проблема. кнопка по-прежнему не отправляет почтовые запросы, согласно Firebug. – hbp

ответ

1

был небольшой (но важно!) Ошибка в коде

"'/photo/like/'+ post_id" неверен, вы хотите "/photo/like/" + post_id. Заметьте, здесь не все кавычки

+0

После исправления указанной вами строки кнопка работает в браузере. Благодарю. но он все равно не влияет на количество понравившихся. В firebug ничто не кажется переданным представлениям, когда я нажимаю кнопку. – hbp

+0

Хмм, ты должен быть с этим.get ('id') – roo2

0

Ok я сведущих, чтобы в работе, как это:

photo.html:

{% if pic %} 


<script> 
$(document).ready(function(){ 

    $('#like').click(function() { 

     var $this = $(this); 
     var post_id = {{pic.id}}; 

     $.ajax({ 
      type: "POST", 
      url: "/photo/like/" + post_id , 
      data: { 
     'pic_id': post_id, 
       'csrfmiddlewaretoken' : $("input[name=csrfmiddlewaretoken]").val() 
      }, 
      success: likeSuccess, 
      dataType: 'html'  
     });    
    });  
}); 

function likeSuccess(data, textStatus, jqXHR) 
{  
    $('#likes').html(data); 
} 

</script> 

<img class="pic" src="/static/assets/{{pic}}" /> 
<br /> 

{% csrf_token %} 
<input type="button" id="like" name="like" value="Like" /> 

<p id="likes"> {{pic.likes}} &nbsp;liked this </p> 

{% endif %} 

views.py

def like_photo(request, pic_id): 
    if request.method == 'POST': 
     if pic_id: 
      uid = request.user.id 
      p=UserPic.objects.get(id=pic_id) 

      #if UserPic.objects.filter(liked_by__user__contains=uid): 
      if Liker.objects.filter(user=uid, pic=pic_id): 
       #return HttpResponse('You have already liked!') 

       p.likes -=1 
       p.save() 
       Liker.objects.filter(user= uid, pic=pic_id).delete() 
      else: 

       p.likes +=1 
       p.save() 
       newliker = Liker(user= uid, pic=pic_id) 
       newliker.save() 

      args = {} 
      args.update(csrf(request)) 
      args['likes'] = p.likes 

     return render_to_response('userpics/likes.html', args) 

также необходимо для создания конкретного html для ajax-звонка:

likes.html

{% if likes > 0 %} 
{{likes}} liked this 
{% else %} 
crap 
{% endif %} 

Не уверен, что это лучший способ, но он работает. Мне жаль, что я не смогу использовать более элегантный json, чтобы вернуть симпатичную цифру и избавиться от like.html, но не мог понять, как это сделать.

Кроме того, по какой-то странной причине сценарий не работает, когда я импортировать его извне в base.html:

<script src="{% static "assets/js/likes.js" %}"></script> 

хотя поджигатель говорит, что он будет загружен на этой странице.

Ваши предложения по улучшению ответа приветствуются.

+0

Примечание: поскольку simplejason удален из утилиты в Django 1.7+, вам нужно просто «импортировать json» вместо «forom django.util import simplejason», – supermario

Смежные вопросы