CODEWITHSUNDEEP
javascripthtmldjangoajaxpost
Matteo Biffoni
Matteo Biffoni

Reputation: 3

Returning from AJAX call does not update HTML

I am updating a db entry through a click on a select dropdown. After confirming the selection I send an AJAX POST to another view that applies required changes on the db and reverse to the previous page.

The problem is that the destination page does not reflect the new values unless I refresh.

Select HTML (project.html)

<select id="update_status_outreach" name="{{outreach.id}}_____{{project.id}}">
    {% for outreach_status in outreach_statuses %}
        {% if outreach_status.0 == outreach.outreach_status %}
            <option value="{{ outreach.outreach_status }}" selected>{{ outreach.outreach_status }}</option>
        {%else%}
            <option value="{{ outreach_status.0}}">{{outreach_status.0}}</option>
        {% endif %}
    {%endfor%}
</select>

JavaScript (project.html)

document.getElementById("update_status_outreach").onchange = changeListener;
function changeListener() {
    var name = this.name.split("_____");
    var project_id = name[1];
    var outreach_id = name[0];
    var new_status = this.value;
    if(confirm("Placejpòdore")) {
        $.ajax({
            type: "POST",
            url: "{% url 'action:update_status_outreach' %}",
            data: {
                csrfmiddlewaretoken: "{{ csrf_token }}",
                'project_id': project_id,
                'outreach_id': outreach_id,
                'new_status': new_status
            },
        });
    }
}

update_status_outreach view in outreach.py


@login_required(login_url='action:login')
def update_status_outreach(request):
    project_id = request.POST['project_id']
    outreach_id = request.POST['outreach_id']
    new_status = request.POST['new_status']
    jobproject = get_object_or_404(JobProject, id=project_id)
    if jobproject.owner != request.user:
        raise HttpResponse(status=500)
    else:
        outreach_to_be_updated = Outreach.objects.get(id=outreach_id)
        outreach_to_be_updated.outreach_status=new_status
        outreach_to_be_updated.save()
        return HttpResponseRedirect(reverse('action:project', args=(project_id,)))

Project view in project.py


@login_required(login_url='action:login')
def project(request, project_id):
    if request.method == 'POST':
        outreach_id = request.POST.get('outreach_id')
        new_rank = request.POST.get('new_ranking')
        update_rank(outreach_id=outreach_id, new_rank=new_rank)
    project_referred = get_object_or_404(JobProject, id=project_id)
    jobpositions_referred = JobPosition.objects.filter(jobproject=project_referred)
    outreaches_referred = Outreach.objects.filter(position__jobproject=project_referred)
    colors = ['#9bf5ff', '#a89dff', '#fff79d', '#9b5252', '#72b267', '#d75e5e']
    context = {'project': project_referred, 'jobpositions': jobpositions_referred, 'outreaches': outreaches_referred,
               'outreach_statuses': OUTREACH_STATUS, 'colors': colors, 'position_statuses': POSITION_STATUS}
    return render(request, 'action/project.html', context)

Upvotes: 0

Views: 438

Answers (1)

Stagory
Stagory

Reputation: 24

First you have to return the new values from your Django function back to the HTML file. Then you need to add a success function to your ajax in which the select,option elements will be updated as well. The problem is that you create a select element when loading the website but there is no script changing the HTML content.

$.ajax({
            method: "post",
            dataType: "json",
            data: ...,
            url: "/...",
            success:function(response){
                document.GetElementById("id_of_option").innerHTML = response.your_response
                    
            }
        });

Upvotes: 1

Related Questions