Call JavaScript function from Twig (symfony 5) - symfony

Question

I'm working on a Symfony5 project and I want to call a JavaScript function and pass an Ajax Request (which I get from a controller) from a Twig.
i create a function phoneverif() in order to do some verification before the validation of form ..like doing a test if the fields are blanks then an alert will appears also the verification of the existence of data in db.
But a first, very simple test already failed, and an error appear :
Uncaught ReferenceError: phoneverif is not defined
onclick http://localhost:8000/super_admin/telephone/nouveau:1
here is my twig code :
{% extends 'superadmin.html.twig'%}
{% block body %}
<div class="container-fluid">
<!-- Page Heading -->
<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 %}
<!-- general form elements -->
<div>
<!-- form start -->
{{ form_start(form)}}
<div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>{{ form_label(form.userGroup) }}</label>
{{ form_widget(form.userGroup) }}
<span class="text-danger">{{ form_errors(form.userGroup) }}</span>
</div>
<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 type="button" class="btn btn-primary" onclick="phoneverif();">Ajouter</button>
<a class="btn btn-warning" href="{{ path('Les_telephones') }}">Retour</a>
</div>
{{ form_end(form)}}
</div>
</div>
</div>
{% endblock %}
{% block javascripts %}
<script src="{{ asset('bundles/fosjsrouting/js/router.js') }}"></script>
<script src="{{ path('fos_js_routing_js', { callback: 'fos.Router.setData' }) }}"></script>
<script type="text/javascript">
function phoneverif() {
if ($("#telephone_extension").val() == '') {
alert('Vous devez saisir une extension');
} else {
if ($("#telephone_dialplanNumber").val() == '') {
alert('Vous devez saisir le dialplan du téléphone');
} else {
if ($("#telephone_login").val() == '') {
alert('Vous devez saisir le login du téléphone');
} else {
if ($("#telephone_pass").val() == '') {
alert('Vous devez saisir le mot de passe du téléphone');
} else {
$.ajax({
type: 'get',
url: Routing.generate('phone_verif', {extension: $("#telephone_extension").val()}),
success: function (data) {
if (data.existe == 1) {
alert('Téléphone non valide');
} else {
$("form").submit();
}
},
error: function() { alert('Erreur lors de l'appel AJAX'); }
});
}
}
}
}
}
</script>
{% endblock %}
function verifphone :
public function Phoneverif1(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');
}
}
my fosjsrouting configuration :
config/packages/routing.yaml:
framework:
router:
utf8: true
# Configure how to generate URLs in non-HTTP contexts, such as CLI commands.
# See https://symfony.com/doc/current/routing.html#generating-urls-in-commands
#default_uri: http://localhost
fos_js_routing:
routes_to_expose: [ phone_verif ]
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::Phoneverif1
options:
expose: true

Answer 1

Rename the function and try again
I solved this problem by renaming the function. You try too.
Phoneverif1()
{% extends 'superadmin.html.twig'%}
{% block body %}
<div class="container-fluid">
<!-- Page Heading -->
<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 %}
<!-- general form elements -->
<div>
<!-- form start -->
{{ form_start(form)}}
<div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>{{ form_label(form.userGroup) }}</label>
{{ form_widget(form.userGroup) }}
<span class="text-danger">{{ form_errors(form.userGroup) }}</span>
</div>
<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 type="button" class="btn btn-primary" onclick="Phoneverif1()">Ajouter</button>
<a class="btn btn-warning" href="{{ path('Les_telephones') }}">Retour</a>
</div>
{{ form_end(form)}}
</div>
</div>
</div>
{% endblock %}
{% block javascripts %}
<script src="{{ asset('bundles/fosjsrouting/js/router.js') }}"></script>
<script src="{{ path('fos_js_routing_js', { callback: 'fos.Router.setData' }) }}"></script>
<script type="text/javascript">
function Phoneverif1() {
if ($("#telephone_extension").val() == '') {
alert('Vous devez saisir une extension');
} else {
if ($("#telephone_dialplanNumber").val() == '') {
alert('Vous devez saisir le dialplan du téléphone');
} else {
if ($("#telephone_login").val() == '') {
alert('Vous devez saisir le login du téléphone');
} else {
if ($("#telephone_pass").val() == '') {
alert('Vous devez saisir le mot de passe du téléphone');
} else {
$.ajax({
type: 'get',
url: Routing.generate('phone_verif', {extension: $("#telephone_extension").val()}),
success: function (data) {
if (data.existe == 1) {
alert('Téléphone non valide');
} else {
$("form").submit();
}
},
error: function() { alert('Erreur lors de l'appel AJAX'); }
});
}
}
}
}
}
</script>
{% endblock %}