Unable to Deploy Django in Heroku

I am unable to deploy django in Heroku. I think the problem lies with Ajax because all of the pages seems to render in heroku.

Error that I got is:

  1. InvalidCursorName at /incidentReport/general cursor "_django_curs_140297876031040_sync_1" does not exist
  2. During handling of the above exception (relation "incidentreport_accidentcausation" does not exist LINE 1: ...cidentreport_accidentcausation"."updated_at" FROM "incidentr... ^ ), another exception occurred:

Thank you

HTML

<!-- Page Content -->
            <div class="container-fluid">

                <!-- Page Title -->
                <div class="d-flex bd-highlight">
                    <div class="pg-title p-2 flex-grow-1 bd-highlight">
                        <h4>Incident Report</h4>
                    </div>
                </div>

                <!-- User Report Table  -->
                <div class="card shadow mb-5 d-flex ">
                    <!-- Top Pagination  -->
                    <div class="card-header py-3">
                        <ul class="nav nav-tabs">
                            <li class="nav-item">
                                <a class="nav-link active" href="{% url 'incident_report_general' %}">General</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="{% url 'incident_report_people' %}">People</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="{% url 'incident_report_vehicle' %}">Vehicle</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="{% url 'incident_report_media' %}">Media</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="{% url 'incident_report_remarks' %}">Remarks</a>
                            </li>
                        </ul>
                    </div>

                    <div class="card-body">
                        <div class="table-responsive">
                            <table>
                                <form id="form_incidentgeneral" action="{% url 'incident_report_general' %}" enctype="multipart/form-data" method="post" data-acc-url="{% url 'ajax_load_accident' %}">
                                    <div class="form-row">
                                        <div class="form-group col-md-6">
                                            <label for="inputEmail4">Date</label>
                                            {{user_report_form.date}}
                                        </div>
                                        <div class="form-group col-md-6">
                                            <label for="inputPassword4">Time</label>
                                            {{user_report_form.time}}
                                        </div>
                                    </div>
                                    <hr>
                                    <div class="form-row">
                                        <div class="form-group col-md-12">
                                            <label for="inputAddress">Street Address</label>
                                            {{user_report_form.location}}
                                        </div>
                                    </div>

                                    
                                    <hr>
                                    <div class="form-row">
                                        <div class="form-group col-md-6">
                                            <label for="inputWeather">Weather</label>
                                            {{inc_gen_form.weather}}
                                        </div>
                                        <div class="form-group col-md-6">
                                            <label for="inputLight">Light</label>
                                            {{inc_gen_form.light}}
                                        </div>
                                    </div>
                                    <!-- ================================= -->
                                    <hr>
                                    <div class="form-row">
                                        <div class="form-group col-md-12">
                                            <label for="inputSeverity">Severity</label>
                                        {{inc_gen_form.severity}}
                                        </div>
                                    </div>
                                    <div class="form-row">
                                        <div class="form-group col-md-6">
                                            <label for="inputAccident">Accident Factor</label>
                                            {{inc_gen_form.accident_factor}}
                                        </div>
                                        <div class="form-group col-md-6">
                                            <label for="inputAccident">Accident Factor Sub Category</label>
                                            {{inc_gen_form.accident_subcategory}}
                                        </div>
                                    </div>
                                    <div class="form-row">
                                        <div class="form-group col-md-6">
                                            <label for="inputAccident">Collision Type</label>
                                            {{inc_gen_form.collision_type}}
                                        </div>
                                        <div class="form-group col-md-6">
                                            <label for="inputAccident">Collision Sub Category</label>
                                            {{inc_gen_form.collision_subcategory}}
                                        </div>
                                    </div>

                                    
                                    <!-- ================================= -->
                                    <div class="form-row">
                                        <div class="form-group col-md-6">
                                            <label for="inputCrashType">Crash Type</label>
                                            {{inc_gen_form.crash_type}}
                                        </div>
                                        <div class="form-group col-md-6">
                                            <label for="inputMovement">Movement Code</label>
                                            {{ inc_gen_form.movement_code }}
                                           
                                        </div>
                                    </div>
                                    <!-- ================================= -->
                                    <br>
                                    <div class="modal-footer mb-3">
                                        <input type="button" class="btn btn-secondary" data-dismiss="modal"
                                            value="Clear">
                                        <input type="submit" class="btn btn-primary" value="Save">
                                    </div>
                                </form>
                            </table>
                        </div>
                    </div>
                </div>
                <!-- End of User Report Table  -->

            </div>
            <!-- End of Page Content -->

AJAX

<script>
    $("#id_accident_factor").change(function () {
        const url = $("#form_incidentgeneral").attr("data-acc-url");  // get the url of the `load_cities` view
        const accidentId = $(this).val();  // get the selected country ID from the HTML input

        $.ajax({                       // initialize an AJAX request
            url: url,                    // set the url of the request (= /persons/ajax/load-cities/ )
            data: {
                'accident_factor_id': accidentId       // add the country id to the GET parameters
            },
            success: function (data) {  
                //console.log(data) // `data` is the return of the `load_cities` view function
                $("#id_accident_subcategory").html(data);  // replace the contents of the city input with the data that came from the server

                let html_data = '<option value="">---------</option>';
                data.forEach(function (accident_subcategory) {
                    html_data += `<option value="${accident_subcategory.id}">${accident_subcategory.sub_category}</option>`
                });
                console.log(html_data);
                $("#id_accident_subcategory").html(html_data);

            }
        });

    });

    $("#id_collision_type").change(function () {
        const url = $("#form_incidentgeneral").attr("data-acc-url");  // get the url of the `load_cities` view
        const collisionId = $(this).val();  // get the selected country ID from the HTML input

        $.ajax({                       // initialize an AJAX request
            url: url,                    // set the url of the request (= /persons/ajax/load-cities/ )
            data: {
                'collision_type_id': collisionId       // add the country id to the GET parameters
            },
            success: function (data) {  
                //console.log(data) // `data` is the return of the `load_cities` view function
                $("#id_collision_subcategory").html(data);  // replace the contents of the city input with the data that came from the server

                let html_data = '<option value="">---------</option>';
                data.forEach(function (collision_subcategory) {
                    html_data += `<option value="${collision_subcategory.id}">${collision_subcategory.sub_category}</option>`
                });
                console.log(html_data);
                $("#id_collision_subcategory").html(html_data);

            }
        });

    });
</script>

Dropdown HTML

<option value="">---------</option>
{% for accsubcategory in acc_subcat %}
<option value="{{ accsubcategory.pk }}">{{ accsubcategory.sub_category }}</option>
{% endfor %}

{% for colsubcategory in col_subcat %}
<option value="{{ colsubcategory.pk }}">{{ colsubcategory.sub_category }}</option>
{% endfor %}

Views

def incident_report_general(request):
if request.method == 'POST':
    user_report_form = UserReportForm(request.POST, request.FILES)
    inc_gen_form = IncidentGeneralForm(request.POST, request.FILES)

else:
    user_report_form = UserReportForm()
    inc_gen_form = IncidentGeneralForm()
context = {
    'user_report_form': user_report_form,
    'inc_gen_form': inc_gen_form,
}
return render(request, 'pages/incident_report.html', context)

def load_accident(request):
accident_factor_id = request.GET.get('accident_factor_id')
collision_type_id = request.GET.get('collision_type_id')
acc_subcat = AccidentCausationSub.objects.filter(accident_factor_id=accident_factor_id).all()
col_subcat = CollisionTypeSub.objects.filter(collision_type_id=collision_type_id).all()
context = {
    'acc_subcat': acc_subcat,
    'col_subcat': col_subcat
}
return render(request, 'incident/acc_sub_dropdown_list_options.html', context)

Form

class IncidentGeneralForm(forms.ModelForm):
class Meta:
    model = IncidentGeneral
    fields = '__all__'

def __init__(self, *args, **kwargs):
    super(IncidentGeneralForm, self).__init__(*args, **kwargs)
    self.fields['accident_factor'].widget.attrs['class'] = 'form-control'
    self.fields['accident_subcategory'].widget.attrs['class'] = 'form-control'
    self.fields['collision_type'].widget.attrs['class'] = 'form-control'
    self.fields['collision_subcategory'].widget.attrs['class'] = 'form-control'
    self.fields['weather'].widget.attrs['class'] = 'form-control'
    self.fields['light'].widget.attrs['class'] = 'form-control'
    self.fields['severity'].widget.attrs['class'] = 'form-control'
    self.fields['crash_type'].widget.attrs['class'] = 'form-control'
    self.fields['movement_code'].widget.attrs['class'] = 'form-control'
    
    self.fields['accident_subcategory'].queryset = AccidentCausationSub.objects.none()
    self.fields['collision_subcategory'].queryset = CollisionTypeSub.objects.none()

    if 'accident_factor' in self.data:
        try:
            accident_factor_id = int(self.data.get('accident_factor'))
            self.fields['accident_subcategory'].queryset = AccidentCausationSub.objects.filter(accident_factor_id=accident_factor_id).order_by('accident_factor')
        except (ValueError, TypeError):
            pass  # invalid input from the client; ignore and fallback to empty City queryset
    elif self.instance.pk:
        self.fields['accident_subcategory'].queryset = self.instance.accident_factor.accident_subcategory_set.order_by('subcategory')
        
    if 'collision_type' in self.data:
        try:
            collision_type_id = int(self.data.get('collision_type'))
            self.fields['collision_subcategory'].queryset = CollisionTypeSub.objects.filter(collision_type_id=collision_type_id).order_by('collision_type')
        except (ValueError, TypeError):
            pass  # invalid input from the client; ignore and fallback to empty City queryset
    elif self.instance.pk:
        self.fields['collision_subcategory'].queryset = self.instance.collision_type.collision_subcategory_set.order_by('subcategory')
Back to Top