CODEWITHSUNDEEP
pythondjangodjango-templates
Ajay Gupta
Ajay Gupta

Reputation: 1285

How to return django form object in an AJAX request from django template?

I am trying to call my view from django template via an Ajax call.

I want the form object in response from view such that I can render this form via jquery in a div element.

Is it possible ? How?

This is what i tried:

home.html

function get_edit_form(button, id)
  {
        $.ajax({
            url: "/manage/licenses/{{mls_signup_code}}/{{agent_id}}/" + id + "/",
            type: "get",
            data: {id: id},
            success: function(response) {
            console.log(response);
            $("#formdiv").html({{ response.as_p }});
            }
        })
  }

Views.py

elif request.method == "GET":
        owned_license_id = request.GET.get('id', '')
        form = OwnedLicenseForm(owned_license_id)
        return form

Upvotes: 1

Views: 7449

Answers (2)

Shaun Overton
Shaun Overton

Reputation: 621

You can accomplish this with a combination of Django and JQuery.

Step 1: Create an ultra simple form_from_ajax.html Template

The template can be as simple as {{form.as_p}}. The point is to not inherit your base template. You're simply using this form_from_ajax.html template to render the HTML of the form.

Step 2: Create a View with a slug argument that helps you get the correct form

def payment_method_ajax(request, method):  # method is your slug
    """Load a dynamic form based on the desired payment method"""

    options = {
        'ach': ECheckForm(),  # Dynamic form #1
        'credit-card': CreditCardForm(),  #  Dynamic form #2
    }

    if method in options.keys():
        context = {'form': options[method]}
    else:
        context = None

    template = 'your_app_name/form_from_ajax.html'
    return render(request, template, context)

Step 3: Define the AJAX url in urls.py

[...
    path(
        'payment-method-ajax/<slug:method>/',  # notice the slug in the URL
        views.payment_method_ajax,
        name='payment-method-ajax'),
...]

Step 4: Update your template where you'd like the AJAX loaded form to appear

Make some buttons to have the user select an approprate form option

<button id="btn_ach" onclick="load_payment_form(this)">ACH</button>
<button id="btn_credit_card" onclick="load_payment_form(this)">Credit Card</button>

form-fields is where the dynamic form will be loaded

<form id="id-form" style="display: none;">
    {% csrf_token %}

    <div id="form-fields"></div>
    <input type="submit" value="Save Payment Details"/>
</form>

Make sure to add slugs to your main view's context

context = {
        'target': 'Add a New Payment Method',
        'h1': 'Add a New Payment Method',
        'ach': 'Save an ACH Profile',
        'credit_card': 'Save a Credit Card Profile',
        'slugs': ['ach', 'credit-card'],  # Here are the slugs ****
    }

Step 5: Load the form with JQuery and the button's onclick

<script>
    var ach = 'ACH';
    var creditCard = 'Credit Card';

    var form_urls ={
        ach : '{% url "payment-method-ajax" slugs.0 %}',
        creditCard : '{% url "payment-method-ajax" slugs.1 %}',
    }

    function load_payment_form(btn) {

        if(btn.innerText==ach) {
            get_url = form_urls['ach'];
            type = ach;
        }
        else if(btn.innerText==creditCard) {
            console.log('Load credit card form');
            get_url = form_urls['creditCard'];
            type = creditCard;
        }

        $.get({'url': get_url}).done(

               function(data) {
                document.getElementById('form-fields').innerHTML = data;})

        document.getElementById("id-form").style.display = "block";
    }
</script>

Upvotes: 5

NeoWang
NeoWang

Reputation: 18523

I see what you are trying to do, but you cannot render the html form this way:

$("#formdiv").html({{ response.as_p }});

I think you are confusing server side rendering (Django templates) with client side rendering. Server side rendering happens when your server is processing the request, it cannot render objects produced by javascript running in the browser.

Because response is a javascript object, obtained by jquery sending an Ajax request to your url. At this time, the page has already been rendered by Django's template engine, and sent to the browser. There is no way for Django template to even be aware of this response.

I understand you want to use the as_p() method to render the form, you can do it like this:

function get_edit_form(button, id)
{
        $.ajax({
            url: "/manage/licenses/{{mls_signup_code}}/{{agent_id}}/" + id + "/",
            type: "get",
            data: {id: id},
            success: function(response) {
              console.log(response);
              // response is form in html format
              $("#formdiv").html(response);
            }
        })
  }

# Views.py
elif request.method == "GET":
        owned_license_id = request.GET.get('id', '')
        form = OwnedLicenseForm(owned_license_id)
        return HttpResponse(form.as_p()) # return a html str

Upvotes: 6

Related Questions