на моем проекте Symfony 4 У меня есть страница, где я заполняю форму. В этом я должен выбрать автомобиль в определенный момент. Я хотел бы предложить пользователю возможность добавить один в ajax справа от поля «Автомобиль». Как только он добавлен в базу данных, он также добавляет в свой список, чтобы он мог выбрать его. Я смотрел учебник, чтобы сделать почти то же самое. Я создал свою функцию в своем контроллере, и мне удается сгенерировать модальное окно с формой для ввода нового транспортного средства. Но я не могу действительно отправить его и сделать так, чтобы он появился в списке.
В настоящее время у меня есть это:
Этостоит добавить транспортное средство в базу данных, и чтобы оно появилось в списке полей моей основной формы. Поле «Véhicule de service» (последнее поле).
Итак, я сделал это:
Я создал контроллер функции для добавления транспортного средства:
/**
* Pour créer un nouveau véhicule
*
* @Route("/manage/ordreMission/new/new_vehicule", name="vehicule_create")
* @Method({"POST"})
* @return Response
*/
public function createVehicule(Request $request, ObjectManager $manager)
{
$vehicule = new Vehicule();
$form = $this->createForm(VehiculeType::class, $vehicule, [
'action' => $this->generateUrl($request->get('_route'))
])
->handleRequest($request);
if ($form->isSubmitted() && $form->isValid()) {
$manager->persist($vehicule);
$manager->flush();
return $this->json([
'code' => 200,
'message' => 'OK',
'vehicule' => $vehicule,
], 200);
}
return $this->render('ordre_mission/partials/newVehicule.html.twig', [
'formVehicule' => $form->createView(),
]);
}
Iсоздал свой вид формы в Twig:
{# ordre_mission/partials/newVehicule.html.twig #}
{# http://127.0.0.1:8000/manage/ordreMission/new/new_vehicule #}
{{form_start(formVehicule)}}
{{ form_widget(formVehicule) }}
<div class="form-group row">
<div class="col-sm-2"></div>
<div class="col-sm-10">
<button type="submit" class="btn btn-primary" data-label="Enregistrer">
Enregistrer
</button>
</div>
</div>
{{ form_end(formVehicule) }}
И в своем основном виде Twig (с первой формой) я добавил модал и Ajax для добавления моего транспортного средства:
{% extends "base.html.twig" %}
{% block stylesheets %}
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/css/select2.min.css" rel="stylesheet"/>
{% endblock %}
{% block body %}
{{form_start(form)}}
{{form_row(form.user)}}
{{form_row(form.accompagnateur)}}
{{form_row(form.entreprise)}}
{{form_row(form.lieu)}}
{{form_row(form.motif)}}
{{form_row(form.date)}}
{{form_row(form.transport)}}
{{form_row(form.immatriculationVehiculeService)}}
{# champs où je vais pouvoir ajouter un véhicule #}
<button class="btn btn-primary" type="submit">Enregistrer</button>
{{form_end(form)}}
<button class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
<i class="fa fa-plus"></i>
Ajouter un véhicule
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalTitle">Ajout d'un article</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body"></div>
</div>
</div>
</div>
<div id="ajax-results">here comes the result</div>
{% endblock %}
{% block javascripts %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.2.2/jquery.form.min.js"></script>
<script>
$('.js-example-basic-single').select2({placeholder: 'Choisissez un agent', allowClear: true, language: 'fr'});
</script>
<script>
$('#exampleModal').on('shown.bs.modal', function () {
var modal = $(this);
$.ajax('{{ path('vehicule_create') }}', {
success: function (data) {
modal.find('.modal-body').html(data);
}
});
});
$(document).on("submit", "form", function (e) {
e.preventDefault();
console.log(e.target.id);
var id = e.target.id;
if(id == "formVehicule")
{
$formVehicule = $(e.target);
modal = $('#exampleModal');
var $submitButton = $formVehicule.find(':submit');
$submitButton.html('<i class="fas fa-spinner fa-pulse"></i>');
$submitButton.prop('disabled', true);
$formVehicule.ajaxSubmit({
type: 'post',
success: function (data) {
if (data.message == 'OK') {
var sel = document.getElementById("ordre_mission_immatriculationVehiculeService");
var opt = document.createElement('option');
opt.appendChild(document.createTextNode(data.vehicule.vehiculeString));
opt.value = data.vehicule.immatriculation;
sel.appendChild(opt);
modal.modal('toggle');
} else {
modal.find('.modal-body').html(data);
}
},
error: function (jqXHR, status, error) {
$submitButton.html(button.data('label'));
$submitButton.prop('disabled', false);
}
});
}
else
{
e.target.submit();
}
});
</script>
{% endblock %}
UPDATE: (Я обновил свой код, вы можете увидеть его)
Так что все работает. Но это не чисто, я думаю. Проблема в том, что когда я отправлял основную форму, она также вводилась в прослушиватель, когда не должна. Поэтому мне пришлось добавить идентификатор в форму создания транспортного средства, и в слушателе я должен был выполнить условие:
Если идентификатор формы совпадает с идентификатором создания транспортного средства, то он может запустить код слушателя. В противном случае он должен отправить форму в обычном режиме.
За исключением того, что я не знаю, чиста ли она ... И самое главное, я рискую быть вынужденным добавить еще одну возможность добавления объекта модальным способом. Так будет все сложнее, не так ли?