包含带有动态Django表单的模板

Question

I have a model with a choices field, and the creation form has different fields depending on the field. I'm implementing the design of a dashboard in which the user can click a button (one button for each choice) and a model containing the model form will be displayed.

I want to use a template only for the model and send the form and action URL to it depending on which button the user clicks, but that would mean I have to mix JS and Django variables and I don't know if that's a good idea.

The code right now is something like this:

dashboard.html

<div class="add-connections">
    <div class="col-sm-3 text-center" >
        <div class="connection-box">
            {% if user_connections.EP %}
                <img src="{% static 'images/green-check-mark.png' %}" alt="Connection added" class="check">
            {% else %}
                <a href="" class="btn" data-toggle="modal" data-target="#modal-new-connection">Activate</a>
            {% endif %}
        </div>
    </div>
    <div class="col-sm-3 text-center" >
        <div class="connection-box">
            {% if user_connections.OLX %}
                <img src="{% static 'images/green-check-mark.png' %}" alt="Connection added" class="check">
            {% else %}
                <a href="" class="btn" data-toggle="modal" data-target="#modal-new-connection">Activate</a>
            {% endif %}
        </div>
    </div>
    <div class="col-sm-3 text-center" >
        <div class="connection-box">
            {% if user_connections.CC %}
                <img src="{% static 'images/green-check-mark.png' %}" alt="Connection added" class="check">
            {% else %}
                <a href="" class="btn" data-toggle="modal" data-target="#modal-new-connection">Activate</a>
            {% endif %}
        </div>
    </div>
    <div class="col-sm-3 text-center" >
        <div class="connection-box">
            {% if user_connections.FR %}
                <img src="{% static 'images/green-check-mark.png' %}" alt="Connection added" class="check">
            {% else %}
                <a href="" class="btn" data-toggle="modal" data-target="#modal-new-connection">Activate</a>
            {% endif %}
        </div>
    </div>
</div>

{% url 'create_olx_connection' as olx_url %}
{% url 'create_ep_connection' as ep_url %}
{% url 'create_cc_connection' as cc_url %}
{% url 'create_fr_connection' as fr_url %}
{% include "properties/dashboard/connection_modal.html" %}

connection_modal.html

<!-- Modal -->
<div class="modal fade modal-property" id="modal-new-connection" tabindex="-1" role="dialog" aria-labelledby="myConnectionModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content panel-success">
      <div class="modal-header panel-heading">
        <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title text-uppercase text-white"><b>Connections</b></h4>
      </div>
      <div class="modal-body">
       <form action="{{ action_url }}"
        {{ form.as_p }}
        <div>
            <button type="submit" class="btn btn-outline-success">Activate connection</button>
            <a href="" class="btn">Cancel</a>
        </div>
       </form>
      </div>
    </div>
  </div>
</div>

views.py

def get_context_data(self, **kwargs):
        context = super(
            ManageServicesView, self).get_context_data(**kwargs)
        ...
        context['connection_forms'] = {
            'olx_form': OLXform(),
            'el_pais_form': ElPaisForm(),
            'finca_raiz_form': FincaRaizForm(),
            'calicasa_form': CaliCasaForm()
        }
        return context

I want something like {% include "properties/dashboard/connection_modal.html" with form=chosen_form and action_url=chosen_url %} but I don't know how to link each button's click event with Django variables to be able to do that. I don't want to code a model for each option, I think it has to be a cleaner way. I'd appreciate your suggestions.

Answer 1

You could put a {% for ... %} loop in connection_modal.html to generate all the modals, with the correct forms, that you need. Than put a another for loop in dashboard.html to create the correct links.

Tweaking views.py :

context['connections'] = {
    'OLX': {
        'form' : OLXform(),
        'user_connected': user_connections.OLX
    },
    'EP': {
        'form' : ElPaisForm(),
        'user_connected': user_connections.EP
    },
    # other connections here
}

dashboard.html:

{% for connection,data in user_connected.items %}
<div class="col-sm-3 text-center" >
    <div class="connection-box">
        {% if data.user_connected %}
            <img src="{% static 'images/green-check-mark.png' %}" alt="Connection added" class="check">
        {% else %}
            <a href="" class="btn" data-toggle="modal" data-target="#modal-new-connection-{{connection}}">Activate</a>
        {% endif %}
    </div>
</div>
{% endfor %}

connection_modal.html:

{% for connection,data in user_connected.items %}
 {% if not data.connected %}
  <!-- Modal for {{connection}} -->
  <div  id="modal-new-connection-{{connection}}" class="modal fade modal-property" tabindex="-1" role="dialog" aria-labelledby="myConnectionModal">
    <!--  modal code before form -->
    {{ data.form }}
    <!--  modal code after form -->
  </div>
 {% endif %}
{% endfor %}

This should create as many modals as you need, each with their own id value, that can be called from the appropriate link. For example modal id "modal-new-connection-OLX" will be created with the OLX form and be called from the OLX link.