Symfony 4-提交Ajax表单
Symfony 4-提交Ajax表单
提问于 2019-10-24 15:20:23
在我的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(),
]);
}我在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 %}更新：(我更新了我的代码，你可以看到它)
所以一切都能正常工作。但我觉得它并不干净。问题是，当我提交主表单时，它也进入了监听器，而不应该进入监听器。因此，我必须在车辆创建表单中添加一个ID，并且在侦听器中，我必须设置一个条件：
如果表单ID与车辆的创建ID匹配，则它可以启动侦听器代码。否则，他必须正常提交表单。
除了我不知道它是否是干净的。最重要的是，我可能会被引导添加另一种通过模态添加对象的可能性。所以事情会越来越复杂，不是吗？
回答 1
Stack Overflow用户
发布于 2019-10-24 15:44:43
您的错误显示symfony找不到路径
"POST /manage/ordreMission/new/new_vehicule“(来自"http://127.0.0.1:8000/manage/ordreMission/new")
您的路由看起来很好，所以要么您没有发送"POST“请求(您可以使用浏览器中的网络分析器进行检查)，要么您的JS代码工作不正常，您可能实际上发送了一个不是XmlHttpRequest()的请求。尝试删除路由定义中的condition="request.isXmlHttpRequest()“，看看它是否工作。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58544435
复制相关文章
相似问题
腾讯云开发者
