A gist to add an list item to existing list via ajax

ajax.py

def add_new_practice(request):
    if request.is_ajax and request.POST:
        protocol_id = request.POST.get('protocol_id')
        form = PracticeModelForm(request.POST)
        if form.is_valid():
            practice_object = Practice(protocol=Protocol.objects.get(id=protocol_id))
            form = PracticeModelForm(request.POST, instance=practice_object)
            form.save()
            
            return HttpResponse(json.dumps({}))
        else:
            print "Form not valid"
    else:
        raise Http404

forms.py

from django.forms import ModelForm, Textarea
from knowledgebase.models import *
from django import forms

class PracticeModelForm(forms.ModelForm):
    class Meta:
        model = Practice
        fields = ['protocolsection', 'day', 'daysupto', 'ordinalinday', 'name', 'description', 'notes']
        widgets = {
            'description': Textarea(attrs={'cols': 90, 'rows': 5}),
            'notes': Textarea(attrs={'cols': 90, 'rows': 5}),
        }

knowledgebase_base.js

// clone/display practice form
function display_add_practice_form(){
    $(".add-new-practice").click(function(){
    var new_practice_form = $(".new-practice-form-template-parent").find(".new-practice-table").clone();
        console.log(new_practice_form)
        new_practice_form.find(".new-practice-save-section").html('<span class="add-new-practice">Add this practice</span>');
        $(".space-for-displaying-new-practice-form").append(new_practice_form)

        // un bind/off the save-supply.click function for already inserted forms. This way, when .save-supply on click is applied again below
        // it  does NOT get re-added multiple time to all currently existing new-supply forms, resulting in multiple inserts per save
        $(".add-new-practice").off("click");
        add_new_practice();
    });
}



// add a new practice
function add_new_practice(){
    $(".add-new-practice").click(function(){
        var $form = $(this).closest(".new-practice-form");
        var protocol_id = $form.find('input[name="protocol_id"]').val();

        $.ajax({
            type: "POST",
            url: "/knowledgebase/add/new/practice/",
            dataType: "json",
            data: $form.serialize(),
            success: function(data){
                console.log("all good");
                //Select supply section table to insert new row
                //var $practice_table = ".practices-table";
                //$($practice_table).find("tbody").append(data['row_html']);
                //delete_practice();
                window.location.reload()
            },
            error: function (data, errmsg, err) {
                console.log("something wrong");
                console.log(data);
                console.log(errmsg);
                console.log(err);
            }
        })
    })
}

parent_page.html

{# link to invoke addition of new practice #}
<span class="add-new-practice">Add New Practice</span>

{# a place holder to insert the form which is otherwise hidden #}
{# Plcace holder to add new practice #}
    <TABLE>
        <TR><TD>
            <FORM class="new-practice-form">
                <div class="space-for-displaying-new-practice-form">
                    <input type="hidden" name="protocol_id" value="{{ protocol.id }}">
                </div>
            </FORM>
        </TD></TR>
    </TABLE>


{# Template form content to add a new practice #}
{#    it will always be hidden #}
<div class="new-practice-form-template-parent">
    {% if practice_form %}
        <div class="new-practice-form-template">
            <TABLE class="new-practice-table">

                <TR class="thin-tableheader-row"><TH>Protocol Section</TH><TD>{{ practice_form.protocolsection }}</TD></TR>
                <TR class="thin-tableheader-row">
                    <TH>Day info:</TH>
                    <TD>
                        <TABLE><TR>
                            <TH>Day</TH><TD>{{ practice_form.day }}<span class="td">{{ practice_form.day.errors }}</span></TD>
                            <TH>Days Upto +/-</TH><TD>{{ practice_form.daysupto }}<span class="td">{{ practice_form.daysupto.errors }}</span></TD>
                            <TH>Ordinal in that Day</TH><TD>{{ practice_form.ordinalinday }}<span class="td">{{ practice_form.ordinalinday.errors }}</span></TD>
                        </TR></TABLE>
                    </TD>
                </TR>
                <TR class="thin-tableheader-row"><TH>Name :</TH><TD>{{ practice_form.name }}<span class="td">{{ practice_form.name.errors }}</span></TD></TR>
                <TR class="thin-tableheader-row"><TH>Description :</TH><TD>{{ practice_form.description }}<span class="td">{{ practice_form.description.errors }}</span></TD></TR>
                <TR class="thin-tableheader-row"><TH>Notes :</TH><TD>{{ practice_form.notes }}<span class="td">{{ practice_form.notes.errors }}</span></TD></TR>
                <TR><TD> {{ practice_form.non_field_errors }} </TD></TR>
                <TR><TD class="new-practice-save-section"></TD></TR>
            </TABLE>
        </div>
    {% endif %}
</div>

parent_page.js

// clone/display practice form
function display_add_practice_form(){
    $(".add-new-practice").click(function(){
    var new_practice_form = $(".new-practice-form-template-parent").find("table").clone();
        console.log(new_practice_form)
        new_practice_form.find(".new-practice-save-section").html('<span class="add-new-practice">Add this practice</span>');
        $(".space-for-saving-new-practice").append(new_practice_form)

        // un bind/off the save-supply.click function for already inserted forms. This way, when .save-supply on click is applied again below
        // it  does NOT get re-added multiple time to all currently existing new-supply forms, resulting in multiple inserts per save
        $(".add-new-practice").off("click");
        add_new_practice();
    });
}



// save a new practice
function add_new_practice(){
    $(".add-new-practice").click(function(){
        var $form = $(this).closest(".new-practice-form");
        var protocol_id = $form.find('input[name="protocol_id"]').val();

        $.ajax({
            type: "POST",
            url: "/knowledgebase/add/new/practice/",
            dataType: "json",
            data: $form.serialize(),
            success: function(data){
                console.log("all good");
                //Select supply section table to insert new row
                var $practice_table = ".practices-table";
                $($practice_table).find("tbody").append(data['row_html']);
                //delete_practice();
            },
            error: function (data, errmsg, err) {
                console.log("something wrong");
                console.log(data);
                console.log(errmsg);
                console.log(err);
            }
        })
    })
}

url.py

                       url(r'^add/new/practice/', 'knowledgebase.ajax.add_new_practice'),

views.py

from forms import PracticeModelForm

def list_kb_practices(request, protocol_name):
    
    kwargs = {}
    kwargs['practice_form'] = PracticeModelForm

    return render_to_response('knowledgebase/list_kb_ practices.html', kwargs,
                              context_instance=RequestContext(request))