¿Cómo actualizar código jQuery a la nueva versión y solucionar error en editar usuario – ajax?

publicado por: Anonymous

Tengo realizado un pequeño script de un popup modal box jQuery.

Pero observó que en la nueva versión jQuery existen nuevos cambios, código que ya está obsoleto, cómo puedo actualizar jQuery 2.1 a la versión jQuery 3.2.1 utilizando los nuevos métodos de respuesta ajax done y fail en vez del antiguo uso success

Ahora en mi código tengo problemas en editar los datos del usuario, cuando edito los datos del usuario en vez de actualizar los datos del usuario editado lo que hace es agregar un nuevo usuario en vez de actualizarlo.

introducir la descripción de la imagen aquí

Código ajax Popup Modal Box

_x000D_

_x000D_

$(function() {_x000D_
  //----- OPEN_x000D_
  $('[data-modal-open]').on('click', function(e)  {_x000D_
    $('#insert_form')[0].reset();_x000D_
    var targeted_modal_class = jQuery(this).attr('data-modal-open');_x000D_
_x000D_
    $('[data-modal="' + targeted_modal_class + '"]').fadeIn(350);_x000D_
    e.preventDefault();_x000D_
  });_x000D_
_x000D_
  //----- CLOSE_x000D_
  $('[data-modal-close]').on('click', function(e)  {_x000D_
    var targeted_modal_class = jQuery(this).attr('data-modal-close');_x000D_
    $('[data-modal="' + targeted_modal_class + '"]').fadeOut(350);_x000D_
_x000D_
    e.preventDefault();_x000D_
  });_x000D_
});_x000D_
  $(document).ready(function(){  _x000D_
      $('#add').click(function(){  _x000D_
_x000D_
                     $('#employee_id').val("");_x000D_
           $('#insert_form')[0].reset();  _x000D_
      });  _x000D_
      $(document).on('click', '.edit_data', function(){ _x000D_
_x000D_
           var employee_id = $(this).attr("id");  _x000D_
           $.ajax({  _x000D_
                url:"fetch.php",  _x000D_
                method:"POST",  _x000D_
                data:{employee_id:employee_id},  _x000D_
                dataType:"json",  _x000D_
                success:function(data){  _x000D_
                     $('#name').val(data.name);  _x000D_
                     $('#address').val(data.address);  _x000D_
                     $('#gender').val(data.gender);  _x000D_
                     $('#designation').val(data.designation);  _x000D_
                     $('#age').val(data.age);  _x000D_
                     $('#employee_id').val(data.id);  _x000D_
                     $('#insert').val("Update");  _x000D_
                     $('[data-modal="add_data_modal"]').fadeIn(350);_x000D_
_x000D_
      _x000D_
                }  _x000D_
           });  _x000D_
      });  _x000D_
      $('#insert_form').on("submit", function(event){  _x000D_
           event.preventDefault();  _x000D_
_x000D_
            $('[data-modal="add_data_modal"]').fadeOut(350);_x000D_
      _x000D_
           if($('#name').val() == "")  _x000D_
           {  _x000D_
                alert("Name is required");  _x000D_
           }  _x000D_
           else if($('#address').val() == '')  _x000D_
           {  _x000D_
                alert("Address is required");  _x000D_
           }  _x000D_
           else if($('#designation').val() == '')  _x000D_
           {  _x000D_
                alert("Designation is required");  _x000D_
           }  _x000D_
           else if($('#age').val() == '')  _x000D_
           {  _x000D_
                alert("Age is required");  _x000D_
           }  _x000D_
           else  _x000D_
           {  _x000D_
                $.ajax({  _x000D_
                     url:"insert.php",  _x000D_
                     method:"POST",  _x000D_
                     data:$('#insert_form').serialize(),  _x000D_
                     beforeSend:function(){  _x000D_
                          $('#insert').val("Inserting");  _x000D_
                     },  _x000D_
                     success:function(data){  _x000D_
                         _x000D_
                          $('#insert_form')[0].reset();  _x000D_
                              $('[data-modal="add_data_modal"]').fadeOut(350);_x000D_
_x000D_
                          $('#employee_table').html(data);  _x000D_
                     }  _x000D_
                });  _x000D_
           }  _x000D_
      });  _x000D_
      $(document).on('click', '.view_data', function(){  _x000D_
           var employee_id = $(this).attr("id");  _x000D_
           if(employee_id != '')  _x000D_
           {  _x000D_
                $.ajax({  _x000D_
                     url:"select.php",  _x000D_
                     method:"POST",  _x000D_
                     data:{employee_id:employee_id},  _x000D_
                     success:function(data){_x000D_
                            $('[data-modal="empdetail"]').fadeIn(350);_x000D_
                            $('#employee_detail').html(data);  _x000D_
      _x000D_
                     }  _x000D_
                });  _x000D_
           }            _x000D_
      });  _x000D_
 });

_x000D_

.content {_x000D_
	max-width:800px;_x000D_
	width:100%;_x000D_
	margin:0px auto;_x000D_
	margin-bottom:60px;_x000D_
}_x000D_
_x000D_
/* Outer */_x000D_
.modal {_x000D_
	width:100%;_x000D_
	height:100%;_x000D_
	display:none;_x000D_
	position:fixed;_x000D_
	top:0px;_x000D_
	left:0px;_x000D_
	right: 0;_x000D_
	bottom: 0;_x000D_
	background: rgba(0,0,0,0.2);_x000D_
  z-index: 99999;_x000D_
}_x000D_
_x000D_
/* Inner */_x000D_
.modal-inner {_x000D_
	width: 500px;_x000D_
	position: relative;_x000D_
	margin: 10% auto;_x000D_
	-webkit-border-radius: 5px;_x000D_
	-moz-border-radius: 5px;_x000D_
	border-radius: 5px;_x000D_
	background: #fff;_x000D_
}_x000D_
_x000D_
/* Close Button */_x000D_
.modal-close {_x000D_
	width:30px;_x000D_
	height:30px;_x000D_
	padding-top:4px;_x000D_
	display:inline-block;_x000D_
	position:absolute;_x000D_
	top:0px;_x000D_
	right:0px;_x000D_
	transition:ease 0.25s all;_x000D_
	-webkit-transform:translate(50%, -50%);_x000D_
	transform:translate(50%, -50%);_x000D_
	border-radius:1000px;_x000D_
	background:rgba(0,0,0,0.8);_x000D_
	font-family:Arial, Sans-Serif;_x000D_
	font-size:20px;_x000D_
	text-align:center;_x000D_
	line-height:100%;_x000D_
	color:#fff;_x000D_
}_x000D_
_x000D_
.modal-close:hover {_x000D_
	-webkit-transform:translate(50%, -50%) rotate(180deg);_x000D_
	transform:translate(50%, -50%) rotate(180deg);_x000D_
	background:rgba(0,0,0,1);_x000D_
	text-decoration:none;_x000D_
}

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<div class="container" style="width:700px;">  _x000D_
                <h3 align="center">PHP Ajax Update MySQL Data Through Bootstrap Modal</h3>  _x000D_
                <br />  _x000D_
                <div class="table-responsive">  _x000D_
                     <div align="right">  _x000D_
                          <button type="button" name="add" id="add" data-toggle="modal" data-modal-open="add_data_modal" class="btn btn-warning">Add</button>  _x000D_
                     </div>  _x000D_
                     <br />  _x000D_
                     <div id="employee_table">  _x000D_
                          <table class="table table-bordered">  _x000D_
                               <tr>  _x000D_
                                    <th width="70%">Employee Name</th>  _x000D_
                                    <th width="15%">Edit</th>  _x000D_
                                    <th width="15%">View</th>  _x000D_
                               </tr>  _x000D_
                                <?php  _x000D_
                               while ($stmt->fetch()) {_x000D_
                               ?>  _x000D_
                               <tr>  _x000D_
                                    <td><?php echo $name; ?></td>  _x000D_
                                    <td><input type="button" name="edit" value="Edit" id="<?php echo $id; ?>" class="btn btn-info btn-xs edit_data" /></td>  _x000D_
                                    <td><input type="button" name="view" value="view" id="<?php echo $id; ?>" class="btn btn-info btn-xs view_data" /></td>  _x000D_
                               </tr>  _x000D_
                               <?php  _x000D_
                               }  _x000D_
                               ?>    _x000D_
                          </table>  _x000D_
                     </div>  _x000D_
                </div>  _x000D_
           </div>  _x000D_
      </body>  _x000D_
 </html>  _x000D_
  _x000D_
<div id="dataModal" class="modal" data-modal="empdetail">  _x000D_
      <div class="modal-inner">  _x000D_
           <div class="modal-content">  _x000D_
                <div class="modal-header">  _x000D_
                      <a class="modal-close" data-modal-close="empdetail" href="#">x</a>_x000D_
                     <h4 class="modal-title">Employee Details</h4>  _x000D_
                </div>  _x000D_
                <div class="modal-body" id="employee_detail">  _x000D_
                </div>  _x000D_
                <div class="modal-footer">  _x000D_
                     <button type="button" class="btn btn-default" data-modal-close="empdetail">Close</button> _x000D_
_x000D_
                </div>  _x000D_
           </div>  _x000D_
      </div>  _x000D_
 </div>  _x000D_
 <div id="add_data_Modal" class="modal"  data-modal="add_data_modal">  _x000D_
      <div class="modal-inner">  _x000D_
           <div class="modal-content">  _x000D_
                <div class="modal-header">  _x000D_
                      <a class="modal-close" data-modal-close="add_data_modal" href="#">x</a>_x000D_
_x000D_
                     <h4 class="modal-title">PHP Ajax Update MySQL Data Through Bootstrap Modal</h4>  _x000D_
                </div>  _x000D_
                <div class="modal-body">  _x000D_
                     <form method="post" id="insert_form">  _x000D_
                          <label>Enter Employee Name</label>  _x000D_
                          <input type="text" name="name" id="name" class="form-control" />  _x000D_
                          <br />  _x000D_
                          <label>Enter Employee Address</label>  _x000D_
                          <textarea name="address" id="address" class="form-control"></textarea>  _x000D_
                          <br />  _x000D_
                          <label>Select Gender</label>  _x000D_
                          <select name="gender" id="gender" class="form-control">  _x000D_
                               <option value="Male">Male</option>  _x000D_
                               <option value="Female">Female</option>  _x000D_
                          </select>  _x000D_
                          <br />  _x000D_
                          <label>Enter Designation</label>  _x000D_
                          <input type="text" name="designation" id="designation" class="form-control" />  _x000D_
                          <br />  _x000D_
                          <label>Enter Age</label>  _x000D_
                          <input type="text" name="age" id="age" class="form-control" />  _x000D_
                          <br />  _x000D_
                          <input type="hidden" name="employee_id" id="employee_id" />  _x000D_
                          <input type="submit" name="insert" id="insert" value="Insert" class="btn btn-success" />  _x000D_
                     </form>  _x000D_
                </div>  _x000D_
                <div class="modal-footer">  _x000D_
                     <button type="button" class="btn btn-default" data-modal-close="add_data_modal" href="#">Close</button>  _x000D_
                </div>  _x000D_
           </div>  _x000D_
      </div>  _x000D_
 </div>

_x000D_

_x000D_

_x000D_

solución

Su código Jquery complementando con el de está pregunta parece que el error es claro, siempre envía el form del modal al mismo archivo php pero su validación para saber que operación realizar es

if($_POST["employee_id"] != '')  { ...} 

Pero su método ajax seguro siempre envía el valor en blanco y no ingresa al if , el campo está oculto pero lo envía y lo llena en este método. Debería verificar los datos que retorna fetch.php sí está el atributo id si no está, debería agregar a su consulta select.

Luego de solucionar el primer punto , Para migrar su código a Jquery V3, las partes más esenciales que se podría modificar es la verificación del ready del documento

Anteriormente se realizaba con

$(document).ready(function($) {

});

Debería modificar y trabajar de la siguiente forma

$(function() {

}); 

Para la función Ajax se debería reemplazar el success y error por done y fail además de existir always que se ejecutará siempre, estos tienen la siguiente estructura , en la sección del fail la variable jqxhr será un objeto con sus propiedades donde por ejemplo está responseXML y/ o responseText cuando se responde XML o Texto directamente.

$(function() {
    $.ajax({
        url: 'script.php',
        type: 'POST',
        dataType: 'JSON',
        data: {name: 'Nombre'},
    })
    .done(function() {
        console.log("Correcto");
    })
    .fail(function( jqXHR, textStatus ) {
        console.log(jqXHR.responseText);//Posible Texto Error
        console.log("Request failed: " + textStatus );
    }).always(function() {
        console.log("complete");
    });
});

Esta claro que en los ejemplos estos métodos son llamados directamente con .método(function()){...} pero también se podría tener en una variable la llamada ajax y llamar estos métodos directamente desde dicha variable.

$(function() {
    var request = $.ajax({
        url: 'script.php',
        type: 'POST',
        dataType: 'JSON',
        data: {name: 'Nombre'},
    });


    request.done(function() {
        console.log("Correcto");
    })

    request.fail(function( jqXHR, textStatus ) {
        console.log(jqXHR.responseText);//Posible Texto Error
        console.log("Request failed: " + textStatus );
    })

    request.always(function() {
        console.log("complete");
    });
});

Para su código, las modificaciones harían que su código tenga el siguiente formato

_x000D_

_x000D_

$(function() {_x000D_
    //----- OPEN_x000D_
    $('[data-modal-open]').on('click', function(e)  {_x000D_
        $('#insert_form')[0].reset();_x000D_
        var targeted_modal_class = jQuery(this).attr('data-modal-open');_x000D_
_x000D_
        $('[data-modal="' + targeted_modal_class + '"]').fadeIn(350);_x000D_
        e.preventDefault();_x000D_
    });_x000D_
_x000D_
    //----- CLOSE_x000D_
    $('[data-modal-close]').on('click', function(e)  {_x000D_
        var targeted_modal_class = jQuery(this).attr('data-modal-close');_x000D_
        $('[data-modal="' + targeted_modal_class + '"]').fadeOut(350);_x000D_
_x000D_
        e.preventDefault();_x000D_
    });_x000D_
_x000D_
    $('#add').click(function(){  _x000D_
        $('#employee_id').val("");_x000D_
        $('#insert_form')[0].reset();  _x000D_
    });  _x000D_
    $(document).on('click', '.edit_data', function(e){ _x000D_
       var employee_id = $(this).attr("id");  _x000D_
       $.ajax({  _x000D_
            url:"fetch.php",  _x000D_
            method:"POST",  _x000D_
            data:{employee_id:employee_id},  _x000D_
            dataType:"json"_x000D_
       }).done(function(data){_x000D_
            $('#name').val(data.name);  _x000D_
            $('#address').val(data.address);  _x000D_
            $('#gender').val(data.gender);  _x000D_
            $('#designation').val(data.designation);  _x000D_
            $('#age').val(data.age);  _x000D_
            $('#employee_id').val(data.id);  _x000D_
            $('#insert').val("Update");  _x000D_
            $('[data-modal="add_data_modal"]').fadeIn(350);_x000D_
       });_x000D_
    });  _x000D_
_x000D_
    $("#insert_form").submit(function(e){_x000D_
       event.preventDefault();  _x000D_
_x000D_
        $('[data-modal="add_data_modal"]').fadeOut(350);_x000D_
_x000D_
       if($('#name').val() == "")  _x000D_
       {  _x000D_
            alert("Name is required");  _x000D_
       }  _x000D_
       else if($('#address').val() == '')  _x000D_
       {  _x000D_
            alert("Address is required");  _x000D_
       }  _x000D_
       else if($('#designation').val() == '')  _x000D_
       {  _x000D_
            alert("Designation is required");  _x000D_
       }  _x000D_
       else if($('#age').val() == '')  _x000D_
       {  _x000D_
            alert("Age is required");  _x000D_
       }  _x000D_
       else  _x000D_
       {  _x000D_
            e.preventDefault();_x000D_
            var name = $('#nombre').val();_x000D_
            $.ajax({_x000D_
                url: 'insert.php',_x000D_
                type: 'POST',_x000D_
                data: $('#insert_form').serialize(),_x000D_
                beforeSend: function( xhr ) {_x000D_
                   $('#insert').val("Inserting");_x000D_
                }_x000D_
            })_x000D_
            .done(function(data) {_x000D_
                $('#insert_form')[0].reset();  _x000D_
                $('[data-modal="add_data_modal"]').fadeOut(350);_x000D_
                $('#employee_table').html(data); ;_x000D_
            }).fail(function( jqXHR, textStatus ) {_x000D_
                console.log(jqXHR.responseText);//Posible Texto Error_x000D_
                console.log("Request failed: " + textStatus );_x000D_
            })_x000D_
       } _x000D_
    }); _x000D_
    $(document).on('click', '.view_data', function(e){  _x000D_
       var employee_id = $(this).attr("id");  _x000D_
       if(employee_id != '')  _x000D_
       {  _x000D_
            $.ajax({  _x000D_
                 url:"select.php",  _x000D_
                 method:"POST",  _x000D_
                 data:{employee_id:employee_id}_x000D_
            }).done(function(data){_x000D_
                $('[data-modal="empdetail"]').fadeIn(350);_x000D_
                $('#employee_detail').html(data);  _x000D_
            });_x000D_
       }  _x000D_
    });_x000D_
});

_x000D_

_x000D_

_x000D_

Para más detalle sobre Jquery 3 y sus novedades, puede revisar esta pregunta

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *