0

La duda que tengo es que iba a preguntar el por qué javascript se me ejecuta solo en la primera fila y en las demás no, pero cuando agrego el código aquí es al revés.

Algo que me gustaría que me ayudaran, si no es mucho pedir, ea a enviar por POST el formulario completo. Traté de enviarlo pero como trabajo con Django tengo que enviar en los datos el csrf_token pero no me lo envía siempre me da error, debido que la tabla es dinámica no lo puedo enviar normal con el submit(solo envía una fila), espero que me puedan ayudar

$(document).ready(function () {
    $("#nuevoServicio").click(function () {
        var tableReg = document.getElementById("tablaserviciosprest");
        $("#tablaserviciosprest").append("<tr>" + tableReg.rows[1].innerHTML + "</tr>");

        $('.eliminalinea').off().click(function (e) {
            $(this).parent('td').parent('tr').remove();
        });
        addcambios();
    });
});

function addcambios() {
    $(".seleccionarArea").change(function () {
        var $servselect = $(this).parents("tr").find("td")[1].children[0];
        $servselect.disabled = false;
 });       
}
function empty(unselect) {
    for (var i = 1; i < unselect.children.length; i++) {
        unselect.children[i].remove();
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script>
<form role="form" action="" method="post" class="form-horizontal">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">x</button>
        <h3>Adicionar Servicio Prestado</h3>
    </div>
    <div class="modal-body ">

        <div class="panel panel-default ">
            <div class="panel-body 2">
                <div class="form-group">
                    <label for="areaSP" class="control-label col-lg-1">Área*:</label>
                    <div class="col-lg-4">
                        <select class="form-control" id="areaSP" name="areaT">
                            <option value="">Seleccione Área ...</option>
                            {% for area in area_List %}
                                <option value="{{ area.pk }}">{{ area.area }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label for="clienteSP" class="control-label col-lg-1">Cliente*:</label>
                    <div class="col-lg-6">
                        <select class="form-control" id="clienteSP" name="areaT">
                            <option value="">Seleccione Cliente ...</option>
                            {% for cliente in cliente_List %}
                                <option value="{{ cliente.pk }}">{{ cliente.nombreEmp }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label for="carnetI" class="control-label col-lg-2">Servicios Prestados*:</label>
                    <div class="col-xs-offset-1 col-lg-11">
                        <table class="table table-bordered" id="tablaserviciosprest">
                            <thead>
                            <tr>
                                <th>Área</th>
                                <th>Servicio</th>
                                <th>Precio CUP</th>
                                <th>Precio CUC</th>
                                <th>Precio Total</th>
                                <th>Cantidad</th>
                                <th>Costo Total</th>
                                <th>Opciones</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr style="display:none; ">
                                <td class="col-lg-2">
                                    <select id="seleccionarArea[]"
                                            class="select2_single form-control select2-hidden-accessible seleccionarArea"
                                            name="seleccionarArea[]">
                                        <option value="">Seleccione Área ...</option>
                            <option value="1">Comercio</option>
                            <option value="2">Aplicaciones Informáticas</option>
                            <option value="3">Desarrollo</option>
                                    </select>
                                </td>
                                <td class="col-lg-2">
                                    <select id="seleccionarServicioP[]"
                                            class="select2_single form-control select2-hidden-accessible seleccionarServicioP"
                                            name="seleccionarServicioP[]" disabled="">
                                        <option value="">Seleccione Servicio ...</option>
                                    </select>
                                </td>
                                <td><input type="text" id="precioCUP" name="precioCUP[]" placeholder="CUP"
                                           class="form-control">
                                </td>
                                <td><input type="text" id="precioCUC" name="precioCUC[]" placeholder="CUC"
                                           class="form-control"></td>
                                <td><input type="text" id="precioTotal" name="precioTotal[]" class="form-control"
                                           placeholder="Total"></td>
                                <td><input type="text" id="cantidad" name="cantidad[]" class="form-control"
                                           placeholder="Cantidad"></td>
                                <td><input type="text" id="costoTotal" name="costoTotal[]" class="form-control"
                                           placeholder="Total"></td>
                                <td>
                                    <button type="button" class="eliminalinea btn btn-default btn-xs col-lg-offset-4">
                                        <span class="glyphicon glyphicon-minus " style="color: red"></span></button>
                                </td>
                            </tr>
                            <tr>
                                <td class="col-lg-2">
                                    <select id="seleccionarArea[]"
                                            class="select2_single form-control select2-hidden-accessible seleccionarArea"
                                            name="seleccionarArea[]">
                                        <option value="">Seleccione Área ...</option>
                            <option value="1">Comercio</option>
                            <option value="2">Aplicaciones Informáticas</option>
                            <option value="3">Desarrollo</option>
                                    </select>
                                </td>
                                <td class="col-lg-2">
                                    <select id="seleccionarServicioP[]"
                                            class="select2_single form-control select2-hidden-accessible seleccionarServicioP"
                                            name="seleccionarServicioP[]" disabled>
                                        <option value="">Seleccione Servicio ...</option>
                                    </select>
                                </td>
                                <td><input type="text" id="precioCUP[]" name="precioCUP[]" placeholder="CUP"
                                           class="form-control">
                                </td>
                                <td><input type="text" id="precioCUC[]" name="precioCUC[]" placeholder="CUC"
                                           class="form-control"></td>
                                <td><input type="text" id="precioTotal[]" name="precioTotal[]" class="form-control"
                                           placeholder="Total"></td>
                                <td><input type="text" id="cantidad[]" name="cantidad[]" class="form-control"
                                           placeholder="Cantidad"></td>
                                <td><input type="text" id="costoTotal[]" name="costoTotal[]" class="form-control"
                                           placeholder="Total"></td>
                                <td>
                                    <button type="button" class="eliminalinea btn btn-default btn-xs col-lg-offset-4" disabled>
                                        <span class="glyphicon glyphicon-minus " style="color: red"></span></button>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <button type="button" id="nuevoServicio" class="btn btn-danger nuevoServicio">Nuevo Servicio
                        </button>
                    </div>
                </div>
                <div class="form-group">
                    <label for="porCobrar" class="control-label col-lg-2">Por Cobrar:</label>
                    <div class="checkbox col-lg-7">
                        <input id="porCobrar" name="porCobrar" type="checkbox" checked>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <div class="col-lg-12 text-right">
            <button type="submit" class="btn btn-primary" name="submit">Guardar</button>
            <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
        </div>
    </div>
</form>

1 respuesta 1

0

Para que no te salga el error tienes que enviar el csrf con la petición de ajax.

$.ajax({
      data: {'form':form, csrfmiddlewaretoken: '{{ csrf_token }}'},
      type: 'POST',
      dataType: 'json',
      ....
})
9
  • A yo también le ponía comillas a csrfmiddlewaretoken, y la variable form seria el formulario, así como lo pusiste puedo enviar la tabla con todos los valores ya que es dinámica el 15 ene. 2018 a las 13:38
  • Tienes razón no tuve en cuenta que la tabla era dinámica , tuve en mismo inconveniente lo que hice fue leer uno a uno , no puede encontrar una solución mejor. el 15 ene. 2018 a las 13:46
  • Si eso pense que tendría que hacer, una pregunta usted trabaja con django, si trabaja me puede ayudar, en la tabla todos los campos los tengo que guardar en la base de datos tengo pensado en el modal para la tabla un campo valores que me guarde una lista con los valores de cada fila , lo que no sé es que tipo de datos tengo que poner , o me puedes aconsejar otra forma de hacerlo el 15 ene. 2018 a las 13:57
  • No te he entendido bien pero la mejor opción es recorrer la tabla con JavaScript e ir guardando los valores en una lista y enviar la lista con AJAX el 15 ene. 2018 a las 14:06
  • Esta bien muchas gracias, el 15 ene. 2018 a las 14:25

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.