Load a Django Form into Template using jQuery?

92
July 27, 2021, at 08:00 AM

I am using Django function based views with a single template which contains multiple tabs. Depending on which tab is selected I hide/show certain elements on the page by catching .click() event using jQuery. I populate the visible elements using Ajax requests to certain view functions.

I added a new tab to submit data via a form. Currently I have an additional template containing the form. When the tab is clicked, I load the template into an element using jQuery.load(upload.html). The form populates and posts to a Django view through a modelForm. It works alright however I can't seem to figure out how to stay on the same form tab after posting. Any redirect from Django causes the main template to reload to the default starting tab.

Also, if the user navigates to main_template/upload.html the form is loaded outside of the main template page. I would like to avoid this.

Am I going about this wrong ?

main_template.html

<div id="myForm"></div>
$("#tabButton").click(function(){
 $("#myForm").load("upload.html"); 
});

upload.html

<form method="post" enctype="multipart/form-data" action="{% url 'core:upload' %}">      
    {% csrf_token %}
    {% bootstrap_form form layout='horizontal' %}
    {% bootstrap_button "Upload" button_type="submit" %}
</form>

urls.py

urlpatterns = [
    url('upload', views.upload, name='upload'),   
]

views.py

 def upload(request):
        if request.method == 'POST':
            form = uploadForm(request.POST, request.FILES)
            if form.is_valid():         
                form.save()
                **return redirect(request.META['HTTP_REFERER'])** ### ---> ???
        else:
            form = uploadForm()
            context = {'form': form}
        return render(request, 'core/upload.html', context)
READ ALSO
Android webview app with keyboard up is not working, but with keyboard down it is working

Android webview app with keyboard up is not working, but with keyboard down it is working

In my android app, I am using web viewMy phone has an Android system webview version 91

120
How to add class to specific number of increment div&#39;s child in php?

How to add class to specific number of increment div's child in php?

As i am using a increment in PHP which output the number (1-unlimited) to div class ->

91
Having trouble deploying React app with a server on Heroku

Having trouble deploying React app with a server on Heroku

I am having trouble deploying on Heroku my React app and serverI have successfully Deployed on Heroku before but for some reason, I forgot how to properly do it

75