简体   繁体   中英

how to javascript variable in twig?

i have this code in my twig file:

<script>



function trabajoEquipos(id)
{
    var cliente = id

    $.ajax({
        dataType: "json",
        url: {{ path("work_trabajoEquipos",{id: cliente}) }},
        type: "POST",
        data: {"cliente":cliente},
        success: function(data)
        {
            $("#divajax").html(data);
        }
    })

}

As you can see, i want to put the var "cliente" into the URL section of the ajax, but i cant do it in this way


edit

Here is my full code as requested :

{% extends 'base.html.twig' %}
    {% block body %}
    {{parent()}}
    <div class="container">
    <div class="page-header">Escribe los datos del trabajo encargado por el cliente: </div>
            <div class="col-md-12">
                <div class="row well">
                       <div style="padding-left:250px; padding-right:250px;">
                        {{ form_start(form, {'attr' : { 'role' : 'form', 'novalidate' : 'novalidate'} }) }}

                         <div class="form-group">
                            {{ form_label(form.titulo) }}
                            {{ form_widget(form.titulo, {'attr': { 'class' : 'form-control', 'placeholder' : 'Nombre del trabajo' } }) }}
                            <span class="text-danger">{{ form_errors(form.titulo) }}</span>
                        </div>

                        <div class="form-group">
                            {{ form_label(form.descripcion) }}
                            {{ form_widget(form.descripcion, {'attr': { 'class' : 'form-control', 'placeholder' : 'Descripcion del trabajo' } }) }}
                            <span class="text-danger">{{ form_errors(form.descripcion) }}</span>
                        </div>
                         <div class="form-group">
                            {{ form_label(form.fechainicio) }}
                            {{ form_widget(form.fechainicio, {'attr': { 'class' : 'form-control', 'placeholder' : '' } }) }}
                            <span class="text-danger">{{ form_errors(form.fechainicio) }}</span>
                         </div>

                         <div class="form-group">
                            {{ form_label(form.fechaentrega) }}
                            {{ form_widget(form.fechaentrega, {'attr': { 'class' : 'form-control', 'placeholder' : '' } }) }}
                            <span class="text-danger">{{ form_errors(form.fechaentrega) }}</span>
                        </div>

                        <div class="form-group">
                            {{ form_label(form.client) }}
                            {{ form_widget(form.client, {'attr': { 'class' : 'form-control', 'onchange' : 'trabajoEquipos(this.value)' } }) }}
                            <span class="text-danger">{{ form_errors(form.client) }}</span>
                        </div>

                        <div class="form-group">
                            {{ form_label(form.user) }}
                            {{ form_widget(form.user, {'attr': { 'class' : 'form-control', 'placeholder' : '' } }) }}
                            <span class="text-danger">{{ form_errors(form.user) }}</span>
                        </div>

                        <div class="form-group">
                            {{ form_label(form.prioridad) }}
                            {{ form_widget(form.prioridad, {'attr': { 'class' : 'form-control', 'placeholder' : '' } }) }}
                            <span class="text-danger">{{ form_errors(form.prioridad) }}</span>
                        </div>

                         <div class="checkbox">
                            {{ form_widget(form.terminado) }}<b>Terminado</b>
                            <span class="text-danger">{{ form_errors(form.terminado) }}</span>
                        </div>

                        <p>
                            {{ form_widget( form.save, { 'label' : ' CREAR TRABAJO', 'attr' : { 'class' : 'btn btn-success' } }  ) }}
                            <a class="btn btn-danger" href="{{ path('user_index')}}">VOLVER<span class="glyphicon glyphicon-menu-left"></span></a>
                        </p>
                        {{ form_end(form) }}
                        </div>
                </div>
                <div  id="divajax" class="row well">

                </div>
        </div>
    </div>
    </div>
    <script>



        function trabajoEquipos(id)
        {
            var cliente = id

            $.ajax({
                dataType: "json",
                url: {{ path("work_trabajoEquipos",{id: cliente}) }},
                type: "POST",
                data: {"cliente":cliente},
                success: function(data)
                {
                    $("#divajax").html(data);
                }
            })

        }
    </script>
{% endblock %}

This would be my aproach to solve this issue. As you can't pass a javascript var to twig you need to calculate the paths in advance. As I'm not familiar with the symfony form builder I've created a pseudo code

template.twig

<select id="cbo_client" name="cbo_client">
{% for client in clients %}
    <option value="{{ client.getId() }}" data-path="{{ path('work_trabajoEquipos', {id: client.getId() }) }}">{{ client.getName() }}</option>
{% endfor %}
</select>

Javascript :

<script>
$(function() {
    $('#cbo_client').on('change', function(e) {
        var url = $('option:selected', this).data('path');
        $.ajax({
            dataType: "json",
            url: url,
            type: "POST",
            data: {cliente: $(this).val(), },
            success: function(data)
            {
                $("#divajax").html(data);
            }
    })            
    }
});
</script>

2 options : put your js in twig so you can use :

url: {{ path("work_trabajoEquipos",{'id': cliente}) }}

or use https://github.com/FriendsOfSymfony/FOSJsRoutingBundle

Add some quotes for the url: key:

function trabajoEquipos(id)
    {
        var cliente = id

        $.ajax({
            dataType: "json",
            url: "{{ path('work_trabajoEquipos', {id: cliente}) }}",
            type: "POST",
            data: {cliente: cliente},
            success: function(data)
            {
                $("#divajax").html(data);
            }
        })

    }

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM