I am trying to delete some elements in database when user clicks on delete icon but as i am sending id through POST request , i am getting empty dictionary ,

{% for skills in seeker_skills %}
           <div class="col-md-4">
            <button class="btn btn-info mx-2">{{skills.skill_name}}<span class="badge badge-dark ">{{skills.skill_level}}</span></button><span><i class="fas fa-trash-alt delete_skill" data-attr={{skills.id}} style="cursor: pointer;"></i></span>
           </div>
           {% endfor %}

updated snippet , i am calling it on click Ajax code

let delete_class_list = $('.delete_skill')
delete_class_list.click(function(e){
    let value = this.getAttribute("data-attr")
    let contain_icon = this
    let contain_label = contain_icon.parentElement.previousSibling
    console.log(contain_label)
    $.ajax({
        url:'/delete_skill/',
        method : 'POST',
        data: {
            skill_id:value
        },
        dataType: "json",
        contentType: "application/json",
        success :function(data){
            console.log(data)
            contain_label.remove()
            contain_icon.remove()   
        }
        ,
        error:function(e){
            console.log(e)

        }
    })
})

My view

@csrf_exempt
def delete_skill(request):
    if request.method == 'POST':
        data = {}
        print('method is post')
        job_id = request.POST.get('skill_id')
        print(job_id)
        try:
            Job_Skillset.objects.get(id=job_id).delete()
            data['status'] = 'deleted'
        except ObjectDoesNotExist:
            data['status'] = 'nodata'
        return JsonResponse(data,safe=False)

CodePudding user response：

You're setting your content type to application/json which is incorrect, remove it.

$.ajax({
    url:'/delete_skill/',
    method : 'POST',
    data: {
        skill_id:value
    },
    dataType: "json",
    success :function(data){
        console.log(data)
        contain_label.remove()
        contain_icon.remove()   
    }
    ,
    error:function(e){
        console.log(e)

    }
})