How to make two or more AJAX calls in a single Django view

Question

I'm developing personal spending diary and I faced the problem.

For better UX I need to make process of adding new items without reloading page .

I make single ajax form but I need two .

I'm trying to solve this problem for 3 days .

Have anybody any suggestions ?

Here is my

forms.py

     class AddIncome(forms.ModelForm):
        class Meta:
            model = Income
            fields = ( 'title','value',)    

    class AddExpence(forms.ModelForm):
        class Meta:
            model = Expence
            fields = ( 'title_exp','value_exp',)

Here is full

views.py

    def dashboard(request):
    if request.method == 'POST':
        if request.is_ajax():
            addincome = AddIncome(request.POST)
            if addincome.is_valid():
                addincome.cleaned_data
                addincome.save()
                latest = Income.objects.latest('id').id
                income_object = model_to_dict(Income.objects.get(pk=latest))
                return JsonResponse({'error': False, 'data': income_object})
            else:
                print(addincome.errors)
                return JsonResponse({'error': True, 'data': addincome.errors})
        else:
            error = {
                'message': 'Error, must be an Ajax call.'
            }
            return JsonResponse(error, content_type="application/json")

    if request.method == 'POST':
        if request.is_ajax():
            addexpence = AddExpence(request.POST)
            if addexpence.is_valid():
                addexpence.cleaned_data
                addexpence.save()
                latest = Expence.objects.latest('id').id
                expence_object = model_to_dict(Expence.objects.get(pk=latest))
                return JsonResponse({'error': False, 'data': expence_object})
            else:
                print(addexpence.errors)
                return JsonResponse({'error': True, 'data': addexpence.errors})
        else:
            error = {
                'message': 'Error, must be an Ajax call.'
            }
            return JsonResponse(error, content_type="application/json")
    else:
        addincome = AddIncome()
        addexpence = AddExpence()
        income = Income.objects.order_by('-date').filter(is_published=True)
        expence = Expence.objects.order_by('-date').filter(is_published=True)   
        data = {
            'addincome_html': addincome,
            'addexpence_html': addexpence,
            'income':income,
            'expence':expence
        }

        return render(request, template_name='main/dashboard.html', context=data)

Here is Page forms

    <form  method="POST" name="create_incomefrm" id="create_incomefrm" action="{% url 'create_income_record' %}">
            {% csrf_token %}
            {{ addincome_html.as_p }
            <button type="submit" id="popup-button-2" class="dashboard__popup-button" 
           name="createincomefrmbtn">Add <span>&rarr;</span></button>    
     </form>



     <form  method="POST" name="create_expencefrm" id="create_expencefrm" action="{% url 'create_expence_record' %}">
                {% csrf_token %}
            <div class="dashboard__popup-2" id="dashboardpopup-4">       
                {{ addexpence_html.as_p }}  
    <button id="popup-button-3" name="createexpencefrmbtn" class="dashboard__popup-button">Add<span>&rarr;</span></button>    
  </form>

Here is
ajax forms

     $('#create_incomefrm').submit(function (e) {
        e.preventDefault();
        var formData = {
            'title': $('#id_title').val(),
            'value': $('#id_value').val(),
            csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(),
            contentType: 'application/x-www-form-urlencoded',
            encode: true,
        };
        $.ajax({
            type: 'POST',
            url: 'create/',
            data: formData,
            dataType: 'json',
        }).done(function (data) {
           //code
          });
        });


     $('#create_expencefrm').submit(function (e) {
        e.preventDefault();
        var formData = {
            'title_exp': $('#id_title_exp').val(),
            'value_exp': $('#id_value_exp').val(),
            csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(),
            contentType: 'application/x-www-form-urlencoded',
            encode: true,
        };
        $.ajax({
            type: 'POST',
            url: 'create_exp/',
            data: formData,
            dataType: 'json',
        }).done(function (data) {
            //code
          });
        });

Answer 1

Solution

Create a hidden input for both form having same name/id. e.g. HTML

<!--form-1-->
<input type='hidden' name='form_type' value='income'>

<!--form-2-->
<input type='hidden' name='form_type' value='expense'>

Update JavaScript accordingly.

And then on your view catch each form by -

# form-1
if request.method == 'POST' and request.POST['form_type'] == 'income':
    # rest of your code

# form-2
if request.method == 'POST' and request.POST['form_type'] == 'expense':
    # rest of your code