soumettre le formulaire symfony 5 avec ajax
variety jones
Bonjour,
Je travaille sur un projet Symfony5 et je souhaite appeler une fonction JavaScript et transmettre une requête Ajax (que je reçois d'un contrôleur) d'un Twig. je crée une fonction test () afin de faire une vérification avant la validation du formulaire .. comme faire un test si les champs sont vides puis une alerte apparaîtra aussi la vérification de l'existence des données dans la base de données..
j'utilise FosJsRoutingBundle ,
mais lorsque je clique sur le boutton ajouter , rien n'apparait dans ma console dev , la requete AJAX ne fonctionne pas , mais je peux submitter le formulaire , je pense que ma probléme est avec le fosjsrouting bundle ou avec l'ajax , ceci ce que je fais :
mon controlleur :
<?php
namespace App\Controller;
use Symfony\Component\HttpKernel\Exception\AccessDeniedHttpException;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\Routing\Annotation\Route;
use App\Entity\Phones;
use App\Form\PhoneType;
use Symfony\Component\HttpFoundation\JsonResponse;
class PhoneController extends AbstractController
{
public function nouveauAction(Request $request): Response
{
$phone = new Phones();
$em = $this->getDoctrine()->getManager();
$form= $this->createForm(PhoneType::class , $phone, array('serverip' => $request->server->get('SERVER_ADDR')));
$form->handleRequest($request);
if ($form->isSubmitted() && $form->isValid()){
$phone->setComputerIp($request->getClientIp());
$phone->setStatus("ACTIVE");
$phone->setActive("Y");
$phone->setConfSecret($form->get('pass')->getData());
$em->persist($phone);
$em->flush();
$this->get('session')->getFlashBag()->add('noti ce', 'Le téléphone a été bien ajouter');
unset($phone);
unset($form);
$phone = new Phones();
$form = $this->createForm(PhoneType::class , $phone);
}
return $this->render('phone/nouveau_telephone.html.twig', array('form' => $form->createView()));
}
public function test(Request $request , $extension){
if ($request->isXmlHttpRequest()) {
$em = $this->getDoctrine()->getManager();
$phone = $em->getRepository(Phones::class)->findOneByExtension($extension);
if ($phone) {
$existe = 1;
} else {
$existe = 0;
}
$response = new JsonResponse();
return $response->setData(array('existe' => $existe));
} else {
throw new \Exception('Erreur');
}
}
}mon twig template :
{% extends 'base.html.twig' %}
{% block body %}
<div class="container-fluid">
<h1 class="h3 mb-4 text-gray-800">Nouveau téléphone</h1>
</div>
<div class="col-md-12">
{% for flashMessage in app.session.flashbag.get('notice') %}
<div class="alert alert-success alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<h4><i class="icon fa fa-check"></i>{{ flashMessage }}</h4>
</div>
{% endfor %}
<div>
<!-- form start -->
{{ form_start(form)}}
<div>
<div class="row">
<div class="form-group">
<label>{{ form_label(form.protocol) }}</label>
{{ form_widget(form.protocol) }}
<span class="text-danger">{{ form_errors(form.protocol) }}</span>
</div>
<div class="form-group">
<label>{{ form_label(form.extension) }}</label>
{{ form_widget(form.extension) }}
<span class="text-danger">{{ form_errors(form.extension) }}</span>
</div>
<div class="form-group">
<label>{{ form_label(form.dialplanNumber) }}</label>
{{ form_widget(form.dialplanNumber) }}
<span class="text-danger">{{ form_errors(form.dialplanNumber) }}</span>
</div>
<div class="form-group">
<label>{{ form_label(form.voicemailId) }}</label>
{{ form_widget(form.voicemailId) }}
<span class="text-danger">{{ form_errors(form.voicemailId) }}</span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>{{ form_label(form.login) }}</label>
{{ form_widget(form.login) }}
<span class="text-danger">{{ form_errors(form.login) }}</span>
</div>
<div class="form-group">
<label>{{ form_label(form.pass) }}</label>
{{ form_widget(form.pass) }}
<span class="text-danger">{{ form_errors(form.pass) }}</span>
</div>
<div class="form-group">
<label>{{ form_label(form.confSecret) }}</label>
{{ form_widget(form.confSecret) }}
<span class="text-danger">{{ form_errors(form.confSecret) }}</span>
</div>
<div class="form-group">
<label>{{ form_label(form.serverIp) }}</label>
{{ form_widget(form.serverIp) }}
<span class="text-danger">{{ form_errors(form.serverIp) }}</span>
</div>
</div>
</div>
</div>
<div>
<button id="test11" class="btn btn-primary" >Ajouter</button>
</div>
{{ form_end(form)}}
</div>
</div>
</div>
{% endblock %}
{% block javascripts %}
<script type="text/javascript">
document.getElementById("test11").addEventListener("click", test);
function test() {
if ($("#phone_extension").val() == '') {
alert('Vous devez saisir une extension');
} else {
if ($("#phone_dialplanNumber").val() == '') {
alert('Vous devez saisir le dialplan du téléphone');
} else {
if ($("#phone_login").val() == '') {
alert('Vous devez saisir le login du téléphone');
} else {
if ($("#phone_pass").val() == '') {
alert('Vous devez saisir le mot de passe du téléphone');
} else {
$.ajax({
type: 'get',
url: Routing.generate('verification_telephone', {extension: $("#phone_extension").val()}, true)),
success: function (data) {
if (data.existe == 1) {
alert('Téléphone non valide');
} else {
$("form").submit();
}
}
});
}
}
}
}
};
</script>
<script src="{{ asset('bundles/fosjsrouting/js/router.js') }}"></script>
<script src="{{ path('fos_js_routing_js', { callback: 'fos.Router.setData' }) }}"></script>
{% endblock %}
ma configuration de bundle FOSJSROUTINGBUNDLE:
config/routes/fos_js_routing.yaml:
fos_js_routing:
resource: "@FOSJsRoutingBundle/Resources/config/routing/routing.xml"routes.yaml:
verification_telephone:
path: /verification/phone/{extension}
controller: App\Controller\TelephoneController::verificationAction
options:
expose: true