从Twig调用JavaScript函数(symfony 5)

niwlg2el  于 2023-10-23  发布在  Java
关注(0)|答案(2)|浏览(133)

我在一个Symfony 5项目工作,我想调用一个JavaScript函数,并通过Ajax请求(我从一个控制器)从一个Twig。我创建一个函数phoneverif(),以做一些验证之前的形式验证。.喜欢做一个测试,如果字段是空白的,然后一个警报将出现也验证数据库中的数据的存在。
但是第一个非常简单的测试已经失败了,并且出现了一个错误:

Uncaught ReferenceError: phoneverif is not defined
    onclick http://localhost:8000/super_admin/telephone/nouveau:1

下面是我的wig代码:

{% 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">&times;</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 %}

功能验证电话:

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');
    }  

   }

我的fosjsrrouting配置:
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
a0zr77ik

a0zr77ik1#

重新命名函数再试一次我通过重命名函数解决了这个问题。你也试试。
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">&times;</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 javascript %}

<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 %}

hxzsmxv2

hxzsmxv22#

我回答:https://github.com/FriendsOfSymfony/FOSJsRoutingBundle/issues/383
无论如何,我或多或少遇到了同样的问题,所以我添加了routes.yaml:

fos_js_routing_js:
  defaults: { _controller: fos_js_routing.controller::indexAction, _format: 'js' }
  path: /js/routing/{_format}
  requirements:
      _format: 'js|json'

相关问题