Итак, у меня есть модель доставки с отношением внешнего ключа к клиенту. Я хотел бы ввести кнопку «добавить внешний ключ», как это делает область администратора.
Я читал ветку о пользовательском виджете, показанную здесь: Django: добавление кнопки «Добавить новый» для ForeignKey в ModelForm
К сожалению, я не смог заставить его работать, поэтому я попробовал другой подход.
В форме доставки я добавил кнопку «Добавить клиента». Эта кнопка открывает модальное окно, которое показывает форму для добавления клиента с помощью ajax.
Итак, форма работает, она добавляет нового клиента в базу данных, не покидая область формы доставки. Хитрость в том, что я хотел бы, чтобы новый добавленный клиент был выбран в раскрывающемся списке клиентов.
Мне нужно извлечь customer.id у только что созданного клиента и выбрать его или ее в раскрывающемся списке, вот где я застрял. Идентификатор еще не доступен в форме клиента, поэтому мне нужно будет извлечь его из базы данных с помощью GET ...
Есть мысли по этому поводу? Любая помощь будет принята с благодарностью!
urls.py
urlpatterns += [ # Links to create, update and delete deliveries
url(r'^delivery/create/$', login_required(views.DeliveryCreate.as_view()), name='delivery_create'),
url(r'^delivery/add_customer/$', login_required(views.delivery_add_customer), name='delivery_add_customer'),
]
views.py
# A function based view to add a customer on the fly in the delivery form
def delivery_add_customer(request):
data = dict()
if request.method == 'POST':
form = CustomerForm(request.POST)
if form.is_valid():
form.save()
data['form_is_valid'] = True
else:
data['form_is_valid'] = False
else:
form = CustomerForm()
context = {'form': form}
data['html_form'] = render_to_string('includes/partial_delivery_add_customer.html',
context,
request=request
)
return JsonResponse(data)
delivery_form.html
{% block content %}
<div id="modal_form" class="modal">
<div class="modal-content"></div>
</div><!-- End of modal -->
<div class="container">
<div class="row">
<div class="card">
<div class="card-action">
<button class="btn orange modal-trigger js-delivery-add-customer" data-url="{% url 'delivery_add_customer' %}">
<i class="material-icons btn__icon">add</i>
Add Customer
</button>
</div>
<form class="form-on-card" action="" method="POST">
{% csrf_token %}
{% form form=form %}
{% endform %}
<input button class="waves-effect waves-light btn" type="submit" value="Add" /></button>
</form>
</div>
</div><!-- End of row -->
</div><!-- End of container -->
{% endblock %}
partial_delivery_add_customer.html
<form class="form-on-card--modal modal-trigger js-add-customer-form" action="{% url 'delivery_add_customer' %}" method="POST" novalidate>
<div class="row row--flex">
<div class="col s12 m12 l8">
<div class="form-content">
{% csrf_token %}
{% form form=form %}
{% endform %}
</div><!-- End of form content -->
</div><!-- End of columns -->
</div><!-- End of row -->
delivery.js
$(function () {
var loadForm = function () {
var btn = $(this);
$.ajax({
url: btn.attr("data-url"),
type: 'get',
dataType: 'json',
beforeSend: function () {
$("#modal_form").modal("open");
console.info('%c message: Function(loadForm): Open modal', 'color: green;');
},
success: function (data) {
console.info('%c message: Function(loadForm): Insert form in modal', 'color: green;');
$("#modal_form .modal-content").html(data.html_form);
}
});
};
var saveForm = function () {
var form = $(this);
$.ajax({
url: form.attr("action"),
data: form.serialize(),
type: form.attr("method"),
dataType: 'json',
success: function (data) {
if (data.form_is_valid) {
console.info('%c message: Function(saveForm): Open modal', 'color: green;');
$("#id_customer_container .select-dropdown").val(); // Select the customer just saved
$("#modal_form").modal("close");
}
else {
console.info('%c message: Function(saveForm): Form data is invalid', 'color: red;');
$("#modal_form .modal-content").html(data.html_form);
}
}
});
return false;
};
$(".js-delivery-add-customer").click(loadForm);
$("#modal_form").on("submit", ".js-add-customer-form", saveForm);
});