Question

所以......在AJAX POST成功后替换数据时，我有一种奇怪的行为。

我有一个包含产品的表格，在编辑完这些产品后，我用新的数据替换旧数据。

奇怪的是，如果我编辑1行工作正常 BUT 如果我编辑例如：第1行，之后我编辑第2行，当AJAX POST成功时，替换两行的内容用新数据。我无法找到错误的位置，仍然是JQuery的新手：P

我的表格布局：

                <tbody id="contenido_tabla">
                    {% for producto in productos %}
                        <tr id="{{producto.id}}">
                            <td><span class="codpro">{{producto.codigo}}</span></td>
                            <td><span class="pro">{{producto}}</span></td>
                            <td><span class="catpro">{{producto.categoriaID}}</span></td>
                            {% if producto.activo %}
                                <td><span class="actpro" style="color: green;"><i class="icofont icofont-emo-wink-smile"></i></span></td>
                            {% else %}
                                <td><span class="actpro" style="color: red;"><i class="icofont icofont-emo-worried"></i></span></td>
                            {% endif %}
                            <td>
                                <a href="#" data-url="{% url 'ver_medidas' producto.id %}" data-toggle="modal" data-target="#verMedidaModal" class="btn btn-outline-primary menu-btn-medidas"><i class="icofont icofont-eye-alt"></i></a>
                                <a href="#" data-url="{% url 'ver_producto' producto.id %}" data-toggle="modal" data-target="#verProductoModal" title="Editar producto" class="btn btn-outline-success menu-btn-producto"><i class="icofont icofont-pen-alt-1"></i></a>
                                <a href="#" data-toggle="tooltip" title="Eliminar producto" class="btn btn-outline-danger menu-btn-eliminar-producto"><i class="icofont icofont-trash"></i></a>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>

JQuery的

     <script>
    $(document).ready(function(){
        //Al abrir modal:
        $('#verProductoModal').on('shown.bs.modal', function(){
            //Si se realizan cambios en algun input dentro de la modal:
            $('#verProductoModal .form-control, .form-check-input').on('input change', function(){

                //Se habilita el boton 'Guardar cambios'
                $('#verProductoModal .guardar-cambios-producto').prop('disabled', false);
            });//Finaliza chequeo de input

            //Al hacer clic en 'Guardar cambios':
            $('#verProductoModal .guardar-cambios-producto').click(function(){
                //Obtiene los datos de los input
                var url = $(this).data('url');
                var producto = $(this).val();
                var codigo = $('#verProductoModal .inputCodigoProducto').val();
                var nombre = $('#verProductoModal .inputNombreProducto').val();
                var categoria = $('#verProductoModal .selectCategoriaProducto').val();
                var descripcion = $('#verProductoModal .inputDescripcionProducto').val();
                var activo = $('#verProductoModal .form-check-input').is(':checked');

                //Crea un objeto datos
                var datos = {
                    'producto': producto,
                    'codigo': codigo,
                    'nombre': nombre,
                    'categoria': categoria,
                    'descripcion': descripcion,
                    'activo': activo
                }
                //Envia los datos al servidor
                $.ajax({
                    type: 'POST',
                    url: url,
                    data: {'datos': datos, 'csrfmiddlewaretoken': '{{csrf_token}}'},
                    success: function(contenido){
                        //Reemplaza valores de la tabla con nuevos valores.
                        $('#{{producto.id}}').find('.codpro').text(contenido['codigo']);
                        $('#{{producto.id}}').find('.pro').text(contenido['nombre']);
                        $('#{{producto.id}}').find('.catpro').text(contenido['categoria']);
                        //Muestra una alerta
                        swal("Producto modificado", "Los cambios se guardaron correctamente.", "success");
                    },
                    error: function(contenido){
                        //Muestra una alerta
                        swal("Error del sistema", "Si el problema persiste, contactá un administrador.", "error");
                    }
                })
            });//Finaliza clic 'Guardar cambios'.
        });//Finaliza modal

    });
</script>

Answer 1

尝试将$('#{{producto.id}}').替换为$('#'+contenido['id'])

$.ajax({
        type: 'POST',
        url: url,
        data: {'datos': datos, 'csrfmiddlewaretoken': '{{csrf_token}}'},
        success: function(contenido){
            //Reemplaza valores de la tabla con nuevos valores.
            $('#'+contenido['id']).find('.codpro').text(contenido['codigo']);
            $('#'+contenido['id']).find('.pro').text(contenido['nombre']);
            $('#'+contenido['id']).find('.catpro').text(contenido['categoria']);
            //Muestra una alerta
            swal("Producto modificado", "Los cambios se guardaron correctamente.", "success");
        },
        error: function(contenido){
            //Muestra una alerta
            swal("Error del sistema", "Si el problema persiste, contactá un administrador.", "error");
        }
    });

Answer 2

$.ajax({
                type: 'POST',
                url: url,
                data: {'datos': datos, 'csrfmiddlewaretoken': '{{csrf_token}}'},
                success: function(contenido){
                    //Reemplaza valores de la tabla con nuevos valores.
                    $('#{{producto.id}}').find('.codpro').text(contenido['codigo']);
                    $('#{{producto.id}}').find('.pro').text(contenido['nombre']);
                    $('#{{producto.id}}').find('.catpro').text(contenido['categoria']);
                    //Muestra una alerta
                    swal("Producto modificado", "Los cambios se guardaron correctamente.", "success");
                },
                error: function(contenido){
                    //Muestra una alerta
                    swal("Error del sistema", "Si el problema persiste, contactá un administrador.", "error");
                }
            })

$('#{{producto.id}}')是静态的，并且总是（我假设）引用第一个元素，因此每当您更改产品时，它都会编辑第一个元素

要解决此问题，您应该更改所有$('#{{productio.id}}')（我假设我不懂西班牙语）$('#'+codigo)

$.ajax({
            type: 'POST',
            url: url,
            data: {'datos': datos, 'csrfmiddlewaretoken': '{{csrf_token}}'},
            success: function(contenido){
                //Reemplaza valores de la tabla con nuevos valores.
                $('#'+codigo).find('.codpro').text(contenido['codigo']);
                $('#'+codigo).find('.pro').text(contenido['nombre']);
                $('#'+codigo).find('.catpro').text(contenido['categoria']);
                //Muestra una alerta
                swal("Producto modificado", "Los cambios se guardaron correctamente.", "success");
            },
            error: function(contenido){
                //Muestra una alerta
                swal("Error del sistema", "Si el problema persiste, contactá un administrador.", "error");
            }
        })

Ajax POST后，JQuery刷新数据

2 个答案: