Django / Ajax not refreshing

Django / Ajax not refreshing

本文关键字：refreshing not Ajax Django      更新时间：2023-09-26

我已经建立了一个保存按钮。用户单击"保存"按钮将记录保存到他们的集合中。这将"Save"按钮文本更改为"Saved"。用户可以点击"已保存"来取消保存记录。

用户可以成功保存记录，ajax通过将id="likes"更改为id="unsave"来更新html。

问题是ajax没有拾取id="unsave"，所以不是路由到unsave_release URL，而是路由到save_release URL。

Url示例

http://127.0.0.1:8000 save_release ? release_id = 585197, num_saves = 14http://127.0.0.1:8000 unsave_release ? release_id = 585197, num_saves = 14

是否需要在用户初始保存后以某种方式重置ajax ?

Models.py 

@login_required
def save_release(request):
    release_id = None
    num_saves = None
    username = request.user.username
    if request.method == 'GET':
        release_id = request.GET['release_id']
        num_saves = request.GET['num_saves']
    if release_id:
        insert = ChartsExtended(release_id=release_id,artist=username,url='Like',date='date',type='U',source='net')
        insert.save()
        num_saves = str(int(num_saves) + 1)
        return HttpResponse(num_saves)
@login_required
def unsave_release(request):
    release_id = None
    num_saves = None
    username = request.user.username
    if request.method == 'GET':
        release_id = request.GET['release_id']
        num_saves = request.GET['num_saves']
    if release_id:
        insert = ChartsExtended.objects.get(release_id=release_id,artist=username)
        insert.delete()
        num_saves = str(int(num_saves) - 1)
        return HttpResponse(num_saves)

ajax.js 

$(document).ready(function() {
        // JQuery code to be added in here.
        $('#likes').click(function(){
            var release_id;
            var num_saves;
            release_id = $(this).attr("data-releaseid");
            num_saves = $(this).attr("data-numsaves")
            $.get('/save_release/', {release_id: release_id,num_saves: num_saves}, 
                function(data){
                $('#like_count').html(data + " people saved this");
                // $('#likes').css({"background-color":"#FF0000"});
                $('#likes').toggleClass("btn-info");
                $('#likes').text('Saved!')
                $('#likes').attr('id','unsave');
            });
        });
        //this unsaves a release from Release
        $('#unsave').click(function(){
            var release_id;
            var num_saves;
            release_id = $(this).attr("data-releaseid");
            num_saves = $(this).attr("data-numsaves")
            $.get('/unsave_release/', {release_id: release_id,num_saves: num_saves}, 
                function(data){
                $('#like_count').html(data + " people saved this");
                // $('#likes').css({"background-color":"#FF0000"});
                $('#unsave').toggleClass("btn-success");
                $('#unsave').text('Save')
                $('#unsave').attr('id','likes');
            });
        });

release.html 

<h3 id="like_count">{{dict_item.cnt}} people saved this</h3>

  <p><button id="likes" data-releaseid="{{ dict_item.id }}" data-numsaves="{{dict_item.cnt}}" class="btn btn-xlarge btn-success release-follow-buttons" type="button">Save</button></p>

，在用户单击Save

后转换为以下内容
<p><button id="unsave" data-releaseid="release_id" data-numsaves="num_saves" class="btn btn-xlarge btn-success release-follow-buttons btn-info" type="button">Saved!</button></p>

urls . py 

url(r'^save_release/$', views.save_release, name='save_release'),
url(r'^unsave_release/$', views.unsave_release, name='unsave_release'),

这是因为当您在id为unsave的元素上附加onclick处理程序时，该处理程序当时不存在，并且没有附加。

当您更改id时，您需要附加处理程序，或者更好的解决方案是使用委托事件处理程序。

$(document).on("click", "#likes", function() {
    // code
});
$(document).on("click", "#unsave", function() {
    // code
});

您也不需要在ready回调中附加这些委托事件，因为当您这样做时，#likes和#unsave元素不需要存在。

相关文章：